@azure/communication-react 1.14.1-alpha-202403270012 → 1.14.1-alpha-202403280012

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';\nimport type { IContextualMenuItem, Theme } from '@fluentui/react';\nimport {\n  insertTableMenuCellButtonSelectedStyles,\n  insertTableMenuCellButtonStyles,\n  insertTableMenuFocusZone,\n  insertTableMenuTitleStyles\n} from '../../../styles/RichTextEditor.styles';\nimport { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\nconst RowColumnInitialValue = 0;\n\ninterface RichTextInsertTablePaneProps {\n  theme: Theme;\n  item: IContextualMenuItem;\n  onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;\n  maxRowsNumber: number;\n  maxColumnsNumber: number;\n}\n\n/**\n * @private\n * Component for the insert table pane\n */\nexport const RichTextInsertTablePane = (props: RichTextInsertTablePaneProps): JSX.Element => {\n  const { item, onClick, theme, maxColumnsNumber, maxRowsNumber } = props;\n  const [column, setColumn] = React.useState(RowColumnInitialValue);\n  const [row, setRow] = React.useState(RowColumnInitialValue);\n\n  const updateSize = React.useCallback(\n    (target?: HTMLElement) => {\n      if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {\n        const column = parseInt(target.dataset.column);\n        const row = parseInt(target.dataset.row);\n\n        if (\n          column >= RowColumnInitialValue &&\n          column < maxColumnsNumber &&\n          row >= RowColumnInitialValue &&\n          row < maxRowsNumber\n        ) {\n          setColumn(column);\n          setRow(row);\n        }\n      }\n    },\n    [maxColumnsNumber, maxRowsNumber]\n  );\n\n  const onMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      updateSize(e.target as HTMLElement);\n    },\n    [updateSize]\n  );\n\n  const onClickButton = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick(e, {\n        ...item,\n        key: createKey(formatRowColumnText(row), formatRowColumnText(column))\n      });\n    },\n    [row, column, onClick, item]\n  );\n\n  const items = React.useMemo(() => {\n    const items: JSX.Element[] = [];\n\n    for (let i = 0; i < maxRowsNumber; i++) {\n      for (let j = 0; j < maxColumnsNumber; j++) {\n        const key = `cell_${i}_${j}`;\n        const isSelected = j <= column && i <= row;\n        items.push(\n          <button\n            className={mergeStyles(\n              insertTableMenuCellButtonStyles(theme),\n              isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined\n            )}\n            onClick={onClickButton}\n            key={key}\n            id={key}\n            data-column={j}\n            data-row={i}\n            data-is-focusable={true}\n            onMouseEnter={onMouseEnter}\n            aria-label={formatText(item.text ?? '', i, j)}\n          />\n        );\n      }\n    }\n\n    return items;\n  }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);\n\n  const text = useMemo(() => {\n    return formatText(item.text ?? '', formatRowColumnText(row), formatRowColumnText(column));\n  }, [column, item.text, row]);\n\n  return (\n    <div>\n      <div className={insertTableMenuTitleStyles}>{text}</div>\n      <FocusZone\n        defaultTabbableElement={`cell_${RowColumnInitialValue}_${RowColumnInitialValue}`}\n        direction={FocusZoneDirection.bidirectional}\n        onActiveElementChanged={updateSize}\n        className={insertTableMenuFocusZone(theme)}\n      >\n        {items}\n      </FocusZone>\n    </div>\n  );\n};\n\nconst formatText = (text: string, row: number, column: number): string => {\n  return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);\n};\n\nconst formatRowColumnText = (value: number): number => {\n  return value + 1;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { EditorPlugin } from 'roosterjs-editor-types-compatible';
+import { LocalizedStrings } from 'roosterjs-react';
+/**
+ * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
+ * @returns A new ContextMenuProvider
+ */
+export declare const createTableEditMenuProvider: (strings?: LocalizedStrings<string>) => EditorPlugin;
+//# sourceMappingURL=RichTextTableContextMenu.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.js

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { editTable } from 'roosterjs-editor-api';
+import { CompatibleTableOperation } from 'roosterjs-editor-types-compatible';
+import { createContextMenuProvider } from 'roosterjs-react';
+import { tableContextMenuStrings } from '../../../utils/RichTextEditorStringsUtils';
+const onClick = (key, editor) => {
+    editor.focus();
+    const operation = TableEditOperationMap[key];
+    if (typeof operation === 'number') {
+        editTable(editor, operation);
+    }
+};
+const TableEditOperationMap = {
+    menuNameTableInsertAbove: CompatibleTableOperation.InsertAbove,
+    menuNameTableInsertBelow: CompatibleTableOperation.InsertBelow,
+    menuNameTableInsertLeft: CompatibleTableOperation.InsertLeft,
+    menuNameTableInsertRight: CompatibleTableOperation.InsertRight,
+    menuNameTableDeleteTable: CompatibleTableOperation.DeleteTable,
+    menuNameTableDeleteColumn: CompatibleTableOperation.DeleteColumn,
+    menuNameTableDeleteRow: CompatibleTableOperation.DeleteRow
+};
+const tableEditInsertMenuItem = {
+    key: 'menuNameTableInsert',
+    unlocalizedText: 'Insert123',
+    subItems: {
+        menuNameTableInsertAbove: 'Insert above121312 ',
+        menuNameTableInsertBelow: 'Insert below',
+        menuNameTableInsertLeft: 'Insert left123 ',
+        menuNameTableInsertRight: 'Insert right'
+    },
+    onClick
+};
+const tableEditDeleteMenuItem = {
+    key: 'menuNameTableDelete',
+    unlocalizedText: 'Delete',
+    subItems: {
+        menuNameTableDeleteColumn: 'Delete column',
+        menuNameTableDeleteRow: 'Delete row',
+        menuNameTableDeleteTable: 'Delete table'
+    },
+    onClick
+};
+const tableActions = [tableEditInsertMenuItem, tableEditDeleteMenuItem];
+/**
+ * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
+ * @returns A new ContextMenuProvider
+ */
+export const createTableEditMenuProvider = (strings) => {
+    return createContextMenuProvider('tableEdit', tableActions, tableContextMenuStrings(strings !== null && strings !== void 0 ? strings : {}), (editor, node) => !!getEditingTable(editor, node));
+};
+const getEditingTable = (editor, node) => {
+    const td = editor.getElementAtCursor('TD,TH', node);
+    const table = td && editor.getElementAtCursor('table', td);
+    return (table === null || table === void 0 ? void 0 : table.isContentEditable) ? { table, td } : null;
+};
+//# sourceMappingURL=RichTextTableContextMenu.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextTableContextMenu.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextTableContextMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAyB,MAAM,mCAAmC,CAAC;AACpG,OAAO,EAAmB,yBAAyB,EAAoB,MAAM,iBAAiB,CAAC;AAC/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,MAAe,EAAQ,EAAE;IACrD,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,SAAS,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAC7C,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAsD;IAC/E,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,uBAAuB,EAAE,wBAAwB,CAAC,UAAU;IAC5D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,wBAAwB,EAAE,wBAAwB,CAAC,WAAW;IAC9D,yBAAyB,EAAE,wBAAwB,CAAC,YAAY;IAChE,sBAAsB,EAAE,wBAAwB,CAAC,SAAS;CAC3D,CAAC;AAEF,MAAM,uBAAuB,GAA4B;IACvD,GAAG,EAAE,qBAAqB;IAC1B,eAAe,EAAE,WAAW;IAC5B,QAAQ,EAAE;QACR,wBAAwB,EAAE,qBAAqB;QAC/C,wBAAwB,EAAE,cAAc;QACxC,uBAAuB,EAAE,iBAAiB;QAC1C,wBAAwB,EAAE,cAAc;KACzC;IACD,OAAO;CACR,CAAC;AAEF,MAAM,uBAAuB,GAA4B;IACvD,GAAG,EAAE,qBAAqB;IAC1B,eAAe,EAAE,QAAQ;IACzB,QAAQ,EAAE;QACR,yBAAyB,EAAE,eAAe;QAC1C,sBAAsB,EAAE,YAAY;QACpC,wBAAwB,EAAE,cAAc;KACzC;IACD,OAAO;CACR,CAAC;AAEF,MAAM,YAAY,GAA8B,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAkC,EAAgB,EAAE;IAC9F,OAAO,yBAAyB,CAC9B,WAAW,EACX,YAAY,EACZ,uBAAuB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EACtC,CAAC,MAAe,EAAE,IAAU,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAgE,EAAE;IACpH,MAAM,EAAE,GAAG,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAyB,CAAC;IAC5E,MAAM,KAAK,GAAG,EAAE,IAAK,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAsB,CAAC;IAEjF,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,EAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AACzD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { editTable } from 'roosterjs-editor-api';\nimport { CompatibleTableOperation, EditorPlugin, IEditor } from 'roosterjs-editor-types-compatible';\nimport { ContextMenuItem, createContextMenuProvider, LocalizedStrings } from 'roosterjs-react';\nimport { tableContextMenuStrings } from '../../../utils/RichTextEditorStringsUtils';\n\nconst onClick = (key: string, editor: IEditor): void => {\n  editor.focus();\n  const operation = TableEditOperationMap[key];\n  if (typeof operation === 'number') {\n    editTable(editor, operation);\n  }\n};\n\nconst TableEditOperationMap: Partial<Record<string, CompatibleTableOperation>> = {\n  menuNameTableInsertAbove: CompatibleTableOperation.InsertAbove,\n  menuNameTableInsertBelow: CompatibleTableOperation.InsertBelow,\n  menuNameTableInsertLeft: CompatibleTableOperation.InsertLeft,\n  menuNameTableInsertRight: CompatibleTableOperation.InsertRight,\n  menuNameTableDeleteTable: CompatibleTableOperation.DeleteTable,\n  menuNameTableDeleteColumn: CompatibleTableOperation.DeleteColumn,\n  menuNameTableDeleteRow: CompatibleTableOperation.DeleteRow\n};\n\nconst tableEditInsertMenuItem: ContextMenuItem<string> = {\n  key: 'menuNameTableInsert',\n  unlocalizedText: 'Insert123',\n  subItems: {\n    menuNameTableInsertAbove: 'Insert above121312 ',\n    menuNameTableInsertBelow: 'Insert below',\n    menuNameTableInsertLeft: 'Insert left123 ',\n    menuNameTableInsertRight: 'Insert right'\n  },\n  onClick\n};\n\nconst tableEditDeleteMenuItem: ContextMenuItem<string> = {\n  key: 'menuNameTableDelete',\n  unlocalizedText: 'Delete',\n  subItems: {\n    menuNameTableDeleteColumn: 'Delete column',\n    menuNameTableDeleteRow: 'Delete row',\n    menuNameTableDeleteTable: 'Delete table'\n  },\n  onClick\n};\n\nconst tableActions: ContextMenuItem<string>[] = [tableEditInsertMenuItem, tableEditDeleteMenuItem];\n\n/**\n * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu\n * @returns A new ContextMenuProvider\n */\nexport const createTableEditMenuProvider = (strings?: LocalizedStrings<string>): EditorPlugin => {\n  return createContextMenuProvider(\n    'tableEdit',\n    tableActions,\n    tableContextMenuStrings(strings ?? {}),\n    (editor: IEditor, node: Node) => !!getEditingTable(editor, node)\n  );\n};\n\nconst getEditingTable = (editor: IEditor, node: Node): { table: HTMLTableElement; td: HTMLTableCellElement } | null => {\n  const td = editor.getElementAtCursor('TD,TH', node) as HTMLTableCellElement;\n  const table = td && (editor.getElementAtCursor('table', td) as HTMLTableElement);\n\n  return table?.isContentEditable ? { table, td } : null;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.d.ts

@@ -0,0 +1,9 @@
+import type { IEditor } from 'roosterjs-editor-types-compatible';
+/**
+ * Insert table into editor at current selection
+ * @param editor The editor instance
+ * @param columns Number of columns in table
+ * @param rows Number of rows in table
+ */
+export declare const insertTable: (editor: IEditor, columns: number, rows: number) => void;
+//# sourceMappingURL=insertTableAction.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Position, VTable } from 'roosterjs-editor-dom';
+import { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';
+// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles
+/**
+ * Insert table into editor at current selection
+ * @param editor The editor instance
+ * @param columns Number of columns in table
+ * @param rows Number of rows in table
+ */
+export const insertTable = (editor, columns, rows) => {
+    const document = editor.getDocument();
+    const table = document.createElement('table');
+    for (let i = 0; i < rows; i++) {
+        const tr = document.createElement('tr');
+        table.appendChild(tr);
+        for (let j = 0; j < columns; j++) {
+            const td = document.createElement('td');
+            tr.appendChild(td);
+            td.appendChild(document.createElement('br'));
+        }
+    }
+    editor.focus();
+    editor.addUndoSnapshot(() => {
+        const vTable = new VTable(table);
+        vTable.writeBack();
+        editor.insertNode(table);
+        editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));
+    }, CompatibleChangeSource.Format, undefined /* canUndoByBackspace */, {
+        formatApiName: 'insertTable'
+    });
+};
+//# sourceMappingURL=insertTableAction.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertTableAction.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEnG,+GAA+G;AAE/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAe,EAAE,OAAe,EAAE,IAAY,EAAQ,EAAE;IAClF,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAwB,CAAC;QAC/D,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAyB,CAAC;YAChE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACnB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,CAAC,eAAe,CACpB,GAAG,EAAE;QACH,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzB,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC5G,CAAC,EACD,sBAAsB,CAAC,MAAM,EAC7B,SAAS,CAAC,wBAAwB,EAClC;QACE,aAAa,EAAE,aAAa;KAC7B,CACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Position, VTable } from 'roosterjs-editor-dom';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\nimport { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';\n\n// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles\n\n/**\n * Insert table into editor at current selection\n * @param editor The editor instance\n * @param columns Number of columns in table\n * @param rows Number of rows in table\n */\nexport const insertTable = (editor: IEditor, columns: number, rows: number): void => {\n  const document = editor.getDocument();\n  const table = document.createElement('table') as HTMLTableElement;\n  for (let i = 0; i < rows; i++) {\n    const tr = document.createElement('tr') as HTMLTableRowElement;\n    table.appendChild(tr);\n    for (let j = 0; j < columns; j++) {\n      const td = document.createElement('td') as HTMLTableCellElement;\n      tr.appendChild(td);\n      td.appendChild(document.createElement('br'));\n    }\n  }\n\n  editor.focus();\n  editor.addUndoSnapshot(\n    () => {\n      const vTable = new VTable(table);\n      vTable.writeBack();\n      editor.insertNode(table);\n      editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));\n    },\n    CompatibleChangeSource.Format,\n    undefined /* canUndoByBackspace */,\n    {\n      formatApiName: 'insertTable'\n    }\n  );\n};\n"]}

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

@@ -3,11 +3,13 @@
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { ContentEdit, Watermark } from 'roosterjs-editor-plugins';
 import { Editor } from 'roosterjs-editor-core';
-import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';
+import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon, createContextMenuPlugin } from 'roosterjs-react';
 import { ribbonButtonStyle, ribbonOverflowButtonStyle, ribbonStyle, richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
 import { useTheme } from '../../theming';
-import { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';
+import { ribbonButtons } from './Buttons/RichTextRibbonButtons';
 import { isDarkThemed } from '../../theming/themeUtils';
+import { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';
+import { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';
 /**
  * A component to wrap RoosterJS Rich Text Editor.
  *
@@ -36,13 +38,12 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     }, []);
     const editorCreator = useCallback((div, options) => {
         editor.current = new Editor(div, options);
-        // Remove default values for background color and color
-        // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused
-        // color will be set in richTextEditorWrapperStyle instead of inline styles
-        div.style.backgroundColor = '';
-        div.style.color = '';
         return editor.current;
-    }, []);
+    }, 
+    // trigger force editor reset when strings are changed to update context menu strings
+    // see RosterJS documentation for 'editorCreator' for more details
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [strings]);
     const placeholderPlugin = React.useMemo(() => {
         return new Watermark('');
     }, []);
@@ -52,12 +53,15 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         }
     }, [placeholderPlugin, placeholderText]);
     const plugins = useMemo(() => {
+        // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
+        const contextPlugin = createContextMenuPlugin();
+        const tableEditMenuProvider = createTableEditMenuProvider(strings);
         const contentEdit = new ContentEdit();
         const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content) => {
             onChange && onChange(content);
         });
-        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];
-    }, [onChange, placeholderPlugin, ribbonPlugin]);
+        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin, contextPlugin, tableEditMenuProvider];
+    }, [onChange, placeholderPlugin, ribbonPlugin, strings]);
     const ribbon = useMemo(() => {
         const buttons = ribbonButtons(theme);
         return (React.createElement(Ribbon, { styles: ribbonStyle, buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
@@ -69,10 +73,18 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
     }, [strings, ribbonPlugin, theme]);
+    const defaultFormat = useMemo(() => {
+        // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)
+        // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75
+        // this issue is fixed for content model package
+        return {
+            backgroundColor: 'transparent'
+        };
+    }, []);
     return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && ribbon,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
-            React.createElement(Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
+            React.createElement(Rooster, { defaultFormat: defaultFormat, initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
                 // TODO: confirm the color during inline images implementation
                 imageSelectionBorderColor: 'blue', 
                 // doNotAdjustEditorColor is used to fix the default background color for Rooster component

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    // Remove default values for background color and color\n    // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused\n    // color will be set in richTextEditorWrapperStyle instead of inline styles\n    div.style.backgroundColor = '';\n    div.style.color = '';\n\n    return editor.current;\n  }, []);\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderPlugin, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          initialContent={initialContent}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { DefaultFormat, EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport {\n  Rooster,\n  createUpdateContentPlugin,\n  UpdateMode,\n  createRibbonPlugin,\n  Ribbon,\n  createContextMenuPlugin\n} from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons } from './Buttons/RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';\nimport { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback(\n    (div: HTMLDivElement, options: EditorOptions) => {\n      editor.current = new Editor(div, options);\n      return editor.current;\n    },\n    // trigger force editor reset when strings are changed to update context menu strings\n    // see RosterJS documentation for 'editorCreator' for more details\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [strings]\n  );\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n    const contextPlugin = createContextMenuPlugin();\n    const tableEditMenuProvider = createTableEditMenuProvider(strings);\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin, contextPlugin, tableEditMenuProvider];\n  }, [onChange, placeholderPlugin, ribbonPlugin, strings]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  const defaultFormat: DefaultFormat = useMemo(() => {\n    // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)\n    // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75\n    // this issue is fixed for content model package\n    return {\n      backgroundColor: 'transparent'\n    };\n  }, []);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          defaultFormat={defaultFormat}\n          initialContent={initialContent}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.d.ts

@@ -35,10 +35,54 @@ export interface RichTextSendBoxStrings extends SendBoxStrings {
      * Tooltip text for the decrease indent button.
      */
     decreaseIndentTooltip: string;
+    /**
+     * Tooltip text insert table button.
+     */
+    insertTableTooltip: string;
     /**
      * Tooltip text for the rich text format button button.
      */
     richTextFormatButtonTooltip: string;
+    /**
+     * Text for the insert menu item.
+     */
+    insertRowOrColumnMenu: string;
+    /**
+     * Title for the insert table menu.
+     */
+    insertTableMenuTitle: string;
+    /**
+     * Text for the insert menu item to insert row above the current selection.
+     */
+    insertRowAboveMenu: string;
+    /**
+     * Text for the insert menu item to insert row below the current selection.
+     */
+    insertRowBelowMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the left from the current selection.
+     */
+    insertColumnLeftMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the right from the current selection.
+     */
+    insertColumnRightMenu: string;
+    /**
+     * Text for the delete row or column menu.
+     */
+    deleteRowOrColumnMenu: string;
+    /**
+     * Text for the delete column menu.
+     */
+    deleteColumnMenu: string;
+    /**
+     * Text for the delete row menu.
+     */
+    deleteRowMenu: string;
+    /**
+     * Text for the delete table menu.
+     */
+    deleteTableMenu: string;
 }
 /**
  * Props for {@link RichTextSendBox}.

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js

@@ -16,6 +16,8 @@ import { _AttachmentUploadCards } from '../AttachmentUploadCards';
 import { hasCompletedFileUploads, hasIncompleteFileUploads } from '../utils/SendBoxUtils';
 /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
 /**
  * A component to render SendBox with Rich Text Editor support.
  *
@@ -127,12 +129,20 @@ export const RichTextSendBox = (props) => {
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileUploads = useCallback(() => {
         return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: onCancelFileUpload, strings: {
-                    removeAttachment: strings.removeAttachment,
-                    uploading: strings.uploading,
-                    uploadCompleted: strings.uploadCompleted
-                } })));
-    }, [activeFileUploads, onCancelFileUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading]);
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: onCancelFileUpload, strings: {
+                        removeAttachment: strings.removeAttachment,
+                        uploading: strings.uploading,
+                        uploadCompleted: strings.uploadCompleted
+                    } }))));
+    }, [
+        activeFileUploads,
+        onCancelFileUpload,
+        strings.removeAttachment,
+        strings.uploadCompleted,
+        strings.uploading,
+        theme
+    ]);
     const sendButton = useMemo(() => {
         return (React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                 sendMessageOnClick();

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ActiveFileUpload, _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onCancelFileUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(\n        activeFileUploads\n      )\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderFileUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <_AttachmentUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={onCancelFileUpload}\n          strings={{\n            removeAttachment: strings.removeAttachment,\n            uploading: strings.uploading,\n            uploadCompleted: strings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, onCancelFileUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const hasFileUploads = useMemo(() => {\n    return hasCompletedFileUploads(activeFileUploads) || hasIncompleteFileUploads(activeFileUploads);\n  }, [activeFileUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        onRenderFileUploads={onRenderFileUploads}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        hasFiles={hasFileUploads}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ActiveFileUpload, _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onCancelFileUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(\n        activeFileUploads\n      )\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderFileUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeFileUploads={activeFileUploads}\n            onCancelFileUpload={onCancelFileUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeFileUploads,\n    onCancelFileUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const hasFileUploads = useMemo(() => {\n    return hasCompletedFileUploads(activeFileUploads) || hasIncompleteFileUploads(activeFileUploads);\n  }, [activeFileUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        onRenderFileUploads={onRenderFileUploads}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        hasFiles={hasFileUploads}\n      />\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js

@@ -17,7 +17,7 @@ import { OverflowGallery } from './OverflowGallery';
  */
 export const DefaultLayout = (props) => {
     const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, pinnedParticipantUserIds = [], overflowGalleryPosition = 'horizontalBottom', 
-    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds } = props;
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [] } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     // This is for tracking the number of children in the first page of overflow gallery.
@@ -59,7 +59,7 @@ export const DefaultLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        if (screenShareComponent) {
+        if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {
             overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
         }
         else {

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/LargeGalleryLayout.js

@@ -21,7 +21,8 @@ const LARGE_GALLERY_PARTICIPANT_CAP = 48;
  * @private
  */
 export const LargeGalleryLayout = (props) => {
-    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, pinnedParticipantUserIds = [], overflowGalleryPosition = 'horizontalBottom' } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, pinnedParticipantUserIds = [], overflowGalleryPosition = 'horizontalBottom', 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [] } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     const maxStreamsTrampoline = () => {
@@ -44,7 +45,8 @@ export const LargeGalleryLayout = (props) => {
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         pinnedParticipantUserIds,
-        /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
+        /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
     let gridTiles = gridParticipants.map((p) => {
@@ -68,7 +70,7 @@ export const LargeGalleryLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        if (screenShareComponent) {
+        if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {
             overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
         }
         else {