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

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = { ...localeStrings, ...props.strings };\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = (): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    // if (hasIncompleteFileUploads(activeFileUploads)) {\n    //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n    //   return;\n    // }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n    }\n    editorComponentRef.current?.focus();\n  };\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!fileUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(file-sharing) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage\n        })}\n      />\n    ),\n    [contentValue, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadsPendingError: fileUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  return (\n    <Stack>\n      <RTESendBoxErrors {...sendBoxErrorsProps} />\n      <div\n        className={borderAndBoxShadowStyle({\n          theme: theme,\n          // should always be false as we don't want to show the border when there is an error\n          hasErrorMessage: false,\n          disabled: !!disabled\n        })}\n      >\n        <RTEInputBoxComponent\n          placeholderText={strings.placeholderText}\n          content={contentValue}\n          onChange={setContent}\n          editorComponentRef={editorComponentRef}\n          strings={strings}\n        />\n        {/* File Upload */}\n      </div>\n      <Stack.Item align=\"end\">\n        <InputBoxButton\n          onRenderIcon={onRenderSendIcon}\n          onClick={(e) => {\n            sendMessageOnClick();\n            e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n          }}\n          className={sendButtonStyle}\n          ariaLabel={localeStrings.sendButtonAriaLabel}\n          tooltipContent={localeStrings.sendButtonAriaLabel}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = { ...localeStrings, ...props.strings };\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = (): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    // if (hasIncompleteFileUploads(activeFileUploads)) {\n    //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n    //   return;\n    // }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n    }\n    editorComponentRef.current?.focus();\n  };\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!fileUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(file-sharing) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage\n        })}\n      />\n    ),\n    [contentValue, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadsPendingError: fileUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  return (\n    <Stack>\n      <RTESendBoxErrors {...sendBoxErrorsProps} />\n      <RTEInputBoxComponent\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n      />\n      <Stack.Item align=\"end\">\n        <InputBoxButton\n          onRenderIcon={onRenderSendIcon}\n          onClick={(e) => {\n            sendMessageOnClick();\n            e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n          }}\n          className={sendButtonStyle}\n          ariaLabel={localeStrings.sendButtonAriaLabel}\n          tooltipContent={localeStrings.sendButtonAriaLabel}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.js

@@ -22,6 +22,12 @@ export const RTESendBoxErrors = (props) => {
             setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });
         }
     }, [textTooLongMessage]);
+    useEffect(() => {
+        if ((textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&
+            (systemMessage === undefined || isMessageEmpty(systemMessage))) {
+            setSendBoxError(undefined);
+        }
+    }, [systemMessage, textTooLongMessage]);
     useEffect(() => {
         setSendBoxError((prev) => {
             const errors = [];

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"RTESendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RTESendBoxErrorsProps {\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RTESendBoxErrors = (props: RTESendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadsPendingError) {\n        errors.push(fileUploadsPendingError);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadError) {\n        errors.push(fileUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(file-sharing) */ fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}
+{"version":3,"file":"RTESendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAwB,MAAM,oBAAoB,CAAC;AAc3E;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM;IACJ,+CAA+C;IAC/C,eAAe;IACf,+CAA+C;IAC/C,uBAAuB,EACvB,aAAa,EACb,kBAAkB,EACnB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,eAAe,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9D,eAAe,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,kBAAkB,KAAK,SAAS,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;YACxE,CAAC,aAAa,KAAK,SAAS,IAAI,cAAc,CAAC,aAAa,CAAC,CAAC,EAC9D,CAAC;YACD,eAAe,CAAC,SAAS,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE;YACvB,MAAM,MAAM,GAA2B,EAAE,CAAC;YAC1C,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;YACD,+CAA+C;YAC/C,IAAI,uBAAuB,EAAE,CAAC;gBAC5B,MAAM,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YACvC,CAAC;YACD,+CAA+C;YAC/C,IAAI,eAAe,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/B,CAAC;YACD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACxB,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,+BAA+B;YAC/B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACtE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE;QACD,+CAA+C,CAAC,eAAe;QAC/D,+CAA+C,CAAC,uBAAuB;KACxE,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,IAAI,aAAa,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;YACpD,eAAe,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,oBAAC,eAAe,IACd,KAAK,EAAE,YAAY,EACnB,cAAc;QACZ,mCAAmC;QACnC,aAAa,KAAK,SAAS,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,MAAK,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,EAEhG,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAe,EAAW,EAAE;IAClD,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RTESendBoxErrorsProps {\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RTESendBoxErrors = (props: RTESendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadsPendingError) {\n        errors.push(fileUploadsPendingError);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadError) {\n        errors.push(fileUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(file-sharing) */ fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}

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

@@ -6,7 +6,7 @@ import { RichTextSendBoxStrings } from './RTESendBox';
  * @beta
  */
 export interface RichTextEditorProps {
-    content?: string;
+    initialContent?: string;
     onChange: (newValue?: string) => void;
     placeholderText?: string;
     strings: Partial<RichTextSendBoxStrings>;

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

@@ -1,22 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { ContentEdit, Watermark } from 'roosterjs-editor-plugins';
 import { Editor } from 'roosterjs-editor-core';
 import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';
-import { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
-import { useTheme } from '@fluentui/react';
+import { ribbonButtonStyle, ribbonOverflowButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
+import { useTheme } from '../../theming';
 import { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';
 import { isDarkThemed } from '../../theming/themeUtils';
+import { setBackgroundColor, setTextColor } from 'roosterjs-editor-api';
 /**
  * A component to wrap RoosterJS Rich Text Editor.
  *
  * @beta
  */
 export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText, strings } = props;
+    const { initialContent, onChange, placeholderText, strings } = props;
     const editor = useRef(null);
-    const [divComponent, setDivComponent] = useState(null);
     const theme = useTheme();
     useImperativeHandle(ref, () => {
         return {
@@ -28,26 +28,19 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         };
     }, []);
     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]);
-    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;
+            setTextColor(editor.current, theme.palette.neutralPrimary);
         }
-    }, [divComponent, theme]);
+    }, [theme]);
     const ribbonPlugin = React.useMemo(() => {
         return createRibbonPlugin();
     }, []);
     const editorCreator = useCallback((div, options) => {
         editor.current = new Editor(div, options);
-        setDivComponent(div);
         // Remove the background color of the editor
-        div.style.backgroundColor = 'transparent';
+        setBackgroundColor(editor.current, 'transparent');
         return editor.current;
     }, []);
     const plugins = useMemo(() => {
@@ -66,13 +59,14 @@ export const RichTextEditor = 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(Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
+        React.createElement(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

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/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 { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '@fluentui/react';\nimport { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';\nimport { RichTextSendBoxStrings } from './RTESendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorProps {\n  content?: string;\n  onChange: (newValue?: string) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { content, onChange, placeholderText, strings } = props;\n  const editor = useRef<IEditor | null>(null);\n  const [divComponent, setDivComponent] = useState<HTMLDivElement | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        }\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (content !== editor.current?.getContent()) {\n      editor.current?.setContent(content || '');\n    }\n  }, [content]);\n\n  useEffect(() => {\n    if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {\n      // Adjust color prop for the div component when theme is updated\n      // because doNotAdjustEditorColor is set for Rooster\n      divComponent.style.color = theme.palette.neutralPrimary;\n    }\n  }, [divComponent, theme]);\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    setDivComponent(div);\n    // Remove the background color of the editor\n    div.style.backgroundColor = 'transparent';\n    return editor.current;\n  }, []);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const placeholderPlugin = new Watermark(placeholderText || '');\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderText, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n      <Ribbon\n        styles={ribbonStyle()}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div>\n      {ribbon}\n      <Rooster\n        inDarkMode={isDarkThemed(theme)}\n        plugins={plugins}\n        className={richTextEditorStyle}\n        editorCreator={editorCreator}\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor={'blue'}\n        // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n        doNotAdjustEditorColor={true}\n      />\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';\nimport { RichTextSendBoxStrings } from './RTESendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { setBackgroundColor, setTextColor } from 'roosterjs-editor-api';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        }\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (editor.current !== null) {\n      // Adjust color prop for the div component when theme is updated\n      // because doNotAdjustEditorColor is set for Rooster\n      setTextColor(editor.current, theme.palette.neutralPrimary);\n    }\n  }, [theme]);\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    // Remove the background color of the editor\n    setBackgroundColor(editor.current, 'transparent');\n    return editor.current;\n  }, []);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const placeholderPlugin = new Watermark(placeholderText || '');\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderText, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n      <Ribbon\n        styles={ribbonStyle()}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div>\n      {ribbon}\n      <Rooster\n        initialContent={initialContent}\n        inDarkMode={isDarkThemed(theme)}\n        plugins={plugins}\n        className={richTextEditorStyle}\n        editorCreator={editorCreator}\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor={'blue'}\n        // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n        doNotAdjustEditorColor={true}\n      />\n    </div>\n  );\n});\n"]}

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

@@ -1,8 +1,12 @@
-import { IButtonStyles, ICommandBarStyles, Theme } from '@fluentui/react';
+import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, Theme } from '@fluentui/react';
 /**
  * @private
  */
 export declare const richTextEditorStyle: string;
+/**
+ * @private
+ */
+export declare const ribbonOverflowButtonStyle: (theme: Theme) => Partial<IContextualMenuStyles>;
 /**
  * @private
  */

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

@@ -16,97 +16,62 @@ export const richTextEditorStyle = mergeStyles({
 /**
  * @private
  */
-export const ribbonButtonStyle = (theme) => {
+export 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
+ */
+export 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
  */

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, Theme, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = mergeStyles({\n  border: 'none',\n  overflow: 'auto',\n  padding: '10px',\n  outline: 'none',\n  bottom: '0',\n  minHeight: '2.25rem',\n  maxHeight: '8.25rem'\n});\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootHovered: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootCheckedHovered: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootCheckedPressed: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootPressed: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootExpanded: {\n      backgroundColor: 'transparent',\n      selectors: {\n        // Icon's color doesn't work here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    },\n    rootExpandedHovered: {\n      backgroundColor: 'transparent',\n      selectors: {\n        //icon color is not working here because of the specificity\n        '.ms-Button-icon': {\n          color: theme.palette.themePrimary\n        },\n        '.ms-Button-menuIcon': {\n          color: theme.palette.themePrimary\n        }\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle = (): Partial<ICommandBarStyles> => {\n  return {\n    // Override for the default white color of the Ribbon component\n    root: { backgroundColor: 'transparent' }\n  };\n};\n"]}
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = mergeStyles({\n  border: 'none',\n  overflow: 'auto',\n  padding: '10px',\n  outline: 'none',\n  bottom: '0',\n  minHeight: '2.25rem',\n  maxHeight: '8.25rem'\n});\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '.ms-Button-icon': {\n        color: theme.palette.themePrimary\n      },\n      '.ms-Button-menuIcon': {\n        color: theme.palette.themePrimary\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme),\n    rootHovered: ribbonButtonRootStyles(theme),\n    rootCheckedHovered: ribbonButtonRootStyles(theme),\n    rootCheckedPressed: ribbonButtonRootStyles(theme),\n    rootPressed: ribbonButtonRootStyles(theme),\n    rootExpanded: ribbonButtonRootStyles(theme),\n    rootExpandedHovered: ribbonButtonRootStyles(theme)\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle = (): Partial<ICommandBarStyles> => {\n  return {\n    // Override for the default white color of the Ribbon component\n    root: { backgroundColor: 'transparent' }\n  };\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.14.0-alpha-202403010014",
+  "version": "1.14.0-alpha-202403020011",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -46,10 +46,11 @@
     "react-linkify": "^1.0.0-alpha",
     "react-use-draggable-scroll": "^0.4.7",
     "reselect": "^4.0.0",
-    "roosterjs-editor-core": "^8.54.0",
-    "roosterjs-editor-plugins": "^8.54.0",
-    "roosterjs-editor-types-compatible": "^8.54.0",
-    "roosterjs-react": "^8.54.0",
+    "roosterjs-editor-api": "^8.60.0",
+    "roosterjs-editor-core": "^8.60.0",
+    "roosterjs-editor-plugins": "^8.60.0",
+    "roosterjs-editor-types-compatible": "^8.60.0",
+    "roosterjs-react": "^8.55.0",
     "textarea-caret-ts": "^4.1.1",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.0"