@azure/communication-react 1.22.0-alpha-202412180017 → 1.22.0

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

@@ -33,7 +33,7 @@ export const GridLayout = (props) => {
         return calculateGridProps(numberOfChildren, currentWidth, currentHeight);
     }, [numberOfChildren, currentWidth, currentHeight]);
     const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children));
+    return React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children);
 };
 /**
  * The cell aspect ratio we aim for in a grid
@@ -55,7 +55,11 @@ const isCloserThan = (a, b, target) => {
  */
 export const calculateGridProps = (numberOfItems, width, height) => {
     if (numberOfItems <= 0) {
-        return { fillDirection: 'horizontal', rows: 0, columns: 0 };
+        return {
+            fillDirection: 'horizontal',
+            rows: 0,
+            columns: 0
+        };
     }
     // If width or height are 0 then we return rows and column evenly
     if (width <= 0 || height <= 0) {
@@ -67,7 +71,7 @@ export const calculateGridProps = (numberOfItems, width, height) => {
     }
     const aspectRatio = width / height;
     // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO
-    let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) * numberOfItems)) || 1;
+    let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;
     // Make sure rows do not exceed numberOfItems
     rows = Math.min(rows, numberOfItems);
     // Given the rows, get the minimum columns needed to create enough cells for the number of items
@@ -76,7 +80,7 @@ export const calculateGridProps = (numberOfItems, width, height) => {
     let fillDirection = 'horizontal';
     while (rows < numberOfItems) {
         // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows
-        if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
+        if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
             rows += 1;
             columns = Math.ceil(numberOfItems / rows);
             continue;
@@ -115,9 +119,9 @@ export const calculateGridProps = (numberOfItems, width, height) => {
             // |           |          |             |       |       |       |
             // |___________|__________|             |_______|_______|_______|
             // Calculate the aspect ratio of big cells stretched horizontally
-            const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;
+            const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;
             // Calculate the aspect ratio of big cells stretched vertically
-            const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;
+            const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;
             // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells
             // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.
             if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
@@ -129,7 +133,11 @@ export const calculateGridProps = (numberOfItems, width, height) => {
         }
         break;
     }
-    return { fillDirection, rows, columns };
+    return {
+        fillDirection,
+        rows,
+        columns
+    };
 };
 /**
  * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
@@ -147,41 +155,33 @@ export const createGridStyles = (numberOfItems, gridProps) => {
     // Get grid units
     // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block
     const units = smallCellsPerBlock * bigCellsPerBlock;
-    const gridStyles = isHorizontal
-        ? {
-            gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,
-            gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,
-            gridAutoFlow: 'row'
+    const gridStyles = isHorizontal ? {
+        gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,
+        gridAutoFlow: 'row'
+    } : {
+        gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,
+        gridAutoFlow: 'column'
+    };
+    const smallCellStyle = isHorizontal ? {
+        '> *': {
+            gridColumn: `auto / span ${units / smallCellsPerBlock}`
         }
-        : {
-            gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,
-            gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,
-            gridAutoFlow: 'column'
-        };
-    const smallCellStyle = isHorizontal
-        ? {
-            '> *': {
-                gridColumn: `auto / span ${units / smallCellsPerBlock}`
-            }
+    } : {
+        '> *': {
+            gridRow: `auto / span ${units / smallCellsPerBlock}`
         }
-        : {
-            '> *': {
-                gridRow: `auto / span ${units / smallCellsPerBlock}`
-            }
-        };
+    };
     // If there are big cells, we are choosing to place the latest children into the big cells.
     // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below
-    const bigCellStyle = numBigCells
-        ? {
-            [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal
-                ? {
-                    gridColumn: `auto / span ${units / bigCellsPerBlock}`
-                }
-                : {
-                    gridRow: `auto / span ${units / bigCellsPerBlock}`
-                }
+    const bigCellStyle = numBigCells ? {
+        [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {
+            gridColumn: `auto / span ${units / bigCellsPerBlock}`
+        } : {
+            gridRow: `auto / span ${units / bigCellsPerBlock}`
         }
-        : {};
+    } : {};
     return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);
 };
 //# sourceMappingURL=GridLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n  children: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <GridLayout styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link GridLayout} */\n  children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n  const { children, styles } = props;\n  const numberOfChildren = React.Children.count(children);\n\n  const [currentWidth, setCurrentWidth] = useState(0);\n  const [currentHeight, setCurrentHeight] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      if (!entries[0]) {\n        return;\n      }\n      const { width, height } = entries[0].contentRect;\n      setCurrentWidth(width);\n      setCurrentHeight(height);\n    })\n  );\n\n  useEffect(() => {\n    if (containerRef.current) {\n      observer.current.observe(containerRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, containerRef]);\n\n  const gridProps = useMemo(() => {\n    return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n  }, [numberOfChildren, currentWidth, currentHeight]);\n\n  const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)}\n      data-ui-id=\"grid-layout\"\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\n\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n  return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n *  ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n *  ______________\n * |    |    |    |\n * |____|____|    |\n * |    |    |    |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n *  _______________\n * |       |       |\n * |_______|_______|\n * |       |       | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n  fillDirection: FillDirection;\n  rows: number;\n  columns: number;\n};\n\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * 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\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n  if (numberOfItems <= 0) {\n    return { fillDirection: 'horizontal', rows: 0, columns: 0 };\n  }\n  // If width or height are 0 then we return rows and column evenly\n  if (width <= 0 || height <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: Math.ceil(Math.sqrt(numberOfItems)),\n      columns: Math.ceil(Math.sqrt(numberOfItems))\n    };\n  }\n  const aspectRatio = width / height;\n  // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n  let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) * numberOfItems)) || 1;\n  // Make sure rows do not exceed numberOfItems\n  rows = Math.min(rows, numberOfItems);\n  // Given the rows, get the minimum columns needed to create enough cells for the number of items\n  let columns = Math.ceil(numberOfItems / rows);\n\n  // Default fill direction to horizontal\n  let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n\n  while (rows < numberOfItems) {\n    // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n    if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n      rows += 1;\n      columns = Math.ceil(numberOfItems / rows);\n      continue;\n    }\n    if (numberOfItems < rows * columns) {\n      // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n      // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n      // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n      // column of 2 cells which is less by more than 1 compared to the unstretched column.\n      //  _________\n      // |____|    |\n      // |____|____|\n      // |____|    |\n      // |____|____|\n\n      const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n      const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n      if (!canStretchVertically && !canStretchHorizontally) {\n        rows += 1;\n        columns = Math.ceil(numberOfItems / rows);\n        continue;\n      } else if (!canStretchVertically) {\n        break;\n      } else if (!canStretchHorizontally) {\n        fillDirection = 'vertical';\n        break;\n      }\n\n      // We need to figure out whether the big cells should stretch horizontally or vertically\n      // to fill in the empty spaces\n      // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n      //       horizontally            or           vertically\n      //  ______________________               _______________________\n      // |       |       |      |             |       |       |       |\n      // |_______|_______|______|             |_______|_______|       |\n      // |           |          |             |       |       |       |\n      // |___________|__________|             |_______|_______|_______|\n\n      // Calculate the aspect ratio of big cells stretched horizontally\n      const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;\n      // Calculate the aspect ratio of big cells stretched vertically\n      const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;\n      // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n      // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n      if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n        // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n        if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n          fillDirection = 'vertical';\n        }\n      }\n    }\n    break;\n  }\n\n  return { fillDirection, rows, columns };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n  const isHorizontal = gridProps.fillDirection === 'horizontal';\n  // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n  const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n  const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n  const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n  const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n  // Get grid units\n  // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n  const units = smallCellsPerBlock * bigCellsPerBlock;\n\n  const gridStyles = isHorizontal\n    ? {\n        gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n        gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n        gridAutoFlow: 'row'\n      }\n    : {\n        gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n        gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n        gridAutoFlow: 'column'\n      };\n\n  const smallCellStyle = isHorizontal\n    ? {\n        '> *': {\n          gridColumn: `auto / span ${units / smallCellsPerBlock}`\n        }\n      }\n    : {\n        '> *': {\n          gridRow: `auto / span ${units / smallCellsPerBlock}`\n        }\n      };\n\n  // If there are big cells, we are choosing to place the latest children into the big cells.\n  // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n  const bigCellStyle = numBigCells\n    ? {\n        [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal\n          ? {\n              gridColumn: `auto / span ${units / bigCellsPerBlock}`\n            }\n          : {\n              gridRow: `auto / span ${units / bigCellsPerBlock}`\n            }\n      }\n    : {};\n\n  return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};\n"]}
+{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n  children: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <GridLayout styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link GridLayout} */\n  children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n  const {\n    children,\n    styles\n  } = props;\n  const numberOfChildren = React.Children.count(children);\n  const [currentWidth, setCurrentWidth] = useState(0);\n  const [currentHeight, setCurrentHeight] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const observer = useRef(new ResizeObserver((entries): void => {\n    if (!entries[0]) {\n      return;\n    }\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    setCurrentWidth(width);\n    setCurrentHeight(height);\n  }));\n  useEffect(() => {\n    if (containerRef.current) {\n      observer.current.observe(containerRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, containerRef]);\n  const gridProps = useMemo(() => {\n    return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n  }, [numberOfChildren, currentWidth, currentHeight]);\n  const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n  return <div ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)} data-ui-id=\"grid-layout\">\n      {children}\n    </div>;\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n  return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n *  ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n *  ______________\n * |    |    |    |\n * |____|____|    |\n * |    |    |    |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n *  _______________\n * |       |       |\n * |_______|_______|\n * |       |       | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n  fillDirection: FillDirection;\n  rows: number;\n  columns: number;\n};\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * 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\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n  if (numberOfItems <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: 0,\n      columns: 0\n    };\n  }\n  // If width or height are 0 then we return rows and column evenly\n  if (width <= 0 || height <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: Math.ceil(Math.sqrt(numberOfItems)),\n      columns: Math.ceil(Math.sqrt(numberOfItems))\n    };\n  }\n  const aspectRatio = width / height;\n  // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n  let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;\n  // Make sure rows do not exceed numberOfItems\n  rows = Math.min(rows, numberOfItems);\n  // Given the rows, get the minimum columns needed to create enough cells for the number of items\n  let columns = Math.ceil(numberOfItems / rows);\n\n  // Default fill direction to horizontal\n  let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n  while (rows < numberOfItems) {\n    // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n    if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n      rows += 1;\n      columns = Math.ceil(numberOfItems / rows);\n      continue;\n    }\n    if (numberOfItems < rows * columns) {\n      // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n      // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n      // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n      // column of 2 cells which is less by more than 1 compared to the unstretched column.\n      //  _________\n      // |____|    |\n      // |____|____|\n      // |____|    |\n      // |____|____|\n\n      const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n      const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n      if (!canStretchVertically && !canStretchHorizontally) {\n        rows += 1;\n        columns = Math.ceil(numberOfItems / rows);\n        continue;\n      } else if (!canStretchVertically) {\n        break;\n      } else if (!canStretchHorizontally) {\n        fillDirection = 'vertical';\n        break;\n      }\n\n      // We need to figure out whether the big cells should stretch horizontally or vertically\n      // to fill in the empty spaces\n      // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n      //       horizontally            or           vertically\n      //  ______________________               _______________________\n      // |       |       |      |             |       |       |       |\n      // |_______|_______|______|             |_______|_______|       |\n      // |           |          |             |       |       |       |\n      // |___________|__________|             |_______|_______|_______|\n\n      // Calculate the aspect ratio of big cells stretched horizontally\n      const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;\n      // Calculate the aspect ratio of big cells stretched vertically\n      const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;\n      // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n      // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n      if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n        // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n        if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n          fillDirection = 'vertical';\n        }\n      }\n    }\n    break;\n  }\n  return {\n    fillDirection,\n    rows,\n    columns\n  };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n  const isHorizontal = gridProps.fillDirection === 'horizontal';\n  // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n  const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n  const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n  const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n  const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n  // Get grid units\n  // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n  const units = smallCellsPerBlock * bigCellsPerBlock;\n  const gridStyles = isHorizontal ? {\n    gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n    gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n    gridAutoFlow: 'row'\n  } : {\n    gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n    gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n    gridAutoFlow: 'column'\n  };\n  const smallCellStyle = isHorizontal ? {\n    '> *': {\n      gridColumn: `auto / span ${units / smallCellsPerBlock}`\n    }\n  } : {\n    '> *': {\n      gridRow: `auto / span ${units / smallCellsPerBlock}`\n    }\n  };\n\n  // If there are big cells, we are choosing to place the latest children into the big cells.\n  // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n  const bigCellStyle = numBigCells ? {\n    [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {\n      gridColumn: `auto / span ${units / bigCellsPerBlock}`\n    } : {\n      gridRow: `auto / span ${units / bigCellsPerBlock}`\n    }\n  } : {};\n  return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};"]}

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

@@ -13,13 +13,13 @@ export const _HighContrastAwareIcon = (props) => {
     const theme = useTheme();
     // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors
     // the media query is for when in specific window accessibility mode, change the svg colors
-    return (React.createElement(Icon, { iconName: iconName, className: mergeStyles({
+    return React.createElement(Icon, { iconName: iconName, className: mergeStyles({
             svg: {
                 fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,
                 '@media (forced-colors: active) and (prefers-color-scheme: dark)': {
                     fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary
                 }
             }
-        }) }));
+        }) });
 };
 //# sourceMappingURL=HighContrastAwareIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HighContrastAwareIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HighContrastAwareIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,2IAA2I;IAC3I,2FAA2F;IAC3F,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC;YACrB,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;gBAEhF,iEAAiE,EAAE;oBACjE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;iBACjF;aACF;SACF,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../theming';\n\n/**\n * @internal\n */\nexport interface _HighContrastAwareIconProps {\n  /** Icon name */\n  iconName: string;\n  /** Whether button is disabled */\n  disabled?: boolean | undefined;\n}\n\n/**\n * This is a helper component to define and unify icon colors\n *\n * @internal\n */\nexport const _HighContrastAwareIcon = (props: _HighContrastAwareIconProps): JSX.Element => {\n  const { iconName, disabled } = props;\n  const theme = useTheme();\n  // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors\n  // the media query is for when in specific window accessibility mode, change the svg colors\n  return (\n    <Icon\n      iconName={iconName}\n      className={mergeStyles({\n        svg: {\n          fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,\n\n          '@media (forced-colors: active) and (prefers-color-scheme: dark)': {\n            fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary\n          }\n        }\n      })}\n    />\n  );\n};\n"]}
+{"version":3,"file":"HighContrastAwareIcon.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HighContrastAwareIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EACJ,QAAQ,EACR,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,2IAA2I;IAC3I,2FAA2F;IAC3F,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;YACtD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;gBAChF,iEAAiE,EAAE;oBACjE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;iBACjF;aACF;SACF,CAAC,GAAI,CAAC;AACT,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../theming';\n\n/**\n * @internal\n */\nexport interface _HighContrastAwareIconProps {\n  /** Icon name */\n  iconName: string;\n  /** Whether button is disabled */\n  disabled?: boolean | undefined;\n}\n\n/**\n * This is a helper component to define and unify icon colors\n *\n * @internal\n */\nexport const _HighContrastAwareIcon = (props: _HighContrastAwareIconProps): JSX.Element => {\n  const {\n    iconName,\n    disabled\n  } = props;\n  const theme = useTheme();\n  // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors\n  // the media query is for when in specific window accessibility mode, change the svg colors\n  return <Icon iconName={iconName} className={mergeStyles({\n    svg: {\n      fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,\n      '@media (forced-colors: active) and (prefers-color-scheme: dark)': {\n        fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary\n      }\n    }\n  })} />;\n};"]}

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

@@ -20,6 +20,6 @@ export const HoldButton = (props) => {
     const onRenderResumeIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
     };
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon })));
+    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon }));
 };
 //# sourceMappingURL=HoldButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HoldButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HoldButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAwCjE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAgB,EAAE;QAC3C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,YAAY,GAAG,CAAC;IACpF,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,OAAO,EACtC,cAAc,EAAE,kBAAkB,EAClC,eAAe,EAAE,gBAAgB,IACjC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n *@public\n */\nexport interface HoldButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Holds the call or resumes it based on call state.\n   */\n  onToggleHold: () => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: HoldButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @public\n */\nexport interface HoldButtonStrings {\n  /**\n   * Label for when action is to resume call.\n   */\n  onLabel?: string;\n  /**\n   * Label for when action is to hold call.\n   */\n  offLabel?: string;\n  /**\n   * Content for when button is checked\n   */\n  tooltipOnContent?: string;\n  /**\n   * Content for when button is unchecked\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * a button to hold or resume a ongoing call.\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the hold button.\n * @returns\n * @public\n */\nexport const HoldButton = (props: HoldButtonProps): JSX.Element => {\n  const { onToggleHold, strings } = props;\n\n  const onRenderHoldIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"HoldCallButton\" />;\n  };\n  const onRenderResumeIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ResumeCall\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      onClick={onToggleHold ?? props.onClick}\n      onRenderOnIcon={onRenderResumeIcon}\n      onRenderOffIcon={onRenderHoldIcon}\n    />\n  );\n};\n"]}
+{"version":3,"file":"HoldButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HoldButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAwCjE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EACJ,YAAY,EACZ,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAgB,EAAE;QAC3C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,YAAY,GAAG,CAAC;IACpF,CAAC,CAAC;IACF,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,eAAe,EAAE,gBAAgB,IAAI,CAAC;AAC1K,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n *@public\n */\nexport interface HoldButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Holds the call or resumes it based on call state.\n   */\n  onToggleHold: () => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: HoldButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @public\n */\nexport interface HoldButtonStrings {\n  /**\n   * Label for when action is to resume call.\n   */\n  onLabel?: string;\n  /**\n   * Label for when action is to hold call.\n   */\n  offLabel?: string;\n  /**\n   * Content for when button is checked\n   */\n  tooltipOnContent?: string;\n  /**\n   * Content for when button is unchecked\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * a button to hold or resume a ongoing call.\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the hold button.\n * @returns\n * @public\n */\nexport const HoldButton = (props: HoldButtonProps): JSX.Element => {\n  const {\n    onToggleHold,\n    strings\n  } = props;\n  const onRenderHoldIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"HoldCallButton\" />;\n  };\n  const onRenderResumeIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ResumeCall\" />;\n  };\n  return <ControlBarButton {...props} strings={strings} onClick={onToggleHold ?? props.onClick} onRenderOnIcon={onRenderResumeIcon} onRenderOffIcon={onRenderHoldIcon} />;\n};"]}

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

@@ -38,27 +38,29 @@ export const HorizontalGallery = (props) => {
         if (!indexes) {
             return [];
         }
-        return indexes.map((index) => React.Children.toArray(children)[index]);
+        return indexes.map(index => React.Children.toArray(children)[index]);
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
     const childrenStyles = useMemo(() => {
-        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+        return {
+            root: styles === null || styles === void 0 ? void 0 : styles.children
+        };
     }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     // If children per page is 0 or less return empty element
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
+    return React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton }),
         React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle) }, childrenOnCurrentPage.map((child, i) => {
-            return (React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
+            return React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child);
         })),
-        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
+        showButtons && React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }));
 };
 const HorizontalGalleryNavigationButton = (props) => {
     const theme = useTheme();
-    return (React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+    return React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon);
 };
 //# sourceMappingURL=HorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link HorizontalGallery} */\n  children?: IStyle;\n  /** Styles for navigation button to go to previous page */\n  previousButton?: IStyle;\n  /** Styles for navigation button to go to next page */\n  nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n  children: React.ReactNode;\n  /**\n   * Styles for HorizontalGallery\n   */\n  styles?: HorizontalGalleryStyles;\n  /**\n   * Children shown per page\n   * @defaultValue 5\n   */\n  childrenPerPage?: number;\n  /**\n   * helper function to choose which tiles to give video to.\n   */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n  const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n  const ids = useIdentifiers();\n\n  const [page, setPage] = useState(0);\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n  const childrenOnCurrentPage = useMemo(() => {\n    const indexes = indexesArray?.[clippedPage];\n    if (!indexes) {\n      return [];\n    }\n    return indexes.map((index) => React.Children.toArray(children)[index]);\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n      {showButtons && (\n        <HorizontalGalleryNavigationButton\n          key=\"previous-nav-button\"\n          icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n          styles={styles?.previousButton}\n          onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n          disabled={disablePreviousButton}\n          identifier={ids.overflowGalleryLeftNavButton}\n        />\n      )}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n        {childrenOnCurrentPage.map((child, i) => {\n          return (\n            <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <HorizontalGalleryNavigationButton\n          key=\"next-nav-button\"\n          icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n          styles={styles?.nextButton}\n          onClick={() => setPage(Math.min(lastPage, page + 1))}\n          disabled={disableNextButton}\n          identifier={ids.overflowGalleryRightNavButton}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n  icon: JSX.Element;\n  styles: IStyle;\n  onClick?: () => void;\n  disabled?: boolean;\n  identifier?: string;\n}): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <DefaultButton\n      className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n      onClick={props.onClick}\n      disabled={props.disabled}\n      data-ui-id={props.identifier}\n    >\n      {props.icon}\n    </DefaultButton>\n  );\n};\n"]}
+{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link HorizontalGallery} */\n  children?: IStyle;\n  /** Styles for navigation button to go to previous page */\n  previousButton?: IStyle;\n  /** Styles for navigation button to go to next page */\n  nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n  children: React.ReactNode;\n  /**\n   * Styles for HorizontalGallery\n   */\n  styles?: HorizontalGalleryStyles;\n  /**\n   * Children shown per page\n   * @defaultValue 5\n   */\n  childrenPerPage?: number;\n  /**\n   * helper function to choose which tiles to give video to.\n   */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n  const {\n    children,\n    childrenPerPage = DEFAULT_CHILDREN_PER_PAGE,\n    styles,\n    onFetchTilesToRender\n  } = props;\n  const ids = useIdentifiers();\n  const [page, setPage] = useState(0);\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    const indexes = indexesArray?.[clippedPage];\n    if (!indexes) {\n      return [];\n    }\n    return indexes.map(index => React.Children.toArray(children)[index]);\n  }, [indexesArray, clippedPage, children]);\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\n  const childrenStyles = useMemo(() => {\n    return {\n      root: styles?.children\n    };\n  }, [styles?.children]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n  return <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n      {showButtons && <HorizontalGalleryNavigationButton key=\"previous-nav-button\" icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />} styles={styles?.previousButton} onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))} disabled={disablePreviousButton} identifier={ids.overflowGalleryLeftNavButton} />}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n        {childrenOnCurrentPage.map((child, i) => {\n        return <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n              {child}\n            </Stack.Item>;\n      })}\n      </Stack>\n      {showButtons && <HorizontalGalleryNavigationButton key=\"next-nav-button\" icon={<Icon iconName=\"HorizontalGalleryRightButton\" />} styles={styles?.nextButton} onClick={() => setPage(Math.min(lastPage, page + 1))} disabled={disableNextButton} identifier={ids.overflowGalleryRightNavButton} />}\n    </Stack>;\n};\nconst HorizontalGalleryNavigationButton = (props: {\n  icon: JSX.Element;\n  styles: IStyle;\n  onClick?: () => void;\n  disabled?: boolean;\n  identifier?: string;\n}): JSX.Element => {\n  const theme = useTheme();\n  return <DefaultButton className={mergeStyles(leftRightButtonStyles(theme), props.styles)} onClick={props.onClick} disabled={props.disabled} data-ui-id={props.identifier}>\n      {props.icon}\n    </DefaultButton>;\n};"]}

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

@@ -48,10 +48,6 @@ export interface ImageOverlayStrings {
      * Dismiss button aria label for ImageOverlay
      */
     dismissButtonAriaLabel: string;
-    /**
-     * Announcer message for when ImageOverlay becomes active
-     */
-    overlayVisibleMessage: string;
 }
 /**
  * Component to render a fullscreen modal for a selected image.

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

@@ -5,10 +5,7 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-overlay-theme) */
-import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
-import { Announcer } from './Announcer';
 /**
  * Component to render a fullscreen modal for a selected image.
  *
@@ -19,32 +16,34 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const overlayTheme = useMemo(() => {
-        /* @conditional-compile-remove(image-overlay-theme) */
-        return imageOverlayTheme;
         return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);
     const renderHeaderBar = () => {
-        return (React.createElement(Stack, { className: mergeStyles(headerStyle), role: "heading", "aria-label": title || 'Image', "aria-level": 2 },
+        return React.createElement(Stack, { className: mergeStyles(headerStyle), role: "heading", "aria-label": title || 'Image', "aria-level": 2 },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
                 React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)) }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' })),
-                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(overlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' })),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss, "aria-label": localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
+                onDownloadButtonClicked && React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' }),
+                onDownloadButtonClicked && React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(overlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' }),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss, "aria-label": localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' })));
     };
     const renderBodyWithLightDismiss = () => {
-        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "data-ui-id": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
+        return React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "data-ui-id": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
                 setIsImageLoaded(false);
-            }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
+            }, onClick: event => event.stopPropagation(), onDoubleClick: event => {
                 event.persist();
-            } }))));
+            } }));
     };
-    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(overlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        React.createElement(Announcer, { ariaLive: 'polite', announcementString: localeStrings.overlayVisibleMessage }),
+    return React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: {
+            styles: Object.assign({}, overlayStyles(overlayTheme))
+        }, styles: {
+            main: focusTrapZoneStyle,
+            scrollableContent: scrollableContentStyle
+        }, isDarkOverlay: true },
         React.createElement(FluentThemeProvider, { fluentTheme: overlayTheme, rootStyle: themeProviderRootStyle },
             renderHeaderBar(),
-            renderBodyWithLightDismiss())));
+            renderBodyWithLightDismiss()));
 };
 //# sourceMappingURL=ImageOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) */\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\nimport { Announcer } from './Announcer';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n  /**\n   * Announcer message for when ImageOverlay becomes active\n   */\n  overlayVisibleMessage: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const overlayTheme = useMemo((): PartialTheme => {\n    /* @conditional-compile-remove(image-overlay-theme) */\n    return imageOverlayTheme;\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              aria-label={localeStrings.downloadButtonLabel}\n              disabled={imageSrc === ''}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n              disabled={imageSrc === ''}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(overlayTheme))}\n            onClick={onDismiss}\n            aria-label={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            data-ui-id={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(overlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <Announcer ariaLive={'polite'} announcementString={localeStrings.overlayVisibleMessage} />\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\n};"]}

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

@@ -14,35 +14,48 @@ export const IncomingCallNotification = (props) => {
     const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings, acceptOptions } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.IncomingCallNotification;
-    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName
-        ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })
-        : callerName;
-    const acceptManuOptions = acceptOptions.showAcceptWithVideo
-        ? {
-            items: [
-                {
-                    key: 'audio',
-                    text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
-                    onClick: () => onAcceptWithAudio()
-                },
-                {
-                    key: 'video',
-                    text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
-                    onClick: () => onAcceptWithVideo()
-                }
-            ]
-        }
-        : undefined;
-    return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
-        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: { childrenGap: personaSize ? '0.5rem' : '0rem' } },
+    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {
+        callerName: callerName
+    }) : callerName;
+    const acceptManuOptions = acceptOptions.showAcceptWithVideo ? {
+        items: [{
+                key: 'audio',
+                text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
+                onClick: () => onAcceptWithAudio()
+            }, {
+                key: 'video',
+                text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
+                onClick: () => onAcceptWithVideo()
+            }]
+    } : undefined;
+    return React.createElement(Stack, { tokens: {
+            childrenGap: '0.5rem'
+        }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
+        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: {
+                childrenGap: personaSize ? '0.5rem' : '0rem'
+            } },
             React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
                 React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
-            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
+            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: {
+                    alignItems: 'flex-start',
+                    fontFamily: 'Segoe UI'
+                } },
                 React.createElement(Text, { tabIndex: 0, "aria-live": 'assertive', "aria-label": alertText !== null && alertText !== void 0 ? alertText : formattedMessageString }, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c : formattedMessageString)),
-            React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: { iconName: 'cancel' }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
-        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: { childrenGap: '0.5rem' } },
-            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
-            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel))));
+            React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: {
+                    iconName: 'cancel'
+                }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
+        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: {
+                childrenGap: '0.5rem'
+            } },
+            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: {
+                    iconName: 'IncomingCallNotificationAcceptIcon',
+                    style: {
+                        lineHeight: '1rem'
+                    }
+                }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
+            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: {
+                    iconName: 'IncomingCallNotificationRejectIcon'
+                }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel)));
 };
 const incomingCallToastStyle = (theme) => {
     return {