@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AA4B7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACjD,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,kBAAkB,CAAC,gBAAgB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElH,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,EAAE,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,IACzF,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,wBAAwB,GAAG,EAAE,GAAG,CAAC,CAAC;AACxC;;GAEG;AACH,MAAM,iCAAiC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,MAAc,EAAW,EAAE;IACrE,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACrD,CAAC,CAAC;AA8BF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,aAAqB,EAAE,KAAa,EAAE,MAAc,EAAa,EAAE;IACpG,IAAI,aAAa,IAAI,CAAC,EAAE;QACtB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;KAC7D;IACD,iEAAiE;IACjE,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,EAAE;QAC7B,OAAO;YACL,aAAa,EAAE,YAAY;YAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7C,CAAC;KACH;IACD,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;IACnC,sGAAsG;IACtG,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,wBAAwB,GAAG,WAAW,CAAC,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;IAChG,6CAA6C;IAC7C,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IACrC,gGAAgG;IAChG,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAE9C,uCAAuC;IACvC,IAAI,aAAa,GAA8B,YAAY,CAAC;IAE5D,OAAO,IAAI,GAAG,aAAa,EAAE;QAC3B,yFAAyF;QACzF,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,WAAW,GAAG,iCAAiC,EAAE;YACtE,IAAI,IAAI,CAAC,CAAC;YACV,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;YAC1C,SAAS;SACV;QACD,IAAI,aAAa,GAAG,IAAI,GAAG,OAAO,EAAE;YAClC,8GAA8G;YAC9G,mHAAmH;YACnH,4GAA4G;YAC5G,qFAAqF;YACrF,aAAa;YACb,cAAc;YACd,cAAc;YACd,cAAc;YACd,cAAc;YAEd,MAAM,oBAAoB,GAAG,aAAa,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAChF,MAAM,sBAAsB,GAAG,aAAa,IAAI,OAAO,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;YACrF,IAAI,CAAC,oBAAoB,IAAI,CAAC,sBAAsB,EAAE;gBACpD,IAAI,IAAI,CAAC,CAAC;gBACV,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;gBAC1C,SAAS;aACV;iBAAM,IAAI,CAAC,oBAAoB,EAAE;gBAChC,MAAM;aACP;iBAAM,IAAI,CAAC,sBAAsB,EAAE;gBAClC,aAAa,GAAG,UAAU,CAAC;gBAC3B,MAAM;aACP;YAED,wFAAwF;YACxF,8BAA8B;YAC9B,2FAA2F;YAC3F,wDAAwD;YACxD,gEAAgE;YAChE,iEAAiE;YACjE,iEAAiE;YACjE,iEAAiE;YACjE,iEAAiE;YAEjE,iEAAiE;YACjE,MAAM,8BAA8B,GAAG,CAAC,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;YAC5E,+DAA+D;YAC/D,MAAM,4BAA4B,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,WAAW,CAAC;YAC1E,wIAAwI;YACxI,uGAAuG;YACvG,IAAI,4BAA4B,IAAI,iCAAiC,EAAE;gBACrE,gIAAgI;gBAChI,IAAI,YAAY,CAAC,4BAA4B,EAAE,8BAA8B,EAAE,wBAAwB,CAAC,EAAE;oBACxG,aAAa,GAAG,UAAU,CAAC;iBAC5B;aACF;SACF;QACD,MAAM;KACP;IAED,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,aAAqB,EAAE,SAAoB,EAAU,EAAE;IACtF,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,KAAK,YAAY,CAAC;IAC9D,2IAA2I;IAC3I,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;IACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,aAAa,CAAC,GAAG,gBAAgB,CAAC;IAC5F,iBAAiB;IACjB,+GAA+G;IAC/G,MAAM,KAAK,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;IAEpD,MAAM,UAAU,GAAG,YAAY;QAC7B,CAAC,CAAC;YACE,mBAAmB,EAAE,UAAU,KAAK,mBAAmB;YACvD,gBAAgB,EAAE,UAAU,MAAM,mBAAmB;YACrD,YAAY,EAAE,KAAK;SACpB;QACH,CAAC,CAAC;YACE,mBAAmB,EAAE,UAAU,MAAM,mBAAmB;YACxD,gBAAgB,EAAE,UAAU,KAAK,mBAAmB;YACpD,YAAY,EAAE,QAAQ;SACvB,CAAC;IAEN,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,UAAU,EAAE,eAAe,KAAK,GAAG,kBAAkB,EAAE;aACxD;SACF;QACH,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,OAAO,EAAE,eAAe,KAAK,GAAG,kBAAkB,EAAE;aACrD;SACF,CAAC;IAEN,2FAA2F;IAC3F,sFAAsF;IACtF,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC;YACE,CAAC,2BAA2B,WAAW,GAAG,CAAC,EAAE,YAAY;gBACvD,CAAC,CAAC;oBACE,UAAU,EAAE,eAAe,KAAK,GAAG,gBAAgB,EAAE;iBACtD;gBACH,CAAC,CAAC;oBACE,OAAO,EAAE,eAAe,KAAK,GAAG,gBAAgB,EAAE;iBACnD;SACN;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,WAAW,CAAC,UAAU,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC;AAC/D,CAAC,CAAC","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      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 ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)}>\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":["../../../../../../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      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"]}

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

@@ -27,6 +27,10 @@ export interface HorizontalGalleryProps {
      * @defaultValue 5
      */
     childrenPerPage?: number;
+    /**
+     * helper function to choose which tiles to give video to.
+     */
+    onFetchTilesToRender?: (indexes: number[]) => void;
 }
 /**
  * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.

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

@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { DefaultButton, Icon, Stack, mergeStyles } from '@fluentui/react';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTheme } from '../theming';
 import { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';
 import { useIdentifiers } from '../identifiers';
+import { bucketize } from './utils/overFlowGalleriesUtils';
 /**
  * {@link HorizontalGallery} default children per page
  */
@@ -15,42 +16,49 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  * @returns
  */
 export const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    var _a;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
     const ids = useIdentifiers();
     const [page, setPage] = useState(0);
     const numberOfChildren = React.Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = useMemo(() => {
-        return bucketize(React.Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React.createElement(React.Fragment, null);
-    }
+    const indexesArray = useMemo(() => {
+        return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
+    }, [numberOfChildren, childrenPerPage]);
+    useEffect(() => {
+        if (onFetchTilesToRender && indexesArray) {
+            onFetchTilesToRender(indexesArray[page]);
+        }
+    }, [indexesArray, onFetchTilesToRender, page]);
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const childrenOnCurrentPage = useMemo(() => {
+        if (indexesArray[0] !== undefined) {
+            return indexesArray[clippedPage].map((index) => {
+                return React.Children.toArray(children)[index];
+            });
+        }
+        return [];
+    }, [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 };
+    }, [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.horizontalGalleryLeftNavButton })),
-        React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        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.horizontalGalleryRightNavButton }))));
+        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));
+        })),
+        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));
 };
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
-    }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
-    }
-    return bucketArray;
-}
 //# 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, { useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\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\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 } = 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 paginatedChildren: React.ReactNode[][] = useMemo(() => {\n    return bucketize(React.Children.toArray(children), childrenPerPage);\n  }, [children, childrenPerPage]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = paginatedChildren[clippedPage];\n\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\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.horizontalGalleryLeftNavButton}\n        />\n      )}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle, { '> *': props.styles?.children })}>\n        {childrenOnCurrentPage}\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.horizontalGalleryRightNavButton}\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\nfunction bucketize<T>(arr: T[], bucketSize: number): T[][] {\n  const bucketArray: T[][] = [];\n\n  if (bucketSize <= 0) {\n    return bucketArray;\n  }\n\n  for (let i = 0; i < arr.length; i += bucketSize) {\n    bucketArray.push(arr.slice(i, i + bucketSize));\n  }\n\n  return bucketArray;\n}\n"]}
+{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAmCpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,yBAAyB,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEtG,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IAEnE,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE;YACxC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/C,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAErF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE;YACjC,OAAO,YAAY,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC7C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,IAAI,KAAK,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,KAAK,QAAQ,CAAC;IAE5C,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,yDAAyD;IACzD,IAAI,eAAe,IAAI,CAAC,EAAE;QACxB,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACpE,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,GAAG,EACrD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,EACjE,QAAQ,EAAE,qBAAqB,EAC/B,UAAU,EAAE,GAAG,CAAC,4BAA4B,GAC5C,CACH;QACD,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,IAC7D,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACtC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,gBAAc,GAAG,CAAC,0BAA0B,IACnF,KAAK,CACK,CACd,CAAC;QACJ,CAAC,CAAC,CACI;QACP,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,iBAAiB,EACrB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EACtD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,GAAG,CAAC,6BAA6B,GAC7C,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAClE,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,gBACZ,KAAK,CAAC,UAAU,IAE3B,KAAK,CAAC,IAAI,CACG,CACjB,CAAC;AACJ,CAAC,CAAC","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    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage].map((index) => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return [];\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"]}

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

@@ -1,6 +1,7 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
+import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -21,7 +22,7 @@ declare type InputBoxComponentProps = {
     'data-ui-id'?: string;
     id?: string;
     textValue: string;
-    onChange: (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => void;
+    onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
     textFieldRef?: React.RefObject<ITextField>;
     inputClassName?: string;
     placeholderText?: string;
@@ -33,6 +34,7 @@ declare type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -2,24 +2,31 @@
 // Licensed under the MIT license.
 import React, { useState, useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets, IconButton, TooltipHost } from '@fluentui/react';
-import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inlineButtonsContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle } from './styles/InputBoxComponent.style';
+import { isEnterKeyEventFromCompositionSession } from './utils';
+import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
+/* @conditional-compile-remove(mention) */
+import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
 export const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
-        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
+        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
+        suffix: {
+            backgroundColor: 'transparent',
+            padding: '0 0'
+        }
     });
-    const onTexFieldKeyDown = useCallback((ev) => {
-        // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
-        if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {
+    const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
+    const onTextFieldKeyDown = useCallback((ev) => {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
         }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
@@ -28,10 +35,51 @@ export const InputBoxComponent = (props) => {
         }
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
+    const onRenderChildren = () => {
+        return (React.createElement(Stack, { horizontal: true, className: mergedChildrenStyle }, children));
+    };
+    const renderTextField = () => {
+        const textFieldProps = {
+            autoFocus: props.autoFocus === 'sendBoxTextField',
+            multiline: true,
+            autoAdjustHeight: true,
+            multiple: false,
+            resizable: false,
+            componentRef: textFieldRef,
+            id,
+            inputClassName: mergedInputFieldStyle,
+            placeholder: placeholderText,
+            autoComplete: 'off',
+            styles: mergedTextFieldStyle,
+            disabled,
+            errorMessage,
+            onRenderSuffix: onRenderChildren
+        };
+        /* @conditional-compile-remove(mention) */
+        const textFieldWithMentionProps = {
+            textFieldProps: textFieldProps,
+            dataUiId: dataUiId,
+            textValue: textValue,
+            onChange: onChange,
+            onKeyDown: onKeyDown,
+            onEnterKeyDown: onEnterKeyDown,
+            textFieldRef: textFieldRef,
+            supportNewline: supportNewline,
+            mentionLookupOptions: props.mentionLookupOptions
+        };
+        /* @conditional-compile-remove(mention) */
+        if (props.mentionLookupOptions) {
+            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
+        }
+        return (React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
+                // Fix for setting the cursor to the correct position when multiline is true
+                // This approach should be reviewed during migration to FluentUI v9
+                e.currentTarget.value = '';
+                e.currentTarget.value = textValue;
+            } })));
+    };
     return (React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { className: mergedTextContainerStyle },
-            React.createElement(TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: textValue, onChange: onChange, autoComplete: "off", onKeyDown: onTexFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage }),
-            React.createElement(Stack, { horizontal: true, className: mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle) }, children))));
+        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
 };
 /**
  * @private
@@ -53,6 +101,8 @@ export const InputBoxButton = (props) => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
-            }, onRenderIcon: () => onRenderIcon(isHover) })));
+            }, 
+            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) })));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  inlineButtonsContainerStyle,\n  newLineButtonsContainerStyle,\n  inputBoxNewLineSpaceAffordance,\n  inputButtonTooltipStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string;\n  onChange: (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedTextFiledStyle = mergeStyles(\n    inputBoxStyle,\n    inputClassName,\n    props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance\n  );\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage\n  });\n\n  const onTexFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)\n      if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>\n        <TextField\n          autoFocus={props.autoFocus === 'sendBoxTextField'}\n          data-ui-id={dataUiId}\n          multiline\n          autoAdjustHeight\n          multiple={false}\n          resizable={false}\n          componentRef={textFieldRef}\n          id={id}\n          inputClassName={mergedTextFiledStyle}\n          placeholder={placeholderText}\n          value={textValue}\n          onChange={onChange}\n          autoComplete=\"off\"\n          onKeyDown={onTexFieldKeyDown}\n          styles={mergedTextFieldStyle}\n          disabled={disabled}\n          errorMessage={errorMessage}\n        />\n        <Stack\n          horizontal\n          className={mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle)}\n        >\n          {children}\n        </Stack>\n      </div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        onRenderIcon={() => onRenderIcon(isHover)}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\n\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  newLineButtonsContainerStyle,\n  inputBoxNewLineSpaceAffordance,\n  inputButtonTooltipStyle,\n  iconWrapperStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(\n    inputBoxStyle,\n    inputClassName,\n    props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance\n  );\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n\n  const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  const onRenderChildren = (): JSX.Element => {\n    return (\n      <Stack horizontal className={mergedChildrenStyle}>\n        {children}\n      </Stack>\n    );\n  };\n\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: onRenderChildren\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return (\n      <TextField\n        {...textFieldProps}\n        data-ui-id={dataUiId}\n        value={textValue}\n        onChange={onChange}\n        onKeyDown={onTextFieldKeyDown}\n        onFocus={(e) => {\n          // Fix for setting the cursor to the correct position when multiline is true\n          // This approach should be reviewed during migration to FluentUI v9\n          e.currentTarget.value = '';\n          e.currentTarget.value = textValue;\n        }}\n      />\n    );\n  };\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+/**
+ * Props for {@link _MentionPopover}.
+ *
+ * @internal
+ */
+export interface _MentionPopoverProps {
+    /**
+     * Array of mention suggestions used to populate the suggestion list
+     */
+    suggestions: Mention[];
+    /**
+     * Index of the currently focused suggestion, if any
+     */
+    activeSuggestionIndex?: number;
+    /**
+     * Optional string used as mention popover's title.
+     * @defaultValue `Suggestions`
+     */
+    title?: string;
+    /**
+     * Element to anchor the popover to.
+     */
+    target: React.RefObject<Element>;
+    /**
+     * When rendering the popover, where to position it relative to the target.
+     */
+    targetPositionOffset?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * Where to display the suggestions relative to the target.
+     * @defaultValue `above`
+     */
+    location?: 'above' | 'below';
+    /**
+     * Callback called when a mention suggestion is selected.
+     */
+    onSuggestionSelected: (suggestion: Mention) => void;
+    /**
+     * Callback to invoke when the popover is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionLookupOptions {
+    /**
+     * Optional string to set trigger keyword for mention a specific participant.
+     *
+     * @defaultValue `@`
+     */
+    trigger?: string;
+    /**
+     * Optional callback to fetch a list of mention suggestions base on the query.
+     */
+    onQueryUpdated: (query: string) => Promise<Mention[]>;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;
+}
+/**
+ * Options to display suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionDisplayOptions {
+    /**
+     * Optional callback for customizing the mention renderer in a message thread.
+     */
+    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions and display mentions in the mention scenario.
+ *
+ * @beta
+ */
+export declare type MentionOptions = {
+    lookupOptions?: MentionLookupOptions;
+    displayOptions?: MentionDisplayOptions;
+};
+/**
+ * Mention's state, as reflected in the UI.
+ *
+ * @beta
+ */
+export interface Mention {
+    /** ID of a mention */
+    id: string;
+    /** Display text of a mention */
+    displayText: string;
+    /** Optional React element to render an item icon of a mention suggestion */
+    icon?: JSX.Element;
+}
+/**
+ * Strings of {@link _MentionPopover} that can be overridden.
+ *
+ * @beta
+ */
+export interface MentionPopoverStrings {
+    /**
+     * Header text for MentionPopover
+     */
+    mentionPopoverHeader: string;
+}
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+export declare const _MentionPopover: (props: _MentionPopoverProps) => JSX.Element;
+//# sourceMappingURL=MentionPopover.d.ts.map