@azure/communication-react 1.14.0-alpha-202403010014 → 1.14.0-alpha-202403020011

package/dist/communication-react.d.ts

@@ -2739,6 +2739,8 @@ export declare interface CallState {
     recording: RecordingCallFeature;
     /**
      * Proxy of {@link @azure/communication-calling#PPTLiveCallFeature}.
+     *
+     *@beta
      */
     pptLive: PPTLiveCallFeatureState;
     /**
@@ -2769,6 +2771,8 @@ export declare interface CallState {
      * Note this only applies to PPTLive in RemoteParticipant.
      *
      * This property is added by the stateful layer and is not a proxy of SDK state
+     *
+     *@beta
      */
     contentSharingRemoteParticipant?: string;
     /**
@@ -9438,6 +9442,8 @@ export declare interface RemoteParticipantState {
     raisedHand?: RaisedHandState;
     /**
      * Proxy of {@link @azure/communication-calling#Call.PPTLive.target}.
+     *
+     * @beta
      */
     contentSharingStream?: HTMLElement;
     /**
@@ -11271,7 +11277,7 @@ export declare interface VideoGalleryRemoteParticipant extends VideoGalleryParti
  * @public
  */
 export declare type VideoGallerySelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
-    screenShareParticipant: VideoGalleryRemoteParticipant | undefined;
+    screenShareParticipant?: VideoGalleryRemoteParticipant;
     localParticipant: VideoGalleryLocalParticipant;
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];

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

@@ -17,6 +17,7 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
 var roosterjsEditorCore = require('roosterjs-editor-core');
 var roosterjsReact = require('roosterjs-react');
+var roosterjsEditorApi = require('roosterjs-editor-api');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -173,7 +174,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403010014';
+var telemetryVersion = '1.14.0-alpha-202403020011';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -9172,97 +9173,62 @@ const richTextEditorStyle = react.mergeStyles({
 /**
  * @private
  */
-const ribbonButtonStyle = (theme) => {
+const ribbonOverflowButtonStyle = (theme) => {
     return {
-        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
-        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
-        root: { minWidth: 'auto', backgroundColor: 'transparent' },
-        rootChecked: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootCheckedHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootCheckedPressed: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootPressed: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootExpanded: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
+        subComponentStyles: {
+            menuItem: {
+                icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },
+                root: ribbonOverflowButtonRootStyles(theme)
+            },
+            callout: {}
+        }
+    };
+};
+const ribbonOverflowButtonRootStyles = (theme) => {
+    return {
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '&:hover': {
+                selectors: {
+                    '.ms-ContextualMenu-icon': {
+                        color: theme.palette.neutralPrimary
+                    }
                 }
             }
-        },
-        rootExpandedHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                //icon color is not working here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
+        }
+    };
+};
+const ribbonButtonRootStyles = (theme) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '.ms-Button-icon': {
+                color: theme.palette.themePrimary
+            },
+            '.ms-Button-menuIcon': {
+                color: theme.palette.themePrimary
             }
         }
     };
 };
+/**
+ * @private
+ */
+const ribbonButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: ribbonButtonRootStyles(theme),
+        rootHovered: ribbonButtonRootStyles(theme),
+        rootCheckedHovered: ribbonButtonRootStyles(theme),
+        rootCheckedPressed: ribbonButtonRootStyles(theme),
+        rootPressed: ribbonButtonRootStyles(theme),
+        rootExpanded: ribbonButtonRootStyles(theme),
+        rootExpandedHovered: ribbonButtonRootStyles(theme)
+    };
+};
 /**
  * @private
  */
@@ -9325,7 +9291,7 @@ const createKnownRibbonButton = (key, theme, icon) => {
         // AllButtonStringKeys is a union of all the string keys of all the buttons
         const result = buttons[0];
         button.iconName = icon;
-        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)) });
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)), canCheck: false });
         return result;
     }
     return undefined;
@@ -9374,10 +9340,9 @@ const ribbonButtonsStrings = (strings) => {
  * @beta
  */
 React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText, strings } = props;
+    const { initialContent, onChange, placeholderText, strings } = props;
     const editor = React.useRef(null);
-    const [divComponent, setDivComponent] = React.useState(null);
-    const theme = react.useTheme();
+    const theme = useTheme();
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -9388,26 +9353,19 @@ React.forwardRef((props, ref) => {
         };
     }, []);
     React.useEffect(() => {
-        var _a, _b;
-        if (content !== ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
-            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
-        }
-    }, [content]);
-    React.useEffect(() => {
-        if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {
+        if (editor.current !== null) {
             // Adjust color prop for the div component when theme is updated
             // because doNotAdjustEditorColor is set for Rooster
-            divComponent.style.color = theme.palette.neutralPrimary;
+            roosterjsEditorApi.setTextColor(editor.current, theme.palette.neutralPrimary);
         }
-    }, [divComponent, theme]);
+    }, [theme]);
     const ribbonPlugin = React.useMemo(() => {
         return roosterjsReact.createRibbonPlugin();
     }, []);
     const editorCreator = React.useCallback((div, options) => {
         editor.current = new roosterjsEditorCore.Editor(div, options);
-        setDivComponent(div);
         // Remove the background color of the editor
-        div.style.backgroundColor = 'transparent';
+        roosterjsEditorApi.setBackgroundColor(editor.current, 'transparent');
         return editor.current;
     }, []);
     const plugins = React.useMemo(() => {
@@ -9426,13 +9384,14 @@ React.forwardRef((props, ref) => {
                 styles: ribbonButtonStyle(theme),
                 menuProps: {
                     items: [], // CommandBar will determine items rendered in overflow
-                    isBeakVisible: false
+                    isBeakVisible: false,
+                    styles: ribbonOverflowButtonStyle(theme)
                 }
             }, strings: ribbonButtonsStrings(strings) }));
     }, [strings, ribbonPlugin, theme]);
     return (React.createElement("div", null,
         ribbon,
-        React.createElement(roosterjsReact.Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
+        React.createElement(roosterjsReact.Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
             // TODO: confirm the color during inline images implementation
             imageSelectionBorderColor: 'blue', 
             // doNotAdjustEditorColor is used to fix the default background color for Rooster component
@@ -20599,7 +20558,9 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
-            participant.spotlight);
+            participant.spotlight, 
+            /* @conditional-compile-remove(ppt-live) */
+            participant.contentSharingStream);
         }));
     });
 };
@@ -20609,15 +20570,18 @@ raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight // temp unknown type to build stable
-) => {
+spotlight, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
     /* @conditional-compile-remove(raise-hand) */
     raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
-    spotlight);
+    spotlight, 
+    /* @conditional-compile-remove(ppt-live) */
+    contentSharingStream);
 });
 /** @private */
 const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
@@ -20626,8 +20590,9 @@ raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight // temp unknown type to build stable
-) => {
+spotlight, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -20641,6 +20606,10 @@ spotlight // temp unknown type to build stable
     if (sdkScreenShareStream) {
         screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(sdkScreenShareStream);
     }
+    /* @conditional-compile-remove(ppt-live) */
+    if (contentSharingStream) {
+        screenShareStream = convertRemoteContentSharingStreamToVideoGalleryStream(contentSharingStream);
+    }
     return {
         userId,
         displayName,
@@ -20673,6 +20642,15 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         streamSize: stream.streamSize
     };
 };
+/* @conditional-compile-remove(ppt-live) */
+const convertRemoteContentSharingStreamToVideoGalleryStream = (stream) => {
+    return {
+        isAvailable: !!stream,
+        isReceiving: true,
+        isMirrored: false,
+        renderElement: stream
+    };
+};
 /** @private */
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
 /* @conditional-compile-remove(rooms) */ role,