npm - @azure/communication-react - Versions diffs - 1.18.0-alpha-202406180013 → 1.18.0-alpha-202406191739 - Mend

@azure/communication-react 1.18.0-alpha-202406180013 → 1.18.0-alpha-202406191739

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAOxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAA6C,MAAM,iBAAiB,CAAC;AAC5F,OAAO,iBAAiB,MAAM,6BAA6B,CAAC;AAuD5D;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7G,MAAM,EACJ,cAAc,EACd,QAAQ,EACR,eAAe,EACf,OAAO,EACP,4BAA4B,EAC5B,SAAS,EACT,SAAS,EACT,oBAAoB,EACpB,YAAY;IACZ,gEAAgE;IAChE,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA8B,IAAI,CAAC,CAAC;IAC5F,MAAM,2CAA2C,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IAE1F,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE;QACH,OAAO;YACL,KAAK;gBACH,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;YACD,eAAe;gBACb,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC;oBAClC,0DAA0D;oBAC1D,+DAA+D;oBAC/D,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KAAyC,EAAW,EAAE;wBACvF,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;wBAClB,OAAO,IAAI,CAAC;oBACd,CAAC,CAAC,CAAC;oBACH,qBAAqB;oBACrB,oBAAoB,IAAI,oBAAoB,CAAC,SAAS,CAAC,CAAC;gBAC1D,CAAC;YACH,CAAC;YACD,eAAe;gBACb,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,OAAO,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;gBACxD,CAAC;qBAAM,CAAC;oBACN,OAAO,SAAS,CAAC;gBACnB,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,IAAI,qBAAqB,EAAE,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,MAAM,CAAC,OAAO,0CAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,6DAA6D;IAC7D,SAAS,CAAC,GAAG,EAAE;;QACb,+GAA+G;QAC/G,MAAA,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,2CAA2C,CAAC,OAAO;gBACjD,MAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,YAAY,mCAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QACnE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpD,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,IAAI,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,oBAAC,eAAe,IAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;IACtE,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,IAAI,mBAAmB,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,wFAAwF;QACxF,YAAY,CAAC,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;YACxC,IAAI,MAAM,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YACD,IAAI,KAAK,KAAK,WAAW,CAAC,IAAI,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;gBAChE,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;YACnG,CAAC;iBAAM,CAAC;gBACN,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,IAAI,mBAAmB,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,wFAAwF;QACxF,mBAAmB,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C,CAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,CAAC;IAErC,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,IAAI,4BAA4B,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtC,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,SAAsB,EAAE,KAA4B,EAAE,SAAqB,EAAQ,EAAE;QACpF,mBAAmB,CAAC;YAClB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC;IACL,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAS,EAAE;QAClD,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,UAAkB,EAAE,WAAoB,EAAE,SAA4C,EAAU,EAAE;;QACjG,IAAI,UAAU,KAAK,2CAA2C,CAAC,OAAO,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;YACrG,OAAO,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,YAAY,mCAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QACvE,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAC7B,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,eAAe,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,MAAM,OAAO,GAAmB,OAAO,CAAC,GAAG,EAAE;QAC3C,MAAM,WAAW,GAAG,IAAI,UAAU,EAAE,CAAC;QACrC,4DAA4D;QAC5D,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACzG,MAAM,kBAAkB,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAC5C,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;QAC3F,OAAO;YACL,iBAAiB;YACjB,mBAAmB;YACnB,WAAW;YACX,gBAAgB;YAChB,YAAY;YACZ,eAAe;YACf,kBAAkB;YAClB,aAAa;YACb,cAAc;YACd,yFAAyF;YACzF,iBAAiB;YACjB,sBAAsB;SACvB,CAAC;IACJ,CAAC,EAAE;QACD,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,mBAAmB;QACnB,YAAY;QACZ,eAAe;QACf,aAAa;QACb,sBAAsB;KACvB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,wBAAwB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAC5E,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE;gBAC7C,UAAU,EAAE,iBAAiB;gBAC7B,qGAAqG;gBACrG,sBAAsB,EAAE,IAAI;gBAC5B,8DAA8D;gBAC9D,yBAAyB,EAAE,MAAM;gBACjC,iCAAiC,EAAE,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,YAAY,KAAI,KAAK,CAAC,OAAO,CAAC,YAAY;gBACjG,OAAO,EAAE,OAAO;gBAChB,YAAY,EAAE,YAAY;gBAC1B,wBAAwB,EAAE;oBACxB,qBAAqB,EAAE;wBACrB,6CAA6C;wBAC7C,MAAM,EAAE,aAAa;wBACrB,OAAO,EAAE,cAAc;qBACxB;iBACF;gBACD,YAAY,EAAE,YAAY;aAC3B,CAAC,CAAC;QACL,CAAC;QAED,IAAI,SAAS,KAAK,kBAAkB,EAAE,CAAC;YACrC,MAAA,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;gBACnB,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBACzB,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,+FAA+F;QAC/F,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,4CAAkB,0BAA0B;QACzC,4BAA4B,IAAI,OAAO;QACxC,6BAAK,SAAS,EAAE,0BAA0B,CAAC,KAAK,EAAE,CAAC,4BAA4B,CAAC;YAE9E,6BACE,EAAE,EAAC,iBAAiB,EACpB,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,oBACC,MAAM,iBACR,0BAA0B,EACvC,SAAS,EAAE,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,GAC5C,CACE;QACL,gBAAgB,IAAI,oBAAC,cAAc,oBAAK,gBAAgB,IAAE,YAAY,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CACjG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,CAC/B,cAAuB,EACvB,YAAmC,EACD,EAAE;IACpC,IAAI,YAAY,EAAE,CAAC;QACjB,oDAAoD;QACpD,OAAO,YAAY,CAAC;IACtB,CAAC;SAAM,CAAC;QACN,MAAM,mBAAmB,GAAG,cAAc,CAAC;QAC3C,MAAM,YAAY,GAChB,mBAAmB,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/G,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,6EAA6E;YAC7E,yCAAyC;YACzC,IAAI,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACpE,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,MAAK,WAAW,EAAE,CAAC;gBACzC,6BAA6B;YAC/B,CAAC;iBAAM,CAAC;gBACN,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;gBAClC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACtC,CAAC;YACD,MAAM,MAAM,GAAG,qBAAqB,EAAE,CAAC;YACvC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { darkTheme, lightTheme, useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n ContentModelDocument,\n EditorPlugin,\n IEditor,\n ShallowMutableContentModelDocument\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport PlaceholderPlugin from './Plugins/PlaceholderPlugin';\n\n/*\n Style 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 // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (newValue?: string) => void;\n onKeyDown?: (ev: KeyboardEvent) => void;\n // update the current content of the rich text editor\n onContentModelUpdate?: (contentModel: ContentModelDocument \| undefined) => void;\n contentModel?: ContentModelDocument \| undefined;\n placeholderText?: string;\n strings: Partial<RichTextStrings>;\n showRichTextEditorFormatting: boolean;\n styles: RichTextEditorStyleProps;\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/\n Represents a reference to the RichTextEditor component.\n /\nexport interface RichTextEditorComponentRef {\n /\n Sets focus on the RichTextEditor component.\n /\n focus: () => void;\n\n /\n Sets the content of the RichTextEditor component to an empty string.\n /\n setEmptyContent: () => void;\n\n /\n Retrieves the plain text content of the RichTextEditor component.\n * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n /\n getPlainContent: () => string \| undefined;\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 {\n initialContent,\n onChange,\n placeholderText,\n strings,\n showRichTextEditorFormatting,\n autoFocus,\n onKeyDown,\n onContentModelUpdate,\n contentModel,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste\n } = props;\n const editor = useRef<IEditor \| null>(null);\n const editorDiv = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps \| null>(null);\n const tableCellSelectionLightThemeBackgroundColor = useRef<string \| undefined>(undefined);\n\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.formatContentModel;\n // remove all content from the editor and update the model\n // ContentChanged event will be sent by RoosterJS automatically\n editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n model.blocks = [];\n return true;\n });\n //reset content model\n onContentModelUpdate && onContentModelUpdate(undefined);\n }\n },\n getPlainContent() {\n if (editor.current) {\n return exportContent(editor.current, 'PlainTextFast');\n } else {\n return undefined;\n }\n }\n };\n },\n [onContentModelUpdate]\n );\n\n const toolbarPlugin = React.useMemo(() => {\n return new RichTextToolbarPlugin();\n }, []);\n\n const isDarkThemedValue = useMemo(() => {\n return isDarkThemed(theme);\n }, [theme]);\n\n useEffect(() => {\n editor.current?.setDarkModeState(isDarkThemedValue);\n }, [isDarkThemedValue]);\n\n // remember light color to correctly set it in the dark theme\n useEffect(() => {\n // focus to update selection color for table, otherwise the existing selection color for table won't be updated\n editor.current?.focus();\n if (!isDarkThemedValue) {\n tableCellSelectionLightThemeBackgroundColor.current =\n lightTheme.palette?.neutralLight ?? theme.palette.neutralLight;\n }\n }, [theme.palette.neutralLight, isDarkThemedValue]);\n\n const placeholderPlugin = useMemo(() => {\n return new PlaceholderPlugin('');\n }, []);\n\n useEffect(() => {\n if (placeholderText !== undefined) {\n placeholderPlugin.updatePlaceholder(placeholderText);\n }\n }, [placeholderPlugin, placeholderText]);\n\n const toolbar = useMemo(() => {\n return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n }, [strings, toolbarPlugin]);\n\n const updatePlugin = useMemo(() => {\n return new UpdateContentPlugin();\n }, []);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (event: string) => {\n if (editor.current === null) {\n return;\n }\n if (event === UpdateEvent.Blur \|\| event === UpdateEvent.Dispose) {\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n } else {\n onChange && onChange(exportContent(editor.current));\n }\n };\n }, [onChange, onContentModelUpdate, updatePlugin]);\n\n const keyboardInputPlugin = useMemo(() => {\n return new KeyboardInputPlugin();\n }, []);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onKeyDown = onKeyDown;\n }, [keyboardInputPlugin, onKeyDown]);\n\n const tableContextMenuPlugin = useMemo(() => {\n return new TableEditContextMenuProvider();\n }, []);\n\n useEffect(() => {\n tableContextMenuPlugin.updateStrings(strings);\n }, [tableContextMenuPlugin, strings]);\n\n const onContextMenuRender = useCallback(\n (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n setContextMenuProps({\n items: items,\n target: container,\n onDismiss: onDismiss\n });\n },\n []\n );\n\n const onContextMenuDismiss = useCallback((): void => {\n setContextMenuProps(null);\n }, []);\n\n const getDarkColor = useCallback(\n (lightColor: string, _baseLValue?: number, colorType?: 'text' \| 'background' \| 'border'): string => {\n if (lightColor === tableCellSelectionLightThemeBackgroundColor.current && colorType === 'background') {\n return darkTheme.palette?.neutralLight ?? theme.palette.neutralLight;\n }\n return lightColor;\n },\n [theme.palette.neutralLight]\n );\n\n const copyPastePlugin = useMemo(() => {\n return new CopyPastePlugin();\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n copyPastePlugin.onPaste = onPaste;\n }, [copyPastePlugin, onPaste]);\n\n const plugins: EditorPlugin[] = useMemo(() => {\n const contentEdit = new EditPlugin();\n // AutoFormatPlugin previously was a part of the edit plugin\n const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n const roosterPastePlugin = new PastePlugin(false);\n const shortcutPlugin = new ShortcutPlugin();\n const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n return [\n placeholderPlugin,\n keyboardInputPlugin,\n contentEdit,\n autoFormatPlugin,\n updatePlugin,\n copyPastePlugin,\n roosterPastePlugin,\n toolbarPlugin,\n shortcutPlugin,\n // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n contextMenuPlugin,\n tableContextMenuPlugin\n ];\n }, [\n onContextMenuRender,\n onContextMenuDismiss,\n placeholderPlugin,\n keyboardInputPlugin,\n updatePlugin,\n copyPastePlugin,\n toolbarPlugin,\n tableContextMenuPlugin\n ]);\n\n useEffect(() => {\n const initialModel = createEditorInitialModel(initialContent, contentModel);\n if (editorDiv.current) {\n editor.current = new Editor(editorDiv.current, {\n inDarkMode: isDarkThemedValue,\n // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n doNotAdjustEditorColor: true,\n // TODO: confirm the color during inline images implementation\n imageSelectionBorderColor: 'blue',\n tableCellSelectionBackgroundColor: lightTheme.palette?.neutralLight && theme.palette.neutralLight,\n plugins: plugins,\n initialModel: initialModel,\n defaultModelToDomOptions: {\n formatApplierOverride: {\n // apply border and dataset formats for table\n border: borderApplier,\n dataset: dataSetApplier\n }\n },\n getDarkColor: getDarkColor\n });\n }\n\n if (autoFocus === 'sendBoxTextField') {\n editor.current?.focus();\n }\n\n return () => {\n if (editor.current) {\n editor.current.dispose();\n editor.current = null;\n }\n };\n // don't update the editor on deps update as everything is handled in separate hooks or plugins\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div data-testid={'rich-text-editor-wrapper'}>\n {showRichTextEditorFormatting && toolbar}\n <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n {/ div that is used by Rooster JS as a parent of the editor */}\n <div\n id=\"richTextSendBox\"\n ref={editorDiv}\n tabIndex={0}\n role=\"textbox\"\n aria-multiline=\"true\"\n data-testid={'rooster-rich-text-editor'}\n className={richTextEditorStyle(props.styles)}\n />\n </div>\n {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n </div>\n );\n});\n\nconst createEditorInitialModel = (\n initialContent?: string,\n contentModel?: ContentModelDocument\n): ContentModelDocument \| undefined => {\n if (contentModel) {\n // contentModel is the current content of the editor\n return contentModel;\n } else {\n const initialContentValue = initialContent;\n const initialModel =\n initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n if (initialModel && initialModel.blocks.length > 0) {\n // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n // to set focus to the end of the content\n let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n if (lastBlock?.blockType === 'Paragraph') {\n // now lastBlock is paragraph\n } else {\n lastBlock = createParagraph(true);\n initialModel.blocks.push(lastBlock);\n }\n const marker = createSelectionMarker();\n lastBlock.segments.push(marker);\n setSelection(initialModel, marker);\n }\n return initialModel;\n }\n};\n"]}
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, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n ContentModelDocument,\n EditorPlugin,\n IEditor,\n ShallowMutableContentModelDocument\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\n\n/*\n Style 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 // the initial content of editor that is set when editor is created (e.g. when editing a message)\n initialContent?: string;\n onChange: (newValue?: string) => void;\n onKeyDown?: (ev: KeyboardEvent) => void;\n // update the current content of the rich text editor\n onContentModelUpdate?: (contentModel: ContentModelDocument \| undefined) => void;\n contentModel?: ContentModelDocument \| undefined;\n placeholderText?: string;\n strings: Partial<RichTextStrings>;\n showRichTextEditorFormatting: boolean;\n styles: RichTextEditorStyleProps;\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/\n Represents a reference to the RichTextEditor component.\n /\nexport interface RichTextEditorComponentRef {\n /\n Sets focus on the RichTextEditor component.\n /\n focus: () => void;\n\n /\n Sets the content of the RichTextEditor component to an empty string.\n /\n setEmptyContent: () => void;\n\n /\n Retrieves the plain text content of the RichTextEditor component.\n * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n /\n getPlainContent: () => string \| undefined;\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 {\n initialContent,\n onChange,\n placeholderText,\n strings,\n showRichTextEditorFormatting,\n autoFocus,\n onKeyDown,\n onContentModelUpdate,\n contentModel,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste\n } = props;\n const editor = useRef<IEditor \| null>(null);\n const editorDiv = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps \| null>(null);\n\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.formatContentModel;\n // remove all content from the editor and update the model\n // ContentChanged event will be sent by RoosterJS automatically\n editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n model.blocks = [];\n return true;\n });\n //reset content model\n onContentModelUpdate && onContentModelUpdate(undefined);\n }\n },\n getPlainContent() {\n if (editor.current) {\n return exportContent(editor.current, 'PlainTextFast');\n } else {\n return undefined;\n }\n }\n };\n },\n [onContentModelUpdate]\n );\n\n const toolbarPlugin = React.useMemo(() => {\n return new RichTextToolbarPlugin();\n }, []);\n\n const isDarkThemedValue = useMemo(() => {\n return isDarkThemed(theme);\n }, [theme]);\n\n useEffect(() => {\n editor.current?.setDarkModeState(isDarkThemedValue);\n }, [isDarkThemedValue]);\n\n const placeholderPlugin = useMemo(() => {\n const textColor = theme.palette?.neutralSecondary;\n return new PlaceholderPlugin(\n '',\n textColor\n ? {\n textColor: textColor\n }\n : undefined\n );\n }, [theme]);\n\n useEffect(() => {\n if (placeholderText !== undefined) {\n placeholderPlugin.updatePlaceholder(placeholderText);\n }\n }, [placeholderPlugin, placeholderText]);\n\n const toolbar = useMemo(() => {\n return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n }, [strings, toolbarPlugin]);\n\n const updatePlugin = useMemo(() => {\n return new UpdateContentPlugin();\n }, []);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n updatePlugin.onUpdate = (event: string) => {\n if (editor.current === null) {\n return;\n }\n if (event === UpdateEvent.Blur \|\| event === UpdateEvent.Dispose) {\n onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n } else {\n onChange && onChange(exportContent(editor.current));\n }\n };\n }, [onChange, onContentModelUpdate, updatePlugin]);\n\n const keyboardInputPlugin = useMemo(() => {\n return new KeyboardInputPlugin();\n }, []);\n\n useEffect(() => {\n // don't set callback in plugin constructor to update callback without plugin recreation\n keyboardInputPlugin.onKeyDown = onKeyDown;\n }, [keyboardInputPlugin, onKeyDown]);\n\n const tableContextMenuPlugin = useMemo(() => {\n return new TableEditContextMenuProvider();\n }, []);\n\n useEffect(() => {\n tableContextMenuPlugin.updateStrings(strings);\n }, [tableContextMenuPlugin, strings]);\n\n const onContextMenuRender = useCallback(\n (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n setContextMenuProps({\n items: items,\n target: container,\n onDismiss: onDismiss\n });\n },\n []\n );\n\n const onContextMenuDismiss = useCallback((): void => {\n setContextMenuProps(null);\n }, []);\n\n const copyPastePlugin = useMemo(() => {\n return new CopyPastePlugin();\n }, []);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n useEffect(() => {\n copyPastePlugin.onPaste = onPaste;\n }, [copyPastePlugin, onPaste]);\n\n const plugins: EditorPlugin[] = useMemo(() => {\n const contentEdit = new EditPlugin();\n // AutoFormatPlugin previously was a part of the edit plugin\n const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n const roosterPastePlugin = new PastePlugin(false);\n const shortcutPlugin = new ShortcutPlugin();\n const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n return [\n placeholderPlugin,\n keyboardInputPlugin,\n contentEdit,\n autoFormatPlugin,\n updatePlugin,\n copyPastePlugin,\n roosterPastePlugin,\n toolbarPlugin,\n shortcutPlugin,\n // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n contextMenuPlugin,\n tableContextMenuPlugin\n ];\n }, [\n onContextMenuRender,\n onContextMenuDismiss,\n placeholderPlugin,\n keyboardInputPlugin,\n updatePlugin,\n copyPastePlugin,\n toolbarPlugin,\n tableContextMenuPlugin\n ]);\n\n useEffect(() => {\n const initialModel = createEditorInitialModel(initialContent, contentModel);\n if (editorDiv.current) {\n editor.current = new Editor(editorDiv.current, {\n inDarkMode: isDarkThemedValue,\n // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n doNotAdjustEditorColor: true,\n // TODO: confirm the color during inline images implementation\n imageSelectionBorderColor: 'blue',\n tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n plugins: plugins,\n initialModel: initialModel,\n defaultModelToDomOptions: {\n formatApplierOverride: {\n // apply border and dataset formats for table\n border: borderApplier,\n dataset: dataSetApplier\n }\n }\n });\n }\n\n if (autoFocus === 'sendBoxTextField') {\n editor.current?.focus();\n }\n\n return () => {\n if (editor.current) {\n editor.current.dispose();\n editor.current = null;\n }\n };\n // don't update the editor on deps update as everything is handled in separate hooks or plugins\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme, plugins]);\n\n return (\n <div data-testid={'rich-text-editor-wrapper'}>\n {showRichTextEditorFormatting && toolbar}\n <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n {/ div that is used by Rooster JS as a parent of the editor */}\n <div\n id=\"richTextSendBox\"\n ref={editorDiv}\n tabIndex={0}\n role=\"textbox\"\n aria-multiline=\"true\"\n data-testid={'rooster-rich-text-editor'}\n className={richTextEditorStyle(props.styles)}\n aria-label={placeholderText}\n />\n </div>\n {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n </div>\n );\n});\n\nconst createEditorInitialModel = (\n initialContent?: string,\n contentModel?: ContentModelDocument\n): ContentModelDocument \| undefined => {\n if (contentModel) {\n // contentModel is the current content of the editor\n return contentModel;\n } else {\n const initialContentValue = initialContent;\n const initialModel =\n initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n if (initialModel && initialModel.blocks.length > 0) {\n // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n // to set focus to the end of the content\n let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n if (lastBlock?.blockType === 'Paragraph') {\n // now lastBlock is paragraph\n } else {\n lastBlock = createParagraph(true);\n initialModel.blocks.push(lastBlock);\n }\n const marker = createSelectionMarker();\n lastBlock.segments.push(marker);\n setSelection(initialModel, marker);\n }\n return initialModel;\n }\n};\n"]}

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const _TroubleshootingGuideErrorBar = (props) => {
     // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
-    return (React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => {
+    return (React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error) => {
         const devicePermissionErrorBar = (React.createElement("div", null,
             strings[error.type],
             ' ',

package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AACnG,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AA+DjB;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,oBAAoB;IACpB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,MAAM,EACJ,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,GAAG;QACjB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;KACrB,EACD,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IAEV,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,KAAK,kBAAY,~~iBAAiB~~,~~IAChC~~,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACpB,MAAM,wBAAwB,GAAG,CAC/B;YACG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,iCAAiC,IAAI,CACpC,oBAAC,IAAI,IACH,OAAO,EAAE,GAAG,EAAE;oBACZ,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,EACD,SAAS;gBAET,kCAAO,2BAA2B,CAAC,wBAAwB,CAAQ,CAC9D,CACR,CACG,CACP,CAAC;QAEF,MAAM,eAAe,GAAG,CACtB;YACG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,GAAG;YACxB,gCAAgC,IAAI,CACnC,oBAAC,IAAI,IAAC,OAAO,EAAE,gCAAgC,EAAE,SAAS;gBACxD,kCAAO,2BAA2B,CAAC,8BAA8B,CAAQ,CACpE,CACR,CACG,CACP,CAAC;QAEF,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAC1D,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,OAAO,EACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,2BAA2B,CAAC,iBAAiB,EACnD,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE;oBACZ,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC3D,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,sBAAsB,GACzC,EAEJ,WAAW,EAAE,KAAK,KAEjB,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,wBAAwB,EAAE,eAAe,CAAC,CACzD,CACd,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,SAAiB,EACjB,wBAAqC,EACrC,eAA4B,EACf,EAAE;IACf,IAAI,SAAS,KAAK,uBAAuB,EAAE,CAAC;QAC1C,OAAO,eAAe,CAAC;IACzB,CAAC;SAAM,CAAC;QACN,OAAO,wBAAwB,CAAC;IAClC,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"~~error~~-~~bar-~~stack\">\n {toShow.map((error) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n underline\n >\n <span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={strings.dismissButtonAriaLabel}\n />\n }\n isMultiline={false}\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}
1	+ {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n underline\n >\n <span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={strings.dismissButtonAriaLabel}\n />\n }\n isMultiline={false}\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js CHANGED Viewed

@@ -42,7 +42,7 @@ export const _VideoBackgroundEffectsPicker = (props) => {
         React.createElement(Label, { className: mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
         optionsByRow.map((options, rowIndex) => {
             var _a;
-            return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
+            return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row", horizontalAlign: "center" },
                 options.map((option, i) => {
                     if (i === 0 && rowIndex === 0) {
                         return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef })));

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2BAA2B,CAAC;AAkFlF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEpG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAElC,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,sDAAG,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iBAC/E,UAAU,EAAE,MAAM,CAAC,OAAO,KAAK,cAAc,EAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,IAC9C,MAAM,EACT,CAAC,CAAC;IAEJ,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExG,4EAA4E;IAC5E,MAAM,SAAS,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1G,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;QACtC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,CACvC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAC7C,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAClC,UAAU,QACV,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,gBACtB,0BAA0B;~~gBAEpC~~,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACzB,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,CAAC;wBAC9B,OAAO,CACL,oBAAC,iBAAiB,oBACZ,MAAM,IACV,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,YAAY,EAAE,KAAK,CAAC,YAAY,IAChC,CACH,CAAC;oBACJ,CAAC;oBACD,OAAO,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC;gBACzF,CAAC,CAAC;gBACD,SAAS,GAAG,CAAC;oBACZ,QAAQ,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC;oBACpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAClD,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,qCAAqC,gBAClC,2BAA2B,GACtC,CACH,CAAC,CACE,CACT,CAAA;SAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n string \| undefined\n >(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n return (\n <Stack tokens={{ childrenGap: '0.5rem' }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => (\n <Stack\n className={mergeStyles(props.styles?.rowRoot)}\n wrap={props.itemsPerRow === 'wrap'}\n horizontal\n key={rowIndex}\n tokens={{ childrenGap: '0.5rem' }}\n data-ui-id=\"video-effects-picker-row\"\n >\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return (\n <_VideoEffectsItem\n {...option}\n itemKey={option.itemKey}\n key={option.itemKey}\n componentRef={props.componentRef}\n />\n );\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 &&\n rowIndex === optionsByRow.length - 1 &&\n Array.from({ length: fillCount }).map((_, index) => (\n <Stack\n key={index}\n styles={hiddenVideoEffectsItemContainerStyles}\n data-ui-id=\"video-effects-hidden-item\"\n />\n ))}\n </Stack>\n ))}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n string \| undefined\n >(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n return (\n <Stack tokens={{ childrenGap: '0.5rem' }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => (\n <Stack\n className={mergeStyles(props.styles?.rowRoot)}\n wrap={props.itemsPerRow === 'wrap'}\n horizontal\n key={rowIndex}\n tokens={{ childrenGap: '0.5rem' }}\n data-ui-id=\"video-effects-picker-row\"\n horizontalAlign=\"center\"\n >\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return (\n <_VideoEffectsItem\n {...option}\n itemKey={option.itemKey}\n key={option.itemKey}\n componentRef={props.componentRef}\n />\n );\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 &&\n rowIndex === optionsByRow.length - 1 &&\n Array.from({ length: fillCount }).map((_, index) => (\n <Stack\n key={index}\n styles={hiddenVideoEffectsItemContainerStyles}\n data-ui-id=\"video-effects-hidden-item\"\n />\n ))}\n </Stack>\n ))}\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export declare const useVideoTileContextualMenuProps: (props: {
         stopSpotlightVideoTileMenuLabel?: string;
         stopSpotlightOnSelfVideoTileMenuLabel?: string;
         spotlightLimitReachedMenuTitle?: string;
+        muteParticipantMenuItemLabel?: string;
     };
     view?: {
         updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;

package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js CHANGED Viewed

@@ -103,17 +103,17 @@ export const useVideoTileContextualMenuProps = (props) => {
             }
         }
         /* @conditional-compile-remove(soft-mute) */
-        if (onMuteParticipant) {
+        if (onMuteParticipant && (strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel)) {
             items.push({
                 key: 'mute',
-                text: 'Mute',
+                text: strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel,
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
                     styles: { root: { lineHeight: 0 } }
                 },
                 onClick: () => onMuteParticipant(participant.userId),
                 'data-ui-id': 'video-tile-mute-participant',
-                ariaLabel: 'Mute',
+                ariaLabel: strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel,
                 disabled: participant.isMuted
             });
         }

package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n participant: VideoGalleryParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n startSpotlightVideoTileMenuLabel?: string;\n addSpotlightVideoTileMenuLabel?: string;\n stopSpotlightVideoTileMenuLabel?: string;\n stopSpotlightOnSelfVideoTileMenuLabel?: string;\n spotlightLimitReachedMenuTitle?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n isSpotlighted?: boolean;\n spotlightedParticipantUserIds?: string[];\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n myUserId?: string;\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant?: (userId: string) => void;\n}): IContextualMenuProps \| undefined => {\n const {\n participant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds = [],\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant\n } = props;\n const scalingMode = useMemo(() => {\n return props.participant.videoStream?.scalingMode;\n }, [props.participant.videoStream?.scalingMode]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(participant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(participant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem \|\| isSpotlighted,\n ariaLabel: pinActionString\n });\n }\n }\n\n if (isSpotlighted) {\n const stopSpotlightMenuLabel =\n myUserId === participant.userId\n ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n : strings?.stopSpotlightVideoTileMenuLabel;\n if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n items.push({\n key: 'stopSpotlight',\n text: stopSpotlightMenuLabel,\n iconProps: {\n iconName: 'StopSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStopSpotlight([participant.userId]),\n ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n });\n }\n } else {\n const startSpotlightMenuLabel =\n spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n ? strings?.addSpotlightVideoTileMenuLabel\n : strings?.startSpotlightVideoTileMenuLabel;\n const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n : false;\n if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n items.push({\n key: 'startSpotlight',\n text: startSpotlightMenuLabel,\n iconProps: {\n iconName: 'StartSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStartSpotlight([participant.userId]),\n ariaLabel: startSpotlightMenuLabel,\n disabled: maxSpotlightedParticipantsReached,\n title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n });\n }\n }\n / @conditional-compile-remove(soft-mute) /\n if (onMuteParticipant) {\n items.push({\n key: 'mute',\n text: 'Mute',\n iconProps: {\n iconName: 'ContextualMenuMicMutedIcon',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onMuteParticipant(participant.userId),\n 'data-ui-id': 'video-tile-mute-participant',\n ariaLabel: 'Mute',\n disabled: participant.isMuted\n });\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n participant.userId,\n participant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n / @conditional-compile-remove(soft-mute) */ participant.isMuted\n ]);\n\n return contextualMenuProps;\n};\n"]}
1	+ {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n participant: VideoGalleryParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n startSpotlightVideoTileMenuLabel?: string;\n addSpotlightVideoTileMenuLabel?: string;\n stopSpotlightVideoTileMenuLabel?: string;\n stopSpotlightOnSelfVideoTileMenuLabel?: string;\n spotlightLimitReachedMenuTitle?: string;\n / @conditional-compile-remove(soft-mute) /\n muteParticipantMenuItemLabel?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n isSpotlighted?: boolean;\n spotlightedParticipantUserIds?: string[];\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n myUserId?: string;\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant?: (userId: string) => void;\n}): IContextualMenuProps \| undefined => {\n const {\n participant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds = [],\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant\n } = props;\n const scalingMode = useMemo(() => {\n return props.participant.videoStream?.scalingMode;\n }, [props.participant.videoStream?.scalingMode]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(participant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: participant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(participant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem \|\| isSpotlighted,\n ariaLabel: pinActionString\n });\n }\n }\n\n if (isSpotlighted) {\n const stopSpotlightMenuLabel =\n myUserId === participant.userId\n ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n : strings?.stopSpotlightVideoTileMenuLabel;\n if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n items.push({\n key: 'stopSpotlight',\n text: stopSpotlightMenuLabel,\n iconProps: {\n iconName: 'StopSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStopSpotlight([participant.userId]),\n ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n });\n }\n } else {\n const startSpotlightMenuLabel =\n spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n ? strings?.addSpotlightVideoTileMenuLabel\n : strings?.startSpotlightVideoTileMenuLabel;\n const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n : false;\n if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n items.push({\n key: 'startSpotlight',\n text: startSpotlightMenuLabel,\n iconProps: {\n iconName: 'StartSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStartSpotlight([participant.userId]),\n ariaLabel: startSpotlightMenuLabel,\n disabled: maxSpotlightedParticipantsReached,\n title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n });\n }\n }\n / @conditional-compile-remove(soft-mute) /\n if (onMuteParticipant && strings?.muteParticipantMenuItemLabel) {\n items.push({\n key: 'mute',\n text: strings?.muteParticipantMenuItemLabel,\n iconProps: {\n iconName: 'ContextualMenuMicMutedIcon',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onMuteParticipant(participant.userId),\n 'data-ui-id': 'video-tile-mute-participant',\n ariaLabel: strings?.muteParticipantMenuItemLabel,\n disabled: participant.isMuted\n });\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(participant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n participant.userId,\n participant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n / @conditional-compile-remove(soft-mute) */ participant.isMuted\n ]);\n\n return contextualMenuProps;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts CHANGED Viewed

@@ -89,6 +89,8 @@ export interface VideoGalleryStrings {
     stopSpotlightOnSelfVideoTileMenuLabel: string;
     /** String for the attendee role */
     attendeeRole: string;
+    /** Menu text shown in Video Tile contextual menu to mute a remote participant */
+    muteParticipantMenuItemLabel: string;
 }
 /**
  * @public

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) /\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/\n @private\n * Styles to disable the selectivity of a text in video gallery\n /\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* Aria-label for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementAriaLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n /* Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile /\n unpinParticipantForMe: string;\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n /* Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile /\n startSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile /\n addSpotlightVideoTileMenuLabel: string;\n /* Menu title for start spotlight menu item when spotlight limit is reached /\n spotlightLimitReachedMenuTitle: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile /\n stopSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile /\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n / @conditional-compile-remove(hide-attendee-name) /\n /* String for the attendee role /\n attendeeRole: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout =\n \| 'default'\n \| 'floatingLocalVideo'\n \| 'speaker'\n \| / @conditional-compile-remove(large-gallery) / 'largeGallery'\n \| 'focusedContent';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n /* Styles for the vertical gallery /\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @public\n /\nexport type OverflowGalleryPosition = 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop';\n\n/\n different modes of the local video tile\n \n @public\n /\nexport type LocalVideoTileSize = '9:16' \| '16:9' \| 'hidden' \| 'followDeviceOrientation';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /\n @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n \n Callback to dispose a remote video stream view\n /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote screen share stream view /\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n /\n List of spotlighted participant userIds.\n /\n spotlightedParticipants?: string[];\n /\n This callback is to start spotlight for local participant video tile.\n /\n onStartLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for local participant video tile.\n /\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n This callback is to start spotlight for remote participant video tiles.\n /\n onStopLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for remote participant video tiles.\n /\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n Maximum participants that can be spotlighted\n /\n maxParticipantsToSpotlight?: number;\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenu?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n /\n overflowGalleryPosition?: OverflowGalleryPosition;\n /\n Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n /\n localVideoTileSize?: LocalVideoTileSize;\n /\n Reaction resources for like, heart, laugh, applause and surprised.\n /\n reactionResources?: ReactionResources;\n /\n Additional Options for Video Tiles\n /\n videoTilesOptions?: VideoTilesOptions;\n / @conditional-compile-remove(soft-mute) /\n /\n This callback is to mute a remote participant\n /\n onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/\n Options that apply to all Video Tiles in the {@link VideoGallery}\n \n @public\n /\nexport interface VideoTilesOptions {\n /\n Whether to always show the label background for the video tile\n /\n alwaysShowLabelBackground?: boolean;\n}\n\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' \|\| layout === 'speaker') && remoteParticipants.length > 0;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) \|\| localVideoTileSize === '9:16') \|\| layout === 'default';\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element \| undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n return isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions \| undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant={onMuteParticipant}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n remoteVideoTileMenu,\n selectedScalingModeState,\n pinnedParticipants,\n onPinParticipant,\n onUnpinParticipant,\n toggleAnnouncerString,\n onUpdateScalingMode,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n reactionResources,\n videoTilesOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n isPPTLive={!screenShareParticipant.screenShareStream?.id}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n / @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, screenShareParticipant]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) /\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/\n @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n /\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/\n @private\n * Styles to disable the selectivity of a text in video gallery\n /\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/\n @private\n * Set aside only 6 dominant speakers for remaining audio participants\n /\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/\n @private\n * Default remote video tile menu options\n /\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/\n @private\n * Maximum number of remote video tiles that can be pinned\n /\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/\n All strings that may be shown on the UI in the {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryStrings {\n /* String to notify that local user is sharing their screen /\n screenIsBeingSharedMessage: string;\n /* String to show when remote screen share stream is loading /\n screenShareLoadingMessage: string;\n /* String for local video label. Default is \"You\" /\n localVideoLabel: string;\n /* String for local video camera switcher /\n localVideoCameraSwitcherLabel: string;\n /* String for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementLabel: string;\n /* Aria-label for announcing the local video tile can be moved by keyboard controls /\n localVideoMovementAriaLabel: string;\n /* String for announcing the selected camera /\n localVideoSelectedDescription: string;\n /* placeholder text for participants who does not have a display name/\n displayNamePlaceholder: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame /\n fitRemoteParticipantToFrame: string;\n /* Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame /\n fillRemoteParticipantFrame: string;\n /* Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile /\n pinParticipantForMe: string;\n /* Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile /\n unpinParticipantForMe: string;\n /* Aria label for pin participant menu item of remote participant's video tile /\n pinParticipantMenuItemAriaLabel: string;\n /* Aria label for unpin participant menu item of remote participant's video tile /\n unpinParticipantMenuItemAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is pinned /\n pinnedParticipantAnnouncementAriaLabel: string;\n /* Aria label to announce when remote participant's video tile is unpinned /\n unpinnedParticipantAnnouncementAriaLabel: string;\n /* Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile /\n startSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile /\n addSpotlightVideoTileMenuLabel: string;\n /* Menu title for start spotlight menu item when spotlight limit is reached /\n spotlightLimitReachedMenuTitle: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile /\n stopSpotlightVideoTileMenuLabel: string;\n /* Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile /\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n / @conditional-compile-remove(hide-attendee-name) /\n /* String for the attendee role /\n attendeeRole: string;\n / @conditional-compile-remove(soft-mute) /\n /* Menu text shown in Video Tile contextual menu to mute a remote participant /\n muteParticipantMenuItemLabel: string;\n}\n\n/\n @public\n /\nexport type VideoGalleryLayout =\n \| 'default'\n \| 'floatingLocalVideo'\n \| 'speaker'\n \| / @conditional-compile-remove(large-gallery) / 'largeGallery'\n \| 'focusedContent';\n\n/\n {@link VideoGallery} Component Styles.\n * @public\n /\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /* Styles for the grid layout /\n gridLayout?: GridLayoutStyles;\n /* Styles for the horizontal gallery /\n horizontalGallery?: HorizontalGalleryStyles;\n /* Styles for the local video /\n localVideo?: IStyle;\n /* Styles for the vertical gallery /\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/\n Different modes and positions of the overflow gallery in the VideoGallery\n \n @public\n /\nexport type OverflowGalleryPosition = 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop';\n\n/\n different modes of the local video tile\n \n @public\n /\nexport type LocalVideoTileSize = '9:16' \| '16:9' \| 'hidden' \| 'followDeviceOrientation';\n\n/\n Props for {@link VideoGallery}.\n \n @public\n /\nexport interface VideoGalleryProps {\n /\n Allows users to pass an object containing custom CSS styles for the gallery container.\n \n @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n /\n styles?: VideoGalleryStyles;\n /* Layout of the video tiles. /\n layout?: VideoGalleryLayout;\n /* Local video particpant /\n localParticipant: VideoGalleryLocalParticipant;\n /* List of remote video particpants /\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /* List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. /\n dominantSpeakers?: string[];\n /* Local video view options /\n localVideoViewOptions?: VideoStreamOptions;\n /* Remote videos view options /\n remoteVideoViewOptions?: VideoStreamOptions;\n /* Callback to create the local video stream view /\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to dispose of the local video stream view /\n onDisposeLocalStreamView?: () => void;\n /* Callback to render the local video tile/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /* Callback to create a remote video stream view /\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n /* Callback to render a remote video tile /\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /\n @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n \n Callback to dispose a remote video stream view\n /\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote video stream view /\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /* Callback to dispose a remote screen share stream view /\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /* Callback to render a particpant avatar /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n /\n showMuteIndicator?: boolean;\n /* Optional strings to override in component /\n strings?: Partial<VideoGalleryStrings>;\n /\n Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n /\n maxRemoteVideoStreams?: number;\n /\n Camera control information for button to switch cameras.\n /\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /\n List of pinned participant userIds.\n /\n pinnedParticipants?: string[];\n /\n This callback will be called when a participant video tile is pinned.\n /\n onPinParticipant?: (userId: string) => void;\n /\n This callback will be called when a participant video tile is un-pinned.\n /\n onUnpinParticipant?: (userId: string) => void;\n /\n List of spotlighted participant userIds.\n /\n spotlightedParticipants?: string[];\n /\n This callback is to start spotlight for local participant video tile.\n /\n onStartLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for local participant video tile.\n /\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n This callback is to start spotlight for remote participant video tiles.\n /\n onStopLocalSpotlight?: () => Promise<void>;\n /\n This callback is to stop spotlight for remote participant video tiles.\n /\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /\n Maximum participants that can be spotlighted\n /\n maxParticipantsToSpotlight?: number;\n /\n Options for showing the remote video tile menu.\n \n @defaultValue \\{ kind: 'contextual' \\}\n /\n remoteVideoTileMenu?: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps;\n /\n Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n /\n overflowGalleryPosition?: OverflowGalleryPosition;\n /\n Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n /\n localVideoTileSize?: LocalVideoTileSize;\n /\n Reaction resources for like, heart, laugh, applause and surprised.\n /\n reactionResources?: ReactionResources;\n /\n Additional Options for Video Tiles\n /\n videoTilesOptions?: VideoTilesOptions;\n / @conditional-compile-remove(soft-mute) /\n /\n This callback is to mute a remote participant\n /\n onMuteParticipant?: (userId: string) => Promise<void>;\n}\n\n/\n Options that apply to all Video Tiles in the {@link VideoGallery}\n \n @public\n /\nexport interface VideoTilesOptions {\n /\n Whether to always show the label background for the video tile\n /\n alwaysShowLabelBackground?: boolean;\n}\n\n/\n Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileContextualMenuProps {\n /\n The menu property kind\n /\n kind: 'contextual';\n}\n\n/\n Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n \n @public\n /\nexport interface VideoTileDrawerMenuProps {\n /\n The menu property kind\n /\n kind: 'drawer';\n /\n The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n /\n hostId?: string;\n}\n/\n VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n \n @public\n /\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' \|\| layout === 'speaker') && remoteParticipants.length > 0;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) \|\| localVideoTileSize === '9:16') \|\| layout === 'default';\n /\n Utility function for memoized rendering of LocalParticipant.\n /\n const localVideoTile = useMemo((): JSX.Element \| undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n return isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /\n sets the announcement string for VideoGallery actions so that the screenreader will trigger\n /\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /\n Clears the announcer string after VideoGallery action allowing it to be re-announced.\n /\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions \| undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n / @conditional-compile-remove(soft-mute) /\n onMuteParticipant={onMuteParticipant}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n remoteVideoTileMenu,\n selectedScalingModeState,\n pinnedParticipants,\n onPinParticipant,\n onUnpinParticipant,\n toggleAnnouncerString,\n onUpdateScalingMode,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n / @conditional-compile-remove(soft-mute) / onMuteParticipant,\n reactionResources,\n videoTilesOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n isPPTLive={!screenShareParticipant.screenShareStream?.id}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n / @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, screenShareParticipant]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}

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

@@ -229,7 +229,7 @@ export const useChatMessageCommonStyles = makeStyles({
             borderCollapse: 'collapse',
             tableLayout: 'auto',
             width: '100%',
-            '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke2}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
+            '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
         }
     },
     failed: {