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

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

@@ -1,2 +1,5 @@
+/**
+ * @private
+ */
 export declare const gridLayoutStyle: string;
 //# sourceMappingURL=GridLayout.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/GridLayout.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,QAM1B,CAAC"}
+{"version":3,"file":"GridLayout.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/GridLayout.styles.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,eAAO,MAAM,eAAe,QAK1B,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/GridLayout.styles.js

@@ -1,11 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export const gridLayoutStyle = mergeStyles({
+    width: '100%',
     height: '100%',
     display: 'grid',
-    flexGrow: '1',
-    gap: '.5rem',
-    padding: '.5rem'
+    gridGap: '0.5rem'
 });
 //# sourceMappingURL=GridLayout.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/GridLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/GridLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,GAAG;IACb,GAAG,EAAE,OAAO;IACZ,OAAO,EAAE,OAAO;CACjB,CAAC,CAAC"}
+{"version":3,"file":"GridLayout.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/GridLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.d.ts

@@ -0,0 +1,22 @@
+import { IStyle, Theme } from '@fluentui/react';
+/**
+ * Horizontal Gallery button width in rem
+ */
+export declare const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+export declare const leftRightButtonStyles: (theme: Theme) => IStyle;
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+export declare const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+export declare const rootStyle: IStyle;
+/**
+ * @private
+ */
+export declare const childrenContainerStyle: IStyle;
+//# sourceMappingURL=HorizontalGallery.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalGallery.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,qBAAqB,UAAW,KAAK,KAAG,MAUpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAIvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAGpC,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js

@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Horizontal Gallery button width in rem
+ */
+export const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+export const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: '100%',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
+    };
+};
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+export const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+export const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+export const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+//# sourceMappingURL=HorizontalGallery.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC"}

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

@@ -1,7 +1,35 @@
 import { IStyle } from '@fluentui/react';
+/**
+ * @private
+ */
 export declare const inputBoxWrapperStyle: string;
+/**
+ * @private
+ */
 export declare const inputBoxStyle: string;
+/**
+ * @private
+ */
+export declare const inputBoxNewLineSpaceAffordance: IStyle;
+/**
+ *
+ * @private
+ */
+export declare const textContainerStyle: IStyle;
+/**
+ * @private
+ */
 export declare const textFieldStyle: (errorColor: string, hasErrorMessage: boolean, disabled: boolean) => IStyle;
+/**
+ * @private
+ */
 export declare const inputButtonStyle: string;
-export declare const inputButtonContainerStyle: (rtl?: boolean | undefined) => string;
+/**
+ * @private
+ */
+export declare const inlineButtonsContainerStyle: IStyle;
+/**
+ * @private
+ */
+export declare const newLineButtonsContainerStyle: IStyle;
 //# sourceMappingURL=InputBoxComponent.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.style.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,MAAM,EAAe,MAAM,iBAAiB,CAAC;AAEnE,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAkBxB,CAAC;AAEH,eAAO,MAAM,cAAc,eAAgB,MAAM,mBAAmB,OAAO,YAAY,OAAO,KAAG,MA0BhG,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAEH,eAAO,MAAM,yBAAyB,iCAAoB,MAUtD,CAAC"}
+{"version":3,"file":"InputBoxComponent.style.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,MAAM,EAAe,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,QAmBxB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAE5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAIhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,eAAgB,MAAM,mBAAmB,OAAO,YAAY,OAAO,KAAG,MA0BhG,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAQ3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAMzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,MAK1C,CAAC"}

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

@@ -1,10 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles, FontWeights } from '@fluentui/react';
+/**
+ * @private
+ */
 export const inputBoxWrapperStyle = mergeStyles({
     padding: '0'
 });
+/**
+ * @private
+ */
 export const inputBoxStyle = mergeStyles({
+    overflow: 'auto',
     minHeight: '2.25rem',
     maxHeight: '8.25rem',
     outline: 'red 5px',
@@ -23,6 +30,24 @@ export const inputBoxStyle = mergeStyles({
         fontSize: '0.875rem'
     }
 });
+/**
+ * @private
+ */
+export const inputBoxNewLineSpaceAffordance = {
+    marginBottom: '2rem'
+};
+/**
+ *
+ * @private
+ */
+export const textContainerStyle = {
+    alignSelf: 'center',
+    position: 'relative',
+    width: '100%'
+};
+/**
+ * @private
+ */
 export const textFieldStyle = (errorColor, hasErrorMessage, disabled) => {
     const borderColor = hasErrorMessage ? errorColor : 'none';
     return {
@@ -50,25 +75,35 @@ export const textFieldStyle = (errorColor, hasErrorMessage, disabled) => {
         }
     };
 };
+/**
+ * @private
+ */
 export const inputButtonStyle = mergeStyles({
     color: 'grey',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'center',
     margin: 'auto',
-    top: '0',
-    bottom: '0',
     width: '1.0625rem',
-    height: '1.0625rem'
+    height: '1.0625rem',
+    '&:hover': {
+        backgroundColor: 'transparent'
+    }
 });
-export const inputButtonContainerStyle = (rtl) => mergeStyles({
-    display: 'flex',
-    justifyContent: 'center',
+/**
+ * @private
+ */
+export const inlineButtonsContainerStyle = {
     position: 'absolute',
-    margin: 'auto',
+    right: '0.3rem',
     top: '0',
     bottom: '0',
-    right: !rtl ? '0.3rem' : undefined,
-    left: rtl ? '0.3rem' : undefined
-});
+    gap: '0.25rem'
+};
+/**
+ * @private
+ */
+export const newLineButtonsContainerStyle = {
+    position: 'absolute',
+    right: '0.8rem',
+    bottom: '0.8rem',
+    gap: '1rem'
+};
 //# sourceMappingURL=InputBoxComponent.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,eAAwB,EAAE,QAAiB,EAAU,EAAE;IACxG,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,GAAG;YACd,QAAQ,EAAE,SAAS;SACpB;QACD,OAAO,EAAE,EAAE;QACX,UAAU,EAAE;YACV,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,GAAG;YACd,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,WAAW;YACxB,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YACrC,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;YACtC,SAAS,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;YACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE;SAChE;QACD,KAAK,EAAE;YACL,YAAY,EAAE,SAAS;SACxB;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,UAAU;SAClB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,GAAa,EAAU,EAAE,CACjE,WAAW,CAAC;IACV,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;IAClC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;CACjC,CAAC,CAAC"}
+{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,eAAwB,EAAE,QAAiB,EAAU,EAAE;IACxG,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,GAAG;YACd,QAAQ,EAAE,SAAS;SACpB;QACD,OAAO,EAAE,EAAE;QACX,UAAU,EAAE;YACV,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,GAAG;YACd,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,WAAW;YACxB,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YACrC,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;YACtC,SAAS,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;YACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE;SAChE;QACD,KAAK,EAAE;YACL,YAAY,EAAE,SAAS;SACxB;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,UAAU;SAClB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAW;IACjD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,SAAS;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,MAAM;CACZ,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/MessageStatusIndicator.styles.d.ts

@@ -1,3 +1,13 @@
+/** @private */
+export declare const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;
+/**
+ * ErrorIcon seems designed slightly smaller than other icons we try to match the size and then fix positioning here.
+ *
+ * @private
+ */
 export declare const MessageStatusIndicatorErrorIconStyle: string;
+/**
+ * @private
+ */
 export declare const MessageStatusIndicatorIconStyle: string;
 //# sourceMappingURL=MessageStatusIndicator.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oCAAoC,QAG/C,CAAC;AAEH,eAAO,MAAM,+BAA+B,QAE1C,CAAC"}
+{"version":3,"file":"MessageStatusIndicator.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAKA,eAAe;AACf,eAAO,MAAM,iCAAiC,IAAI,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,oCAAoC,QAG/C,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,+BAA+B,QAI1C,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/MessageStatusIndicator.styles.js

@@ -1,12 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-// ErrorIcon seems designed slightly smaller than other icons we try to match the size and then fix positioning here
+/** @private */
+export const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;
+/**
+ * ErrorIcon seems designed slightly smaller than other icons we try to match the size and then fix positioning here.
+ *
+ * @private
+ */
 export const MessageStatusIndicatorErrorIconStyle = mergeStyles({
     marginRight: '-0.06rem',
     fontSize: '1.06rem'
 });
+/**
+ * @private
+ */
 export const MessageStatusIndicatorIconStyle = mergeStyles({
-    fontSize: '1rem'
+    fontSize: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,
+    width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,
+    height: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`
 });
 //# sourceMappingURL=MessageStatusIndicator.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/MessageStatusIndicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,oHAAoH;AACpH,MAAM,CAAC,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC9D,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,+BAA+B,GAAG,WAAW,CAAC;IACzD,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC"}
+{"version":3,"file":"MessageStatusIndicator.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC9D,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,WAAW,CAAC;IACzD,QAAQ,EAAE,GAAG,iCAAiC,KAAK;IACnD,KAAK,EAAE,GAAG,iCAAiC,KAAK;IAChD,MAAM,EAAE,GAAG,iCAAiC,KAAK;CAClD,CAAC,CAAC"}

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

@@ -1,14 +1,68 @@
 import { CSSProperties } from 'react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
-export declare const messageAvatarContainerStyle: (backgroundColor: string) => string;
+import { IButtonStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export declare const messageThreadContainerStyle: string;
+/**
+ * @private
+ */
 export declare const noMessageStatusStyle: string;
+/**
+ * @private
+ */
 export declare const chatStyle: ComponentSlotStyle;
+/**
+ * @private
+ */
 export declare const newMessageButtonContainerStyle: string;
+/**
+ * @private
+ */
 export declare const chatMessageStyle: CSSProperties;
+/**
+ * @private
+ */
 export declare const chatMessageDateStyle: CSSProperties;
+/**
+ * @private
+ */
+export declare const defaultChatItemMessageContainer: (overlapAvatarAndMessage: boolean) => ComponentSlotStyle;
+/**
+ * @private
+ */
+export declare const defaultMyChatMessageContainer: ComponentSlotStyle;
+/**
+ * @private
+ */
+export declare const defaultChatMessageContainer: ComponentSlotStyle;
+/**
+ * @private
+ */
+export declare const gutterWithAvatar: ComponentSlotStyle;
+/**
+ * @private
+ */
+export declare const gutterWithHiddenAvatar: ComponentSlotStyle;
+/**
+ * @private
+ */
 export declare const messageStatusContainerStyle: (mine: boolean) => string;
+/**
+ * @private
+ */
 export declare const newMessageButtonStyle: string;
+/**
+ * @private
+ */
+export declare const buttonWithIconStyles: IButtonStyles;
+/**
+ * @private
+ */
 export declare const loadPreviousMessageButtonStyle: string;
+/**
+ * @private
+ */
 export declare const DownIconStyle: string;
 //# sourceMappingURL=MessageThread.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,eAAO,MAAM,2BAA2B,oBAAqB,MAAM,KAAG,MAYlE,CAAC;AAEL,eAAO,MAAM,2BAA2B,QAMtC,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,kBAKvB,CAAC;AAEF,eAAO,MAAM,8BAA8B,QAKzC,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,aAE9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,aAElC,CAAC;AAEF,eAAO,MAAM,2BAA2B,SAAU,OAAO,KAAG,MAGxD,CAAC;AAEL,eAAO,MAAM,qBAAqB,QAGhC,CAAC;AAEH,eAAO,MAAM,8BAA8B,QAKzC,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC"}
+{"version":3,"file":"MessageThread.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAe,MAAM,iBAAiB,CAAC;AAmB7D;;GAEG;AACH,eAAO,MAAM,2BAA2B,QAOtC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAI/B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,kBAKvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,QAKzC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAE9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAElC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,4BAA6B,OAAO,KAAG,kBAQlF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,kBAI3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,kBAIzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBAO9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,kBAMpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,SAAU,OAAO,KAAG,MAGxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,qBAAqB,QAGhC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAIlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,QAKzC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,QAExB,CAAC"}

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

@@ -1,59 +1,148 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-export const messageAvatarContainerStyle = (backgroundColor) => mergeStyles({
-    width: '2rem',
-    minWidth: '2rem',
-    height: '2rem',
-    backgroundColor: backgroundColor,
-    borderRadius: '50%',
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    fontFamily: 'Segoe UI Regular',
-    fontSize: '1rem' // 16px
-});
+import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';
+// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI
+// that can contain a message and a timestamp.
+const CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;
+// Chat messages should span just short of the width of the container.
+// When calculating the width of a message we also must take into account
+// the width of the avatar/gutter and the gap between the message and avatar/gutter.
+const AVATAR_WIDTH_REM = 2;
+const AVATAR_MESSAGE_GAP_REM = 0.5;
+const MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;
+// Avatars should display on top of chat messages when the chat thread is narrow
+const MESSAGE_AVATAR_OVERLAP_REM = 0.425;
+const CHAT_MESSAGE_ZINDEX = 1;
+const AVATAR_ZINDEX = 2;
+/**
+ * @private
+ */
 export const messageThreadContainerStyle = mergeStyles({
     height: '100%',
     width: '100%',
     maxHeight: '100%',
     overflow: 'auto',
-    position: 'relative'
+    position: 'relative',
+    alignSelf: 'center'
 });
+/**
+ * @private
+ */
 export const noMessageStatusStyle = mergeStyles({
-    width: '1.25rem'
+    // This should match the size of the message status indicator icon to ensure
+    // multiple messages sent by the user are aligned correctly.
+    width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`
 });
+/**
+ * @private
+ */
 export const chatStyle = {
     paddingBottom: '0.5rem',
     paddingTop: '0.8rem',
     border: 'none',
     overflow: 'auto'
 };
+/**
+ * @private
+ */
 export const newMessageButtonContainerStyle = mergeStyles({
     position: 'absolute',
     zIndex: 1,
     bottom: 0,
     right: '1.5rem'
 });
+/**
+ * @private
+ */
 export const chatMessageStyle = {
     overflowY: 'hidden'
 };
+/**
+ * @private
+ */
 export const chatMessageDateStyle = {
     fontWeight: 600
 };
+/**
+ * @private
+ */
+export const defaultChatItemMessageContainer = (overlapAvatarAndMessage) => {
+    const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;
+    return {
+        marginRight: '0rem',
+        marginLeft: `${messageAvatarGap}rem`,
+        width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,
+        zIndex: CHAT_MESSAGE_ZINDEX
+    };
+};
+/**
+ * @private
+ */
+export const defaultMyChatMessageContainer = {
+    maxWidth: '100%',
+    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
+    marginLeft: '0rem'
+};
+/**
+ * @private
+ */
+export const defaultChatMessageContainer = {
+    maxWidth: '100%',
+    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
+    marginRight: '0rem'
+};
+/**
+ * @private
+ */
+export const gutterWithAvatar = {
+    width: `${AVATAR_WIDTH_REM}`,
+    position: 'relative',
+    float: 'left',
+    display: 'block',
+    visibility: 'visible',
+    zIndex: AVATAR_ZINDEX
+};
+/**
+ * @private
+ */
+export const gutterWithHiddenAvatar = Object.assign(Object.assign({}, gutterWithAvatar), { visibility: 'hidden', 
+    // we use this hidden avatar just as a width placeholder
+    // the placeholder is needed for responsive bubble width
+    height: 0 });
+/**
+ * @private
+ */
 export const messageStatusContainerStyle = (mine) => mergeStyles({
-    marginLeft: mine ? '1rem' : '0rem'
+    marginLeft: mine ? '0.25rem' : '0rem'
 });
+/**
+ * @private
+ */
 export const newMessageButtonStyle = mergeStyles({
     float: 'right',
     width: 'fit-content'
 });
+/**
+ * @private
+ */
+export const buttonWithIconStyles = {
+    textContainer: {
+        display: 'contents'
+    }
+};
+/**
+ * @private
+ */
 export const loadPreviousMessageButtonStyle = mergeStyles({
     border: 'none',
     minHeight: '1.5rem',
     '&:hover': { background: 'none' },
     '&:active': { background: 'none' }
 });
+/**
+ * @private
+ */
 export const DownIconStyle = mergeStyles({
     marginRight: '0.5em'
 });

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,eAAuB,EAAU,EAAE,CAC7E,WAAW,CAAC;IACV,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,MAAM;IACd,eAAe,EAAE,eAAe;IAChC,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,kBAAkB;IAC9B,QAAQ,EAAE,MAAM,CAAC,OAAO;CACzB,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAuB;IAC3C,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,QAAQ;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAkB;IAC7C,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,IAAa,EAAU,EAAE,CACnE,WAAW,CAAC;IACV,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;CACnC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;IACjC,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;CACnC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,WAAW,EAAE,OAAO;CACrB,CAAC,CAAC"}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.d.ts

@@ -1,5 +1,30 @@
+/**
+ * @private
+ */
 export declare const participantItemContainerStyle: string;
-export declare const menuButtonContainerStyle: string;
-export declare const iconContainerStyle: string;
+/**
+ * @private
+ */
+export declare const menuButtonContainerStyle: {
+    width: string;
+};
+/**
+ * @private
+ */
+export declare const iconContainerStyle: {
+    display: string;
+    alignItems: string;
+    height: string;
+    paddingTop: string;
+};
+/**
+ * @private
+ */
 export declare const iconStyles: string;
+/**
+ * @private
+ */
+export declare const meContainerStyle: {
+    paddingRight: string;
+};
 //# sourceMappingURL=ParticipantItem.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B,QAQxC,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAKnC,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,UAAU,QAAmD,CAAC"}
+{"version":3,"file":"ParticipantItem.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,eAAO,MAAM,6BAA6B,QAQxC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB;;CAEpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.js

@@ -1,6 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export const participantItemContainerStyle = mergeStyles({
     paddingTop: '0.25rem',
     paddingBottom: '0.25rem',
@@ -10,17 +13,33 @@ export const participantItemContainerStyle = mergeStyles({
     cursor: 'pointer',
     alignItems: 'center'
 });
-export const menuButtonContainerStyle = mergeStyles({
-    root: {
-        '&:hover': { background: 'none' },
-        '&:active': { background: 'none' }
-    }
-});
-export const iconContainerStyle = mergeStyles({
+/**
+ * @private
+ */
+export const menuButtonContainerStyle = {
+    width: '1.5rem'
+};
+/**
+ * @private
+ */
+export const iconContainerStyle = {
     display: 'flex',
     alignItems: 'center',
     height: '100%',
-    overflow: 'hidden'
+    paddingTop: '0.2rem'
+};
+/**
+ * @private
+ */
+export const iconStyles = mergeStyles({
+    display: 'flex',
+    lineHeight: 0,
+    alignItems: 'center'
 });
-export const iconStyles = mergeStyles({ display: 'flex', margin: 'auto' });
+/**
+ * @private
+ */
+export const meContainerStyle = {
+    paddingRight: '0.5rem'
+};
 //# sourceMappingURL=ParticipantItem.styles.js.map