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

package/dist/dist-esm/react-components/src/components/{OptionsButton.js → DevicesButton.js}

@@ -1,23 +1,46 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { ContextualMenuItemType, Icon } from '@fluentui/react';
+import { ContextualMenuItemType, Icon, merge } from '@fluentui/react';
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
+import { buttonFlyoutItemStyles } from './styles/ControlBar.styles';
 /**
- * Generates default menuprops for an OptionsButton if the props contain device
+ * Generates default menuprops for an DevicesButton if the props contain device
  * information and device change handlers.
- * @param props OptionsButtonProps
+ * @param props DevicesButtonProps
  * @returns MenuProps
  */
 const generateDefaultMenuProps = (props, strings) => {
+    var _a, _b, _c, _d;
     const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
     const defaultMenuProps = {
         items: [],
-        // Confine the menu to the parents bounds.
-        // More info: https://github.com/microsoft/fluentui/issues/18835
-        calloutProps: { styles: { root: { maxWidth: '100%' } } }
+        styles: (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuStyles,
+        calloutProps: {
+            styles: {
+                root: {
+                    // Confine the menu to the parents bounds.
+                    // More info: https://github.com/microsoft/fluentui/issues/18835
+                    // NB: 95% to keep some space for margin, drop shadow etc around the Callout.
+                    maxWidth: '95%'
+                }
+            },
+            // 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
+        }
     };
+    const menuItemStyles = merge(buttonFlyoutItemStyles, (_d = (_c = (_b = props.styles) === null || _b === void 0 ? void 0 : _b.menuStyles) === null || _c === void 0 ? void 0 : _c.menuItemStyles) !== null && _d !== void 0 ? _d : {});
     if (cameras && selectedCamera && onSelectCamera) {
         defaultMenuProps.items.push({
             key: 'sectionCamera',
@@ -30,6 +53,9 @@ const generateDefaultMenuProps = (props, strings) => {
                     text: camera.name,
                     title: camera.name,
                     iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
+                    itemProps: {
+                        styles: menuItemStyles
+                    },
                     canCheck: true,
                     isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
                     onClick: () => {
@@ -53,6 +79,9 @@ const generateDefaultMenuProps = (props, strings) => {
                     text: microphone.name,
                     title: microphone.name,
                     iconProps: { iconName: 'OptionsMic', styles: { root: { lineHeight: 0 } } },
+                    itemProps: {
+                        styles: menuItemStyles
+                    },
                     canCheck: true,
                     isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
                     onClick: () => {
@@ -76,6 +105,9 @@ const generateDefaultMenuProps = (props, strings) => {
                     text: speaker.name,
                     title: speaker.name,
                     iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
+                    itemProps: {
+                        styles: menuItemStyles
+                    },
                     canCheck: true,
                     isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
                     onClick: () => {
@@ -95,18 +127,18 @@ const generateDefaultMenuProps = (props, strings) => {
 };
 const onRenderOptionsIcon = () => React.createElement(Icon, { iconName: "ControlButtonOptions" });
 /**
- * `OptionsButton` allows you to easily create a component for rendering an options button. It can be used in your ControlBar component for example.
- * This button should contain dropdown menu items you can define through its property `menuProps`.
- * This `menuProps` property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ * A button to open a menu that controls device options.
  *
- * @param props - of type OptionsButtonProps
+ * Can be used with {@link ControlBar}.
+ *
+ * @public
  */
-export const OptionsButton = (props) => {
+export const DevicesButton = (props) => {
     var _a, _b;
     const { onRenderIcon } = props;
-    const localeStrings = useLocale().strings.optionsButton;
+    const localeStrings = useLocale().strings.devicesButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const defaultMenuProps = generateDefaultMenuProps(props, strings);
-    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 : onRenderOptionsIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'optionsButtonLabel' })));
+    const devicesButtonMenu = (_a = props.menuProps) !== null && _a !== void 0 ? _a : generateDefaultMenuProps(props, strings);
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'devicesButtonLabel' })));
 };
-//# sourceMappingURL=OptionsButton.js.map
+//# sourceMappingURL=DevicesButton.js.map

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

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

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

@@ -1,16 +1,22 @@
 /// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 /**
- * Strings of EndCallButton that can be overridden
+ * Strings of {@link EndCallButton} that can be overridden.
+ *
+ * @public
  */
 export interface EndCallButtonStrings {
     /**
      * Label of button
      */
     label: string;
+    /** Tooltip content. */
+    tooltipContent?: string;
 }
 /**
- * Props for EndCallButton component
+ * Props for {@link EndCallButton}.
+ *
+ * @public
  */
 export interface EndCallButtonProps extends ControlBarButtonProps {
     /**
@@ -24,9 +30,11 @@ export interface EndCallButtonProps extends ControlBarButtonProps {
     strings?: EndCallButtonStrings;
 }
 /**
- * `EndCallButton` allows you to easily create a component for rendering a end call button. It can be used in your ControlBar component for example.
+ * A button to end an ongoing call.
+ *
+ * Can be used with {@link ControlBar}.
  *
- * @param props - of type EndCallButtonProps
+ * @public
  */
 export declare const EndCallButton: (props: EndCallButtonProps) => JSX.Element;
 //# sourceMappingURL=EndCallButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EndCallButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":";AASA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAID;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAiCzD,CAAC"}
+{"version":3,"file":"EndCallButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":";AASA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAID;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAuBzD,CAAC"}

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

@@ -7,30 +7,58 @@ import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
 import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
-import { endCallControlButtonStyles } from './styles/ControlBar.styles';
 const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "ControlButtonEndCall" });
 /**
- * `EndCallButton` allows you to easily create a component for rendering a end call button. It can be used in your ControlBar component for example.
+ * A button to end an ongoing call.
  *
- * @param props - of type EndCallButtonProps
+ * Can be used with {@link ControlBar}.
+ *
+ * @public
  */
 export const EndCallButton = (props) => {
     var _a, _b, _c;
     const { styles } = props;
     const localeStrings = useLocale().strings.endCallButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const isDarkTheme = isDarkThemed(useTheme());
-    const componentStyles = concatStyleSets(endCallControlButtonStyles, {
-        root: {
-            background: isDarkTheme ? darkTheme.callingPalette.callRed : lightTheme.callingPalette.callRed
-        },
-        rootHovered: {
-            background: isDarkTheme ? darkTheme.callingPalette.callRedDark : lightTheme.callingPalette.callRedDark
-        },
-        rootPressed: {
-            background: isDarkTheme ? darkTheme.callingPalette.callRedDarker : lightTheme.callingPalette.callRedDarker
-        }
-    }, styles !== null && styles !== void 0 ? styles : {});
+    const theme = useTheme();
+    const isDarkTheme = isDarkThemed(theme);
+    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
     return (React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' })));
 };
+const darkThemeCallButtonStyles = {
+    root: {
+        color: darkTheme.callingPalette.iconWhite,
+        background: darkTheme.callingPalette.callRed,
+        ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    rootHovered: {
+        color: darkTheme.callingPalette.iconWhite,
+        background: darkTheme.callingPalette.callRed
+    },
+    rootPressed: {
+        color: darkTheme.callingPalette.iconWhite,
+        background: darkTheme.callingPalette.callRed
+    },
+    label: {
+        color: darkTheme.callingPalette.iconWhite
+    }
+};
+const lightThemeCallButtonStyles = {
+    root: {
+        color: lightTheme.callingPalette.iconWhite,
+        background: lightTheme.callingPalette.callRed,
+        ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    rootHovered: {
+        color: lightTheme.callingPalette.iconWhite,
+        background: lightTheme.callingPalette.callRed
+    },
+    rootPressed: {
+        color: lightTheme.callingPalette.iconWhite,
+        background: lightTheme.callingPalette.callRed
+    },
+    label: {
+        color: lightTheme.callingPalette.iconWhite
+    }
+};
 //# sourceMappingURL=EndCallButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AA4BxE,MAAM,mBAAmB,GAAG,GAAgB,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,sBAAsB,GAAG,CAAC;AAExF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACxD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,eAAe,CACrC,0BAA0B,EAC1B;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,OAAO;SAC/F;QACD,WAAW,EAAE;YACX,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW;SACvG;QACD,WAAW,EAAE;YACX,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa;SAC3G;KACF,EACD,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CACb,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC,OAAO,EACxC,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,mBAAmB,EACvD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,oBAAoB,IAChD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { IMessageBarProps } from '@fluentui/react';
 /**
- * {@link ErrorBar} properties.
+ * Props for {@link ErrorBar}.
  *
  * In addition to the following, {@link ErrorBar} forwards all
  * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.
+ *
+ * @public
  */
 export interface ErrorBarProps extends IMessageBarProps {
     /**
@@ -14,10 +16,12 @@ export interface ErrorBarProps extends IMessageBarProps {
     /**
      * Currently active errors.
      */
-    activeErrors: ActiveError[];
+    activeErrorMessages: ActiveErrorMessage[];
 }
 /**
  * All strings that may be shown on the UI in the {@link ErrorBar}.
+ *
+ * @public
  */
 export interface ErrorBarStrings {
     /**
@@ -36,22 +40,18 @@ export interface ErrorBarStrings {
     /**
      * User is no longer on the thread.
      *
-     * See also: {@link ErrorBarStrings.sendMessageNotInThisThread} for a more specific error.
+     * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.
      */
-    userNotInThisThread: string;
+    userNotInChatThread: string;
     /**
      * Sending message failed because user is no longer on the thread.
      */
-    sendMessageNotInThisThread: string;
+    sendMessageNotInChatThread: string;
     /**
      * A generic message when sending message fails.
      * Prefer more specific error strings when possible.
      */
     sendMessageGeneric: string;
-    /**
-     * Detected bad network connection via the Calling SDK.
-     */
-    callingNetworkFailure: string;
     /**
      * A generic message when starting video fails.
      */
@@ -76,15 +76,65 @@ export interface ErrorBarStrings {
      * A generic message when stopping screenshare fails.
      */
     stopScreenShareGeneric: string;
+    /**
+     * Message shown when poor network quality is detected during a call.
+     */
+    callNetworkQualityLow: string;
+    /**
+     * Message shown on failure to detect audio output devices.
+     */
+    callNoSpeakerFound: string;
+    /**
+     * Message shown on failure to detect audio input devices.
+     */
+    callNoMicrophoneFound: string;
+    /**
+     * Message shown when microphone can be enumerated but access is blocked by the system.
+     */
+    callMicrophoneAccessDenied: string;
+    /**
+     * Message shown when microphone is muted by the system (not by local or remote participants)
+     */
+    callMicrophoneMutedBySystem: string;
+    /**
+     * Mac OS specific message shown when microphone can be enumerated but access is
+     * blocked by the system.
+     */
+    callMacOsMicrophoneAccessDenied: string;
+    /**
+     * Message shown when poor network causes local video stream to be frozen.
+     */
+    callLocalVideoFreeze: string;
+    /**
+     * Message shown when camera can be enumerated but access is blocked by the system.
+     */
+    callCameraAccessDenied: string;
+    /**
+     * Message shown when local video fails to start because camera is already in use by
+     * another applciation.
+     */
+    callCameraAlreadyInUse: string;
+    /**
+     * Mac OS specific message shown when system denies access to camera.
+     */
+    callMacOsCameraAccessDenied: string;
+    /**
+     * Mac OS specific message shown when system denies sharing local screen on a call.
+     */
+    callMacOsScreenShareAccessDenied: string;
 }
 /**
  * All errors that can be shown in the {@link ErrorBar}.
+ *
+ * @public
  */
 export declare type ErrorType = keyof ErrorBarStrings;
 /**
- * Active error to be shown via {@link ErrorBar}.
+ * Active error messages to be shown via {@link ErrorBar}.
+ *
+ * @public
  */
-export interface ActiveError {
+export interface ActiveErrorMessage {
     /**
      * Type of error that is active.
      */
@@ -100,14 +150,16 @@ export interface ActiveError {
 /**
  * A component to show error messages on the UI.
  * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
- * Active errors are selected by {@link ErrorBarProps.activeErrors}.
+ * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
  *
  * This component internally tracks dismissed by the user.
  *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
- *   * Errors that do not have a timestamp: The error is dismissed until it dissappears from the props.
+ *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
  *         If the error recurs, it is shown in the UI.
  *
  * Uses {@link @fluentui/react#MessageBar} UI element.
+ *
+ * @public
  */
 export declare const ErrorBar: (props: ErrorBarProps) => JSX.Element;
 //# sourceMappingURL=ErrorBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBar.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAqC,MAAM,iBAAiB,CAAC;AAGtF;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,WAAW,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,wBAAwB,EAAE,MAAM,CAAC;IAEjC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,uBAAuB,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAED;;GAEG;AACH,oBAAY,SAAS,GAAG,MAAM,eAAe,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,WA6B/C,CAAC"}
+{"version":3,"file":"ErrorBar.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,gBAAgB,EAAqC,MAAM,iBAAiB,CAAC;AAGlG;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;CAC3C;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,wBAAwB,EAAE,MAAM,CAAC;IAEjC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,uBAAuB,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IACH,+BAA+B,EAAE,MAAM,CAAC;IAExC;;OAEG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,2BAA2B,EAAE,MAAM,CAAC;IAEpC;;OAEG;IACH,gCAAgC,EAAE,MAAM,CAAC;CAC1C;AAED;;;;GAIG;AACH,oBAAY,SAAS,GAAG,MAAM,eAAe,CAAC;AAE9C;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,WA8B/C,CAAC"}

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

@@ -6,14 +6,16 @@ import { useLocale } from '../localization';
 /**
  * A component to show error messages on the UI.
  * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
- * Active errors are selected by {@link ErrorBarProps.activeErrors}.
+ * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
  *
  * This component internally tracks dismissed by the user.
  *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
- *   * Errors that do not have a timestamp: The error is dismissed until it dissappears from the props.
+ *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
  *         If the error recurs, it is shown in the UI.
  *
  * Uses {@link @fluentui/react#MessageBar} UI element.
+ *
+ * @public
  */
 export const ErrorBar = (props) => {
     var _a;
@@ -22,9 +24,9 @@ export const ErrorBar = (props) => {
     const [dismissedErrors, setDismissedErrors] = useState([]);
     // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
     // Without this behaviour, this `useEffect` block would cause a render loop.
-    useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrors, dismissedErrors)), [props.activeErrors, dismissedErrors]);
-    const toShow = errorsToShow(props.activeErrors, dismissedErrors);
-    return (React.createElement(Stack, null, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { key: error.type, messageBarType: MessageBarType.error, onDismiss: () => setDismissedErrors(dismissError(dismissedErrors, error)) }), strings[error.type])))));
+    useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
+    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
+    return (React.createElement(Stack, null, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => setDismissedErrors(dismissError(dismissedErrors, error)) }), strings[error.type])))));
 };
 // Always returns a new Array so that the state variable is updated, trigerring a render.
 const dismissError = (dismissedErrors, toDismiss) => {
@@ -48,10 +50,10 @@ const dismissError = (dismissedErrors, toDismiss) => {
     ];
 };
 // Returns a new Array if and only if contents change, to avoid re-rendering when nothing was dropped.
-const dropDismissalsForInactiveErrors = (activeErrors, dismissedErrors) => {
+const dropDismissalsForInactiveErrors = (activeErrorMessages, dismissedErrors) => {
     const active = new Map();
-    for (const error of activeErrors) {
-        active.set(error.type, error);
+    for (const message of activeErrorMessages) {
+        active.set(message.type, message);
     }
     // For an error such that:
     // * It was previously active, and dismissed.
@@ -65,12 +67,12 @@ const dropDismissalsForInactiveErrors = (activeErrors, dismissedErrors) => {
     }
     return dismissedErrors;
 };
-const errorsToShow = (activeErrors, dismissedErrors) => {
+const errorsToShow = (activeErrorMessages, dismissedErrors) => {
     const dismissed = new Map();
     for (const error of dismissedErrors) {
         dismissed.set(error.type, error);
     }
-    return activeErrors.filter((error) => {
+    return activeErrorMessages.filter((error) => {
         const dismissal = dismissed.get(error.type);
         if (!dismissal) {
             // This error was never dismissed.
@@ -84,4 +86,38 @@ const errorsToShow = (activeErrors, dismissedErrors) => {
         return error.timestamp > dismissal.dismissedAt;
     });
 };
+const messageBarType = (errorType) => {
+    switch (errorType) {
+        case 'callNetworkQualityLow':
+        case 'callNoSpeakerFound':
+        case 'callNoMicrophoneFound':
+        case 'callMicrophoneAccessDenied':
+        case 'callMicrophoneMutedBySystem':
+        case 'callMacOsMicrophoneAccessDenied':
+        case 'callLocalVideoFreeze':
+        case 'callCameraAccessDenied':
+        case 'callCameraAlreadyInUse':
+        case 'callMacOsCameraAccessDenied':
+        case 'callMacOsScreenShareAccessDenied':
+            return MessageBarType.warning;
+        default:
+            return MessageBarType.error;
+    }
+};
+const messageBarIconProps = (errorType) => {
+    const iconName = customIconName[errorType];
+    return iconName ? { iconName } : undefined;
+};
+const customIconName = {
+    callNetworkQualityLow: 'ErrorBarCallNetworkQualityLow',
+    callNoSpeakerFound: 'ErrorBarCallNoSpeakerFound',
+    callNoMicrophoneFound: 'ErrorBarCallNoMicrophoneFound',
+    callMicrophoneAccessDenied: 'ErrorBarCallMicrophoneAccessDenied',
+    callMicrophoneMutedBySystem: 'ErrorBarCallMicrophoneMutedBySystem',
+    callMacOsMicrophoneAccessDenied: 'ErrorBarCallMacOsMicrophoneAccessDenied',
+    callLocalVideoFreeze: 'ErrorBarCallLocalVideoFreeze',
+    callCameraAccessDenied: 'ErrorBarCallCameraAccessDenied',
+    callCameraAlreadyInUse: 'ErrorBarCallCameraAlreadyInUse',
+    callMacOsCameraAccessDenied: 'ErrorBarCallMacOsCameraAccessDenied'
+};
 //# sourceMappingURL=ErrorBar.js.map

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

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

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

@@ -1,9 +1,13 @@
+import { IStyle } from '@fluentui/react';
 import React from 'react';
-import { BaseCustomStylesProps } from '../types';
-export declare type GridLayoutType = 'standard';
+import { BaseCustomStyles } from '../types';
+/**
+ * Props for {@link GridLayout}.
+ *
+ * @public
+ */
 export interface GridLayoutProps {
     children: React.ReactNode;
-    layout?: GridLayoutType;
     /**
      * Allows users to pass in an object contains custom CSS styles.
      * @Example
@@ -11,7 +15,62 @@ export interface GridLayoutProps {
      * <GridLayout styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: BaseCustomStylesProps;
+    styles?: BaseCustomStyles;
 }
+/**
+ * {@link GridLayout} Component Styles.
+ * @public
+ */
+export interface GridLayoutStyles extends BaseCustomStyles {
+    /** Styles for each child of {@link GridLayout} */
+    children?: IStyle;
+}
+/**
+ * A component to lay out audio / video participants tiles in a call.
+ *
+ * @public
+ */
 export declare const GridLayout: (props: GridLayoutProps) => JSX.Element;
+/**
+ * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.
+ *
+ * @Example
+ * ```
+ *  ______________________
+ * |_______|_______|______|
+ * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.
+ *  ______________
+ * |    |    |    |
+ * |____|____|    |
+ * |    |    |    |
+ * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.
+ *  _______________
+ * |       |       |
+ * |_______|_______|
+ * |       |       | If all cells are equal, we default the fill direction as horizontal.
+ * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.
+ * ```
+ */
+declare type GridProps = {
+    fillDirection: FillDirection;
+    rows: number;
+    columns: number;
+};
+declare type FillDirection = 'horizontal' | 'vertical';
+/**
+ * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid
+ * @param numberOfItems - number of items to place in grid
+ * @param width - width of grid
+ * @param height - height of grid
+ * @returns GridProps
+ */
+export declare const calculateGridProps: (numberOfItems: number, width: number, height: number) => GridProps;
+/**
+ * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
+ * @param numberOfItems - number of items to place in grid
+ * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction
+ * @returns - classname
+ */
+export declare const createGridStyles: (numberOfItems: number, gridProps: GridProps) => string;
+export {};
 //# sourceMappingURL=GridLayout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGjD,oBAAY,cAAc,GAAG,UAAU,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAQD,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WA4BnD,CAAC"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAe,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WAoCnD,CAAC;AAeF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,aAAK,SAAS,GAAG;IACf,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,aAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,kBAAmB,MAAM,SAAS,MAAM,UAAU,MAAM,KAAG,SAiFzF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,aAAa,SAAS,KAAG,MAkD9E,CAAC"}