@azure/communication-react 1.10.0-alpha-202311050013 → 1.10.0-alpha-202311060013

package/dist/dist-cjs/communication-react/index.js

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.10.0-alpha-202311050013';
+var telemetryVersion = '1.10.0-alpha-202311060013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -286,6 +286,15 @@ const createSafeReplacer = () => {
 const _convertRemToPx = (rem) => {
     return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+/**
+ * @internal
+ * Converts units of pixels to units of rem
+ * @param px - units of px
+ * @returns units of rem
+ */
+const _convertPxToRem = (px) => {
+    return px / parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
 /**
  * @internal
  * Disable dismiss on resize to work around a couple Fluent UI bugs
@@ -14035,16 +14044,13 @@ const scrollableHorizontalGalleryStyles = {
 /**
  * @private
  */
-const scrollableHorizontalGalleryContainerStyles = (fullWidth) => {
-    return react.mergeStyles({
-        display: 'flex',
-        width: fullWidth ? '100%' : `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
-        minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        overflow: 'scroll',
-        '-ms-overflow-style': 'none',
-        'scrollbar-width': 'none',
-        '::-webkit-scrollbar': { display: 'none' }
-    });
+const scrollableHorizontalGalleryContainerStyles = {
+    display: 'flex',
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    overflow: 'scroll',
+    '-ms-overflow-style': 'none',
+    'scrollbar-width': 'none',
+    '::-webkit-scrollbar': { display: 'none' }
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14053,11 +14059,7 @@ const scrollableHorizontalGalleryContainerStyles = (fullWidth) => {
  * @private
  */
 const ScrollableHorizontalGallery = (props) => {
-    const { horizontalGalleryElements, onFetchTilesToRender, /* @conditional-compile-remove(gallery-layouts) */ layout } = props;
-    const useFullWidthTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
-        return layout === 'default' ? true : false;
-    };
+    const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;
     React.useEffect(() => {
         const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
         if (onFetchTilesToRender && indexesArray) {
@@ -14066,7 +14068,7 @@ const ScrollableHorizontalGallery = (props) => {
     }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = React.useRef();
     const { events: dragabbleEvents } = reactUseDraggableScroll.useDraggable(ref);
-    return (React__default["default"].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles(useFullWidthTrampoline()) }),
+    return (React__default["default"].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: react.mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
         React__default["default"].createElement(react.Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
 };
 
@@ -14081,7 +14083,7 @@ const OverflowGallery = (props) => {
     /* @conditional-compile-remove(vertical-gallery) */
     isShort = false, overflowGalleryElements, horizontalGalleryStyles, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom', 
-    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles, onChildrenPerPageChange } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles, onChildrenPerPageChange, parentWidth } = props;
     const containerStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryPosition === 'verticalRight') {
@@ -14107,6 +14109,16 @@ const OverflowGallery = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles
     ]);
+    const scrollableHorizontalGalleryContainerStyles = React.useMemo(() => {
+        if (isNarrow && parentWidth) {
+            return {
+                width: props.layout === 'default'
+                    ? `${_convertPxToRem(parentWidth) - 1}rem`
+                    : `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+            };
+        }
+        return undefined;
+    }, [isNarrow, parentWidth, props.layout]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'verticalRight') {
         return (React__default["default"].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)]));
@@ -14116,9 +14128,7 @@ const OverflowGallery = (props) => {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return (React__default["default"].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", 
-            /* @conditional-compile-remove(gallery-layouts) */
-            layout: props.layout }));
+        return (React__default["default"].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", containerStyles: scrollableHorizontalGalleryContainerStyles }));
     }
     return (React__default["default"].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)]));
 };
@@ -14192,7 +14202,7 @@ const DefaultLayout = (props) => {
                 childrenPerPage.current = n;
             }, 
             /* @conditional-compile-remove(gallery-layouts) */
-            layout: 'default' }));
+            layout: 'default', parentWidth: parentWidth }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -14200,7 +14210,8 @@ const DefaultLayout = (props) => {
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
     ]);
     return (React__default["default"].createElement(react.Stack
     /* @conditional-compile-remove(vertical-gallery) */
@@ -15061,7 +15072,7 @@ const FloatingLocalVideoLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            } }));
+            }, parentWidth: parentWidth }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -15070,7 +15081,8 @@ const FloatingLocalVideoLayout = (props) => {
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
     ]);
     return (React__default["default"].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
@@ -15189,7 +15201,7 @@ const SpeakerVideoLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            } }));
+            }, parentWidth: parentWidth }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -15198,7 +15210,8 @@ const SpeakerVideoLayout = (props) => {
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
     ]);
     return (React__default["default"].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
@@ -15308,7 +15321,7 @@ const LargeGalleryLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            } }));
+            }, parentWidth: parentWidth }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(gallery-layouts) */ isShort,
@@ -15316,7 +15329,8 @@ const LargeGalleryLayout = (props) => {
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
     ]);
     return (React__default["default"].createElement(react.Stack
     /* @conditional-compile-remove(vertical-gallery) */