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

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

@@ -1,23 +1,44 @@
 /// <reference types="react" />
-import { IStyle } from '@fluentui/react';
-import { ParticipantListProps } from './ParticipantList';
-import { ButtonCustomStylesProps } from '../types';
-import { ControlBarButtonProps } from './ControlBarButton';
+import { IContextualMenuStyles, IContextualMenuItemStyles } from '@fluentui/react';
+import { ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';
+import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
+import { CommunicationParticipant } from '../types/CommunicationParticipant';
+import { OnRenderAvatarCallback } from '../types/OnRender';
+import { ParticipantListParticipant } from '../types';
 /**
- * Styles Props for ParticipantsButton component
+ * Styles for the {@link ParticipantsButton} menu.
+ *
+ * @public
  */
-export interface ParticipantsButtonStylesProps extends ButtonCustomStylesProps {
-    /** Styles of ParticipantList container */
-    participantListContainerStyle?: IStyle;
+export interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {
+    /** Styles for the {@link ParticipantsButton} menu items. */
+    menuItemStyles?: IContextualMenuItemStyles;
+    /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */
+    participantListStyles?: ParticipantListStyles;
 }
 /**
- * Strings of ParticipantsButtonStrings that can be overridden
+ * Styles Props for {@link ParticipantsButton}.
+ *
+ * @public
+ */
+export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
+    /** Styles of the {@link ParticipantsButton} menu flyout */
+    menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
+}
+/**
+ * Strings of {@link ParticipantsButton} that can be overridden.
+ *
+ * @public
  */
 export interface ParticipantsButtonStrings {
     /**
      * Label of button
      */
     label: string;
+    /**
+     * Button tooltip content.
+     */
+    tooltipContent?: string;
     /**
      * Header of menu pop up
      */
@@ -36,11 +57,43 @@ export interface ParticipantsButtonStrings {
     muteAllButtonLabel: string;
 }
 /**
- * Props for ParticipantsButton component
+ * Props for {@link ParticipantsButton}.
+ *
+ * @public
  */
-export interface ParticipantsButtonProps extends ControlBarButtonProps, ParticipantListProps {
+export interface ParticipantsButtonProps extends ControlBarButtonProps {
+    /**
+     * Participants in user call or chat
+     */
+    participants: ParticipantListParticipant[];
+    /**
+     * User ID of user
+     */
+    myUserId?: string;
     /**
-     * Optional callback to render the participant list.
+     * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).
+     *
+     * @defaultValue `false`
+     */
+    excludeMe?: boolean;
+    /**
+     * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`
+     */
+    onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;
+    /**
+     * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.
+     */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    /**
+     * Callback to render the context menu for each participant
+     */
+    onRemoveParticipant?: (userId: string) => void;
+    /**
+     * Callback to render custom menu items for each participant.
+     */
+    onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
+    /**
+     * Optional callback to render a custom participant list.
      */
     onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;
     /**
@@ -50,7 +103,7 @@ export interface ParticipantsButtonProps extends ControlBarButtonProps, Particip
      * <ParticipantsButton styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: ParticipantsButtonStylesProps;
+    styles?: ParticipantsButtonStyles;
     /**
      * URL to invite new participants to the current call
      */
@@ -65,12 +118,15 @@ export interface ParticipantsButtonProps extends ControlBarButtonProps, Particip
     strings?: Partial<ParticipantsButtonStrings>;
 }
 /**
- * `ParticipantsButton` allows you to easily create a component rendering a participants button. It can be used in your ControlBar component for example.
+ * A button to show a menu with calling or chat participants.
+ *
+ * Can be used with {@link ControlBar}.
+ *
  * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list
  * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.
- * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
  *
- * @param props - of type ParticipantsButtonProps
+ * @public
  */
 export declare const ParticipantsButton: (props: ParticipantsButtonProps) => JSX.Element;
 //# sourceMappingURL=ParticipantsButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantsButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,MAAM,EAIP,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,uBAAuB;IAC5E,0CAA0C;IAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB,EAAE,oBAAoB;IAC1F;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9E;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,6BAA6B,CAAC;IACvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC9C;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,KAAG,WA0InE,CAAC"}
+{"version":3,"file":"ParticipantsButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAKL,qBAAqB,EACrB,yBAAyB,EAE1B,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAEL,oBAAoB,EACpB,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAoB,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAErG,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAEtD;;;;GAIG;AACH,MAAM,WAAW,sCAAuC,SAAQ,qBAAqB;IACnF,4DAA4D;IAC5D,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,mGAAmG;IACnG,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C;AAED;;;;GAIG;AACH,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC,sCAAsC,CAAC,CAAC;CAC9D;AAED;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB;IACpE;;OAEG;IACH,YAAY,EAAE,0BAA0B,EAAE,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpF;;OAEG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,2BAA2B,CAAC,EAAE,4BAA4B,CAAC;IAC3D;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9E;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC9C;AAMD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,KAAG,WAsLnE,CAAC"}

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

@@ -1,44 +1,49 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { ContextualMenuItemType, Stack, mergeStyles, Icon } from '@fluentui/react';
+import { ContextualMenuItemType, Icon, merge } from '@fluentui/react';
+import { _formatString } from "../../../acs-ui-common/src";
 import copy from 'copy-to-clipboard';
 import React, { useCallback, useMemo } from 'react';
 import { ParticipantList } from './ParticipantList';
 import { defaultParticipantListContainerStyle, participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';
 import { useLocale } from '../localization';
-import { formatString } from '../localization/localizationUtils';
 import { ControlBarButton } from './ControlBarButton';
+import { useIdentifiers } from '../identifiers';
 const onRenderPeopleIcon = () => {
     return React.createElement(Icon, { iconName: "ControlButtonParticipants" });
 };
 /**
- * `ParticipantsButton` allows you to easily create a component rendering a participants button. It can be used in your ControlBar component for example.
+ * A button to show a menu with calling or chat participants.
+ *
+ * Can be used with {@link ControlBar}.
+ *
  * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list
  * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.
- * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
  *
- * @param props - of type ParticipantsButtonProps
+ * @public
  */
 export const ParticipantsButton = (props) => {
-    var _a, _b;
-    const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList } = props;
+    var _a, _b, _c, _d;
+    const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems } = props;
+    const ids = useIdentifiers();
     const onMuteAllCallback = useCallback(() => {
         if (onMuteAll) {
             onMuteAll();
         }
     }, [onMuteAll]);
-    const { participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onParticipantRemove } = props;
     const defaultParticipantList = useCallback(() => {
-        return (React.createElement(Stack, { className: mergeStyles(defaultParticipantListContainerStyle, styles === null || styles === void 0 ? void 0 : styles.participantListContainerStyle) },
-            React.createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onParticipantRemove: onParticipantRemove })));
+        var _a;
+        return (React.createElement(ParticipantList, { participants: participants, myUserId: myUserId, excludeMe: excludeMe, onRenderParticipant: onRenderParticipant, onRenderAvatar: onRenderAvatar, onRemoveParticipant: onRemoveParticipant, onFetchParticipantMenuItems: onFetchParticipantMenuItems, styles: merge(defaultParticipantListContainerStyle, (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles) }));
     }, [
         excludeMe,
         myUserId,
-        onParticipantRemove,
+        onRemoveParticipant,
         onRenderAvatar,
         onRenderParticipant,
         participants,
-        styles === null || styles === void 0 ? void 0 : styles.participantListContainerStyle
+        (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.participantListStyles,
+        onFetchParticipantMenuItems
     ]);
     const onCopyCallback = useCallback(() => {
         if (callInvitationURL) {
@@ -50,6 +55,7 @@ export const ParticipantsButton = (props) => {
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     const participantCount = participants.length;
     const generateDefaultParticipantsSubMenuProps = useCallback(() => {
+        var _a;
         const items = [];
         if (participantCount > 0) {
             items.push({
@@ -62,6 +68,7 @@ export const ParticipantsButton = (props) => {
                     key: 'muteAllKey',
                     text: strings.muteAllButtonLabel,
                     title: strings.muteAllButtonLabel,
+                    styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.menuItemStyles,
                     iconProps: { iconName: 'MicOff2' },
                     onClick: onMuteAllCallback
                 });
@@ -74,13 +81,29 @@ export const ParticipantsButton = (props) => {
         defaultParticipantList,
         onMuteAll,
         strings.muteAllButtonLabel,
+        (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles,
         onMuteAllCallback
     ]);
     const defaultMenuProps = useMemo(() => {
+        var _a, _b;
         const menuProps = {
             title: strings.menuHeader,
-            styles: participantsButtonMenuPropsStyle,
-            items: []
+            styles: merge(participantsButtonMenuPropsStyle, styles === null || styles === void 0 ? void 0 : styles.menuStyles),
+            items: [],
+            calloutProps: {
+                // Disable dismiss on resize to work around a couple Fluent UI bugs
+                // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
+                //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
+                //   by the headless SDK.
+                // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
+                //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
+                //   deterministically avoid dismissal.
+                //
+                // A side effect of this workaround is that the context menu stays open when window is resized, and may
+                // get detached from original target visually. That bug is preferable to the bug when this value is not set -
+                // The Callout (frequently) gets dismissed automatically.
+                preventDismissOnResize: true
+            }
         };
         if (participantCount > 0) {
             const participantIds = participants.map((p) => p.userId);
@@ -90,14 +113,25 @@ export const ParticipantsButton = (props) => {
             }
             menuProps.items.push({
                 key: 'participantCountKey',
-                name: formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),
+                name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),
+                itemProps: { styles: (_a = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _a === void 0 ? void 0 : _a.menuItemStyles },
                 iconProps: { iconName: 'People' },
                 subMenuProps: {
                     items: generateDefaultParticipantsSubMenuProps(),
-                    // Confine the menu to the parents bounds.
-                    // More info: https://github.com/microsoft/fluentui/issues/18835
-                    calloutProps: { styles: { root: { maxWidth: '100%' } } }
-                }
+                    calloutProps: {
+                        styles: {
+                            root: {
+                                // Confine the menu to the parents bounds.
+                                // More info: https://github.com/microsoft/fluentui/issues/18835
+                                maxWidth: '100%'
+                            }
+                        },
+                        // Disable dismiss on resize to work around a couple Fluent UI bugs
+                        // See reasoning in the props for the parent menu.
+                        preventDismissOnResize: true
+                    }
+                },
+                'data-ui-id': ids.participantButtonPeopleMenuItem
             });
         }
         if (callInvitationURL) {
@@ -105,6 +139,7 @@ export const ParticipantsButton = (props) => {
                 key: 'InviteLinkKey',
                 name: strings.copyInviteLinkButtonLabel,
                 title: strings.copyInviteLinkButtonLabel,
+                itemProps: { styles: (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles },
                 iconProps: { iconName: 'Link' },
                 onClick: onCopyCallback
             });
@@ -114,13 +149,15 @@ export const ParticipantsButton = (props) => {
         strings.menuHeader,
         strings.participantsListButtonLabel,
         strings.copyInviteLinkButtonLabel,
+        styles === null || styles === void 0 ? void 0 : styles.menuStyles,
         participantCount,
         callInvitationURL,
         participants,
         excludeMe,
+        ids.participantButtonPeopleMenuItem,
         generateDefaultParticipantsSubMenuProps,
         onCopyCallback
     ]);
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: (_a = props.menuProps) !== null && _a !== void 0 ? _a : defaultMenuProps, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'participantsButtonLabel' })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: (_c = props.menuProps) !== null && _c !== void 0 ? _c : defaultMenuProps, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'participantsButtonLabel' })));
 };
 //# sourceMappingURL=ParticipantsButton.js.map

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { OnRenderAvatarCallback, VideoStreamOptions } from '../types';
+/**
+ * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
+ * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export declare const RemoteVideoTile: React.MemoExoticComponent<(props: {
+    userId: string;
+    onCreateRemoteStreamView?: ((userId: string, options?: VideoStreamOptions | undefined) => Promise<void>) | undefined;
+    onDisposeRemoteStreamView?: ((userId: string) => Promise<void>) | undefined;
+    isAvailable?: boolean | undefined;
+    isMuted?: boolean | undefined;
+    isSpeaking?: boolean | undefined;
+    isScreenSharingOn?: boolean | undefined;
+    renderElement?: HTMLElement | undefined;
+    displayName?: string | undefined;
+    remoteVideoViewOptions?: VideoStreamOptions | undefined;
+    onRenderAvatar?: OnRenderAvatarCallback | undefined;
+    showMuteIndicator?: boolean | undefined;
+}) => JSX.Element>;
+//# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteVideoTile.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAItE;;;;GAIG;AACH,eAAO,MAAM,eAAe;YAEhB,MAAM;yCACsB,MAAM,+CAAmC,QAAQ,IAAI,CAAC;0CACrD,MAAM,KAAK,QAAQ,IAAI,CAAC;;;;;;;;;;kBAoFhE,CAAC"}

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

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React, { useEffect, useMemo } from 'react';
+import { StreamMedia } from './StreamMedia';
+import { VideoTile } from './VideoTile';
+/**
+ * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
+ * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ */
+export const RemoteVideoTile = React.memo((props) => {
+    const { isAvailable, isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    useEffect(() => {
+        if (isAvailable && !renderElement) {
+            onCreateRemoteStreamView && onCreateRemoteStreamView(userId, remoteVideoViewOptions);
+        }
+        // Always clean up element to make tile up to date and be able to dispose correctly
+        // TODO: Add an extra param to onDisposeRemoteStreamView(userId, flavor(optional)) after GA
+        // and isolate dispose behavior between screen share and video
+        return () => {
+            if (renderElement && !isScreenSharingOn) {
+                onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+            }
+        };
+    }, [
+        isAvailable,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions,
+        renderElement,
+        userId,
+        isScreenSharingOn
+    ]);
+    // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
+    // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.
+    // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed
+    useEffect(() => {
+        return () => {
+            // TODO: Remove if condition when we isolate dispose behavior for screen share
+            if (!isScreenSharingOn) {
+                onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+            }
+        };
+    }, [onDisposeRemoteStreamView, userId, isScreenSharingOn]);
+    const renderVideoStreamElement = useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
+        }
+        return React.createElement(StreamMedia, { videoStreamElement: renderElement });
+    }, [renderElement]);
+    return (React.createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator }));
+});
+//# sourceMappingURL=RemoteVideoTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CACvC,CAAC,KAaA,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,GAAG,KAAK,CAAC;IAEV,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,CAAC,aAAa,EAAE;YACjC,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;SACtF;QACD,mFAAmF;QACnF,2FAA2F;QAC3F,8DAA8D;QAC9D,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,IAAI,CAAC,iBAAiB,EAAE;gBACvC,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;aAChE;QACH,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,WAAW;QACX,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB;QACtB,aAAa;QACb,MAAM;QACN,iBAAiB;KAClB,CAAC,CAAC;IAEH,kKAAkK;IAClK,yGAAyG;IACzG,2GAA2G;IAC3G,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,8EAA8E;YAC9E,IAAI,CAAC,iBAAiB,EAAE;gBACtB,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;aAChE;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE3D,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACtD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC;IAC5D,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,16 @@
+import { IStyle } from '@fluentui/react';
+import React from 'react';
+import { HorizontalGalleryStyles } from './HorizontalGallery';
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+export declare const ResponsiveHorizontalGallery: (props: {
+    children: React.ReactNode;
+    containerStyles: IStyle;
+    horizontalGalleryStyles: HorizontalGalleryStyles;
+    childWidthRem: number;
+    gapWidthRem: number;
+    buttonWidthRem?: number;
+}) => JSX.Element;
+//# sourceMappingURL=ResponsiveHorizontalGallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveHorizontalGallery.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAe,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAqB,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAIjF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,UAAW;IACjD,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,uBAAuB,CAAC;IACjD,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,KAAG,WAuBH,CAAC"}

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

@@ -0,0 +1,64 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+import React, { useRef } from 'react';
+import { HorizontalGallery } from './HorizontalGallery';
+import { convertRemToPx } from './utils/common';
+import { useContainerWidth } from './utils/responsive';
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+export const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = useRef(null);
+    const containerWidth = useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React.Children.count(props.children),
+        containerWidth: containerWidth - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
+    });
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+};
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = convertRemToPx(childWidthRem);
+    const gapWidth = convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    const buttonWidth = convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+};
+//# sourceMappingURL=ResponsiveHorizontalGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAO3C,EAAe,EAAE;IAChB,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,wBAAwB,CAAC;QAC/C,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,cAAc,GAAG,WAAW,GAAG,YAAY;QAC3D,aAAa;QACb,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnE,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,IACvF,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,CAAC,IAMjC,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE9F,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;IACtG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC1E,CAAC,CAAC"}

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

@@ -1,16 +1,26 @@
 /// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
- * Strings of ScreenShareButton that can be overridden
+ * Strings of {@link ScreenShareButton} that can be overridden.
+ *
+ * @public
  */
 export interface ScreenShareButtonStrings {
     /** Label when button is on. */
     onLabel: string;
     /** Label when button is off. */
     offLabel: string;
+    /** * Tooltip content when the button is disabled. */
+    tooltipDisabledContent?: string;
+    /** Tooltip content when the button is on. */
+    tooltipOnContent?: string;
+    /** Tooltip content when the button is off. */
+    tooltipOffContent?: string;
 }
 /**
- * Props for ScreenShareButton component
+ * Props for {@link ScreenShareButton}.
+ *
+ * @public
  */
 export interface ScreenShareButtonProps extends ControlBarButtonProps {
     /**
@@ -24,10 +34,11 @@ export interface ScreenShareButtonProps extends ControlBarButtonProps {
     strings?: Partial<ScreenShareButtonStrings>;
 }
 /**
- * `ScreenShareButton` allows you to easily create a component for rendering a screen-share button.
- * It can be used in your ControlBar component for example.
+ * A button to start / stop screen sharing.
+ *
+ * Can be used with {@link ControlBar}.
  *
- * @param props - of type ScreenShareButtonProps
+ * @public
  */
 export declare const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 //# sourceMappingURL=ScreenShareButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC7C;AAKD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WAcjE,CAAC"}
+{"version":3,"file":"ScreenShareButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC7C;AAKD;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WAkBjE,CAAC"}

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

@@ -3,19 +3,35 @@
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
-import { Icon } from '@fluentui/react';
+import { DefaultPalette, Icon, useTheme } from '@fluentui/react';
 const onRenderScreenShareOnIcon = () => React.createElement(Icon, { iconName: "ControlButtonScreenShareStop" });
 const onRenderScreenShareOffIcon = () => React.createElement(Icon, { iconName: "ControlButtonScreenShareStart" });
 /**
- * `ScreenShareButton` allows you to easily create a component for rendering a screen-share button.
- * It can be used in your ControlBar component for example.
+ * A button to start / stop screen sharing.
  *
- * @param props - of type ScreenShareButtonProps
+ * Can be used with {@link ControlBar}.
+ *
+ * @public
  */
 export const ScreenShareButton = (props) => {
     var _a, _b, _c, _d;
     const localeStrings = useLocale().strings.screenShareButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
+    const theme = useTheme();
+    const styles = screenshareButtonStyles(theme);
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { styles: styles, onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
 };
+const screenshareButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: DefaultPalette.white,
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: DefaultPalette.white,
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    labelChecked: { color: DefaultPalette.white }
+});
 //# sourceMappingURL=ScreenShareButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AA4BvC,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,CAAC;AACtG,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,GAAG,CAAC;AAExG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,IACpD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,IAAI,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAsCvF,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,CAAC;AACtG,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,GAAG,CAAC;AAExG;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,IACpD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,CAAC,+DAA+D;KACxI;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,CAAC,+DAA+D;KACxI;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC"}