@azure/communication-react 1.25.0-alpha-202502280017 → 1.25.0-beta.1

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

@@ -32,7 +32,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarBoldButton',
             icon: 'RichTextBoldButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleBold(editor);
                 });
             },
@@ -47,7 +47,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarItalicButton',
             icon: 'RichTextItalicButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleItalic(editor);
                 });
             },
@@ -62,7 +62,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarUnderlineButton',
             icon: 'RichTextUnderlineButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleUnderline(editor);
                 });
             },
@@ -77,7 +77,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarBulletListButton',
             icon: 'RichTextBulletListButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     // check the format state to see if the bulleted list is already applied
                     const isBullet = formatState === null || formatState === void 0 ? void 0 : formatState.isBullet;
                     toggleBullet(editor);
@@ -85,7 +85,10 @@ export const RichTextToolbar = (props) => {
                     if (!isBullet) {
                         setTimeout(() => {
                             // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });
+                            editor.announce({
+                                ariaLiveMode: 'polite',
+                                text: strings.richTextBulletedListAppliedAnnouncement
+                            });
                         }, 50);
                     }
                 });
@@ -101,7 +104,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarNumberListButton',
             icon: 'RichTextNumberListButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     // check the format state to see if the numbered list is already applied
                     const isNumbering = formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering;
                     toggleNumbering(editor);
@@ -109,7 +112,10 @@ export const RichTextToolbar = (props) => {
                     if (!isNumbering) {
                         // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
                         setTimeout(() => {
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });
+                            editor.announce({
+                                ariaLiveMode: 'polite',
+                                text: strings.richTextNumberedListAppliedAnnouncement
+                            });
                         }, 50);
                     }
                 });
@@ -125,7 +131,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentDecreaseButton',
             icon: 'RichTextIndentDecreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'outdent');
                 });
             },
@@ -140,7 +146,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentIncreaseButton',
             icon: 'RichTextIndentIncreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'indent');
                 });
             },
@@ -154,7 +160,7 @@ export const RichTextToolbar = (props) => {
     }, [theme]);
     const tableButton = useMemo(() => {
         return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column, row) => {
-            plugin.onToolbarButtonClick((editor) => {
+            plugin.onToolbarButtonClick(editor => {
                 //add format
                 insertTable(editor, column, row);
                 // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu
@@ -166,35 +172,15 @@ export const RichTextToolbar = (props) => {
         });
     }, [plugin, strings, theme]);
     const buttons = useMemo(() => {
-        return [
-            boldButton,
-            italicButton,
-            underlineButton,
-            divider('RichTextRibbonTextFormatDivider'),
-            bulletListButton,
-            numberListButton,
-            indentDecreaseButton,
-            indentIncreaseButton,
-            divider('RichTextRibbonTableDivider'),
-            tableButton
-        ];
-    }, [
-        boldButton,
-        italicButton,
-        underlineButton,
-        divider,
-        bulletListButton,
-        numberListButton,
-        indentDecreaseButton,
-        indentIncreaseButton,
-        tableButton
-    ]);
+        return [boldButton, italicButton, underlineButton, divider('RichTextRibbonTextFormatDivider'), bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, divider('RichTextRibbonTableDivider'), tableButton];
+    }, [boldButton, italicButton, underlineButton, divider, bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, tableButton]);
     const overflowButtonProps = useMemo(() => {
         return {
             ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,
             styles: toolbarButtonStyle(theme),
             menuProps: {
-                items: [], // CommandBar will determine items rendered in overflow
+                items: [],
+                // CommandBar will determine items rendered in overflow
                 isBeakVisible: false,
                 styles: ribbonOverflowButtonStyle(theme)
             }
@@ -207,15 +193,18 @@ export const RichTextToolbar = (props) => {
             (_a = commandBarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, 25);
     }, []);
-    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, componentRef: commandBarRef, "aria-label": strings.richTextToolbarAriaLabel }));
+    return React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, componentRef: commandBarRef, "aria-label": strings.richTextToolbarAriaLabel });
 };
 const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
     return {
         role: canCheck ? 'menuitemcheckbox' : 'menuitem',
-        'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`
+        'aria-checked': canCheck ? checked : undefined,
+        // `menuitem` role doesn't support `aria-checked`
         'data-testid': dataTestId,
         key: key,
-        iconProps: { iconName: icon },
+        iconProps: {
+            iconName: icon
+        },
         onClick: onClick,
         text: text,
         ariaLabel: text,

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, ICommandBar, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  const commandBarRef = useRef<ICommandBar>(null);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n    // plugin editor ready event may happen before onFormatChanged is set\n    // call update format function to ensure the format state is set\n    plugin.updateFormat();\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  useEffect(() => {\n    // delay focus to ensure the command bar is rendered\n    setTimeout(() => {\n      commandBarRef.current?.focus();\n    }, 25);\n  }, []);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n      componentRef={commandBarRef}\n      aria-label={strings.richTextToolbarAriaLabel}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\n    // show the item correctly for the overflow menu\n    itemType: ContextualMenuItemType.Divider,\n    // this is still needed to remove checkmark icon space even though it is a divider\n    canCheck: false,\n    onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n  };\n};\n"]}
+{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, ICommandBar, Theme } from '@fluentui/react';\nimport { toolbarButtonStyle, ribbonDividerStyle, ribbonOverflowButtonStyle, richTextToolbarStyle } from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport { toggleBold, toggleItalic, toggleUnderline, toggleBullet, toggleNumbering, setIndentation, insertTable } from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const {\n    plugin,\n    strings\n  } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n  const commandBarRef = useRef<ICommandBar>(null);\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n    // plugin editor ready event may happen before onFormatChanged is set\n    // call update format function to ensure the format state is set\n    plugin.updateFormat();\n  }, [plugin]);\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({\n                ariaLiveMode: 'polite',\n                text: strings.richTextBulletedListAppliedAnnouncement\n              });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({\n                ariaLiveMode: 'polite',\n                text: strings.richTextNumberedListAppliedAnnouncement\n              });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick(editor => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n  const divider = useCallback((key: string) => {\n    return dividerCommandBarItem(theme, key);\n  }, [theme]);\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column: number, row: number) => {\n      plugin.onToolbarButtonClick(editor => {\n        //add format\n        insertTable(editor, column, row);\n        // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n        // set focus to editor on next re-render\n        setTimeout(() => {\n          editor.focus();\n        });\n      });\n    });\n  }, [plugin, strings, theme]);\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [boldButton, italicButton, underlineButton, divider('RichTextRibbonTextFormatDivider'), bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, divider('RichTextRibbonTableDivider'), tableButton];\n  }, [boldButton, italicButton, underlineButton, divider, bulletListButton, numberListButton, indentDecreaseButton, indentIncreaseButton, tableButton]);\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [],\n        // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n  useEffect(() => {\n    // delay focus to ensure the command bar is rendered\n    setTimeout(() => {\n      commandBarRef.current?.focus();\n    }, 25);\n  }, []);\n  return <CommandBar items={buttons} data-testid={'rich-text-editor-toolbar'} styles={richTextToolbarStyle} overflowButtonProps={overflowButtonProps} componentRef={commandBarRef} aria-label={strings.richTextToolbarAriaLabel} />;\n};\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined,\n    // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: {\n      iconName: icon\n    },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\n    // show the item correctly for the overflow menu\n    itemType: ContextualMenuItemType.Divider,\n    // this is still needed to remove checkmark icon space even though it is a divider\n    canCheck: false,\n    onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.js

@@ -26,23 +26,25 @@ export const richTextInsertTableCommandBarItem = (theme, maxRowsNumber, maxColum
         canCheck: false,
         iconOnly: true,
         subMenuProps: {
-            calloutProps: { isBeakVisible: false },
+            calloutProps: {
+                isBeakVisible: false
+            },
             shouldFocusOnMount: true,
             className: insertTableMenuTablePane,
-            focusZoneProps: { direction: FocusZoneDirection.bidirectional },
-            items: [
-                {
+            focusZoneProps: {
+                direction: FocusZoneDirection.bidirectional
+            },
+            items: [{
                     key: 'RichTextToolbarInsertTableMenu',
                     text: strings.richTextInsertTableMenuTitle,
                     canCheck: false,
                     onRender: (item) => {
-                        return (React.createElement(RichTextInsertTablePane, { item: item, onClick: (key) => {
+                        return React.createElement(RichTextInsertTablePane, { item: item, onClick: key => {
                                 const { row, column } = parseKey(key);
                                 onClick(column, row);
-                            }, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
+                            }, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber });
                     }
-                }
-            ]
+                }]
         }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextInsertTableCommandBarItem.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAC1G,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAC/C,KAAY,EACZ,aAAqB,EACrB,gBAAwB,EACxB,OAAiC,EACjC,OAA8C,EACxB,EAAE;IACxB,OAAO;QACL,aAAa,EAAE,uCAAuC;QACtD,GAAG,EAAE,kCAAkC;QACvC,IAAI,EAAE,OAAO,CAAC,0BAA0B;QACxC,SAAS,EAAE,OAAO,CAAC,0BAA0B;QAC7C,wBAAwB;QACxB,aAAa,EAAE;YACb,MAAM,EAAE,IAAI;SACb;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,OAAO,oBAAC,wBAAwB,OAAG,CAAC;QACtC,CAAC;QACD,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC;QAC5C,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE;YACZ,YAAY,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;YACtC,kBAAkB,EAAE,IAAI;YACxB,SAAS,EAAE,wBAAwB;YACnC,cAAc,EAAE,EAAE,SAAS,EAAE,kBAAkB,CAAC,aAAa,EAAE;YAC/D,KAAK,EAAE;gBACL;oBACE,GAAG,EAAE,gCAAgC;oBACrC,IAAI,EAAE,OAAO,CAAC,4BAA4B;oBAC1C,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,CAAC,IAAyB,EAAE,EAAE;wBACtC,OAAO,CACL,oBAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;gCACf,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;gCACtC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;4BACvB,CAAC,EACD,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;oBACJ,CAAC;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { FocusZoneDirection } from '@fluentui/react';\nimport type { ICommandBarItemProps, IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { parseKey } from '../../../utils/RichTextTableUtils';\nimport { RichTextStrings } from '../../RichTextSendBox';\nimport { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';\n\n/**\n * \"Insert table\" command bar item for the rich text toolbar\n */\nexport const richTextInsertTableCommandBarItem = (\n  theme: Theme,\n  maxRowsNumber: number,\n  maxColumnsNumber: number,\n  strings: Partial<RichTextStrings>,\n  onClick: (column: number, row: number) => void\n): ICommandBarItemProps => {\n  return {\n    'data-testid': 'rich-text-toolbar-insert-table-button',\n    key: 'RichTextToolbarInsertTableButton',\n    text: strings.richTextInsertTableTooltip,\n    ariaLabel: strings.richTextInsertTableTooltip,\n    // hide the chevron icon\n    menuIconProps: {\n      hidden: true\n    },\n    onRenderIcon: () => {\n      return <RichTextToolbarTableIcon />;\n    },\n    buttonStyles: toolbarTableButtonStyle(theme),\n    canCheck: false,\n    iconOnly: true,\n    subMenuProps: {\n      calloutProps: { isBeakVisible: false },\n      shouldFocusOnMount: true,\n      className: insertTableMenuTablePane,\n      focusZoneProps: { direction: FocusZoneDirection.bidirectional },\n      items: [\n        {\n          key: 'RichTextToolbarInsertTableMenu',\n          text: strings.richTextInsertTableMenuTitle,\n          canCheck: false,\n          onRender: (item: IContextualMenuItem) => {\n            return (\n              <RichTextInsertTablePane\n                item={item}\n                onClick={(key) => {\n                  const { row, column } = parseKey(key);\n                  onClick(column, row);\n                }}\n                maxColumnsNumber={maxColumnsNumber}\n                maxRowsNumber={maxRowsNumber}\n              />\n            );\n          }\n        }\n      ]\n    }\n  };\n};\n"]}
+{"version":3,"file":"RichTextInsertTableCommandBarItem.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAC1G,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAE,aAAqB,EAAE,gBAAwB,EAAE,OAAiC,EAAE,OAA8C,EAAwB,EAAE;IAC1N,OAAO;QACL,aAAa,EAAE,uCAAuC;QACtD,GAAG,EAAE,kCAAkC;QACvC,IAAI,EAAE,OAAO,CAAC,0BAA0B;QACxC,SAAS,EAAE,OAAO,CAAC,0BAA0B;QAC7C,wBAAwB;QACxB,aAAa,EAAE;YACb,MAAM,EAAE,IAAI;SACb;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,OAAO,oBAAC,wBAAwB,OAAG,CAAC;QACtC,CAAC;QACD,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC;QAC5C,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE;YACZ,YAAY,EAAE;gBACZ,aAAa,EAAE,KAAK;aACrB;YACD,kBAAkB,EAAE,IAAI;YACxB,SAAS,EAAE,wBAAwB;YACnC,cAAc,EAAE;gBACd,SAAS,EAAE,kBAAkB,CAAC,aAAa;aAC5C;YACD,KAAK,EAAE,CAAC;oBACN,GAAG,EAAE,gCAAgC;oBACrC,IAAI,EAAE,OAAO,CAAC,4BAA4B;oBAC1C,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,CAAC,IAAyB,EAAE,EAAE;wBACtC,OAAO,oBAAC,uBAAuB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE;gCACzD,MAAM,EACJ,GAAG,EACH,MAAM,EACP,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;gCAClB,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;4BACvB,CAAC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,GAAI,CAAC;oBAC1E,CAAC;iBACF,CAAC;SACH;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { FocusZoneDirection } from '@fluentui/react';\nimport type { ICommandBarItemProps, IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { parseKey } from '../../../utils/RichTextTableUtils';\nimport { RichTextStrings } from '../../RichTextSendBox';\nimport { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';\n\n/**\n * \"Insert table\" command bar item for the rich text toolbar\n */\nexport const richTextInsertTableCommandBarItem = (theme: Theme, maxRowsNumber: number, maxColumnsNumber: number, strings: Partial<RichTextStrings>, onClick: (column: number, row: number) => void): ICommandBarItemProps => {\n  return {\n    'data-testid': 'rich-text-toolbar-insert-table-button',\n    key: 'RichTextToolbarInsertTableButton',\n    text: strings.richTextInsertTableTooltip,\n    ariaLabel: strings.richTextInsertTableTooltip,\n    // hide the chevron icon\n    menuIconProps: {\n      hidden: true\n    },\n    onRenderIcon: () => {\n      return <RichTextToolbarTableIcon />;\n    },\n    buttonStyles: toolbarTableButtonStyle(theme),\n    canCheck: false,\n    iconOnly: true,\n    subMenuProps: {\n      calloutProps: {\n        isBeakVisible: false\n      },\n      shouldFocusOnMount: true,\n      className: insertTableMenuTablePane,\n      focusZoneProps: {\n        direction: FocusZoneDirection.bidirectional\n      },\n      items: [{\n        key: 'RichTextToolbarInsertTableMenu',\n        text: strings.richTextInsertTableMenuTitle,\n        canCheck: false,\n        onRender: (item: IContextualMenuItem) => {\n          return <RichTextInsertTablePane item={item} onClick={key => {\n            const {\n              row,\n              column\n            } = parseKey(key);\n            onClick(column, row);\n          }} maxColumnsNumber={maxColumnsNumber} maxRowsNumber={maxRowsNumber} />;\n        }\n      }]\n    }\n  };\n};"]}

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

@@ -20,10 +20,7 @@ export const RichTextInsertTablePane = (props) => {
         if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
             const column = parseInt(target.dataset.column);
             const row = parseInt(target.dataset.row);
-            if (column >= RowColumnInitialValue &&
-                column < maxColumnsNumber &&
-                row >= RowColumnInitialValue &&
-                row < maxRowsNumber) {
+            if (column >= RowColumnInitialValue && column < maxColumnsNumber && row >= RowColumnInitialValue && row < maxRowsNumber) {
                 setColumn(column);
                 setRow(row);
             }
@@ -54,9 +51,9 @@ export const RichTextInsertTablePane = (props) => {
         var _a;
         return formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(row), formatRowColumnText(column));
     }, [column, item.text, row]);
-    return (React.createElement("div", null,
+    return React.createElement("div", null,
         React.createElement("div", { className: insertTableMenuTitleStyles }, text),
-        React.createElement(FocusZone, { defaultTabbableElement: `cell_${RowColumnInitialValue}_${RowColumnInitialValue}`, direction: FocusZoneDirection.bidirectional, onActiveElementChanged: updateSize, className: insertTableMenuFocusZone(theme) }, items)));
+        React.createElement(FocusZone, { defaultTabbableElement: `cell_${RowColumnInitialValue}_${RowColumnInitialValue}`, direction: FocusZoneDirection.bidirectional, onActiveElementChanged: updateSize, className: insertTableMenuFocusZone(theme) }, items));
 };
 const formatText = (text, row, column) => {
     return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);

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

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

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.js

@@ -6,8 +6,8 @@ import { Icon, Stack } from '@fluentui/react';
  * Renders the icon component for the insert table button in the rich text editor toolbar.
  */
 export const RichTextToolbarTableIcon = () => {
-    return (React.createElement(Stack, null,
+    return React.createElement(Stack, null,
         React.createElement(Icon, { iconName: "RichTextInsertTableFilledIcon", className: 'ribbon-table-button-filled-icon' }),
-        React.createElement(Icon, { iconName: "RichTextInsertTableRegularIcon", className: 'ribbon-table-button-regular-icon' })));
+        React.createElement(Icon, { iconName: "RichTextInsertTableRegularIcon", className: 'ribbon-table-button-regular-icon' }));
 };
 //# sourceMappingURL=RichTextToolbarTableIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbarTableIcon.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAgB,EAAE;IACxD,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\n\n/**\n * Renders the icon component for the insert table button in the rich text editor toolbar.\n */\nexport const RichTextToolbarTableIcon = (): JSX.Element => {\n  return (\n    <Stack>\n      <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n      <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextToolbarTableIcon.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAgB,EAAE;IACxD,OAAO,oBAAC,KAAK;QACT,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\n\n/**\n * Renders the icon component for the insert table button in the rich text editor toolbar.\n */\nexport const RichTextToolbarTableIcon = (): JSX.Element => {\n  return <Stack>\n      <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n      <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n    </Stack>;\n};"]}

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

@@ -18,15 +18,18 @@ export const ScreenShareButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const styles = screenshareButtonStyles(theme);
-    const onRenderScreenShareOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
-    const onRenderScreenShareOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { styles: mergeStyleSets(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
+    const onRenderScreenShareOnIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" });
+    const onRenderScreenShareOffIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" });
+    return React.createElement(ControlBarButton, Object.assign({}, props, { styles: mergeStyleSets(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled }));
 };
 const screenshareButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.semanticColors.primaryButtonBackground,
         color: theme.semanticColors.primaryButtonText,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
+        ':focus::after': {
+            outlineColor: `${DefaultPalette.white} !important`
+        },
+        // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
@@ -35,7 +38,10 @@ const screenshareButtonStyles = (theme) => ({
     rootCheckedHovered: {
         background: theme.semanticColors.primaryButtonBackgroundHovered,
         color: theme.semanticColors.primaryButtonTextHovered,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
+        ':focus::after': {
+            outlineColor: `${DefaultPalette.white} !important`
+        },
+        // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
@@ -45,6 +51,8 @@ const screenshareButtonStyles = (theme) => ({
         background: theme.semanticColors.primaryButtonBackgroundPressed,
         color: theme.semanticColors.primaryButtonTextPressed
     },
-    labelChecked: { color: theme.semanticColors.primaryButtonText }
+    labelChecked: {
+        color: theme.semanticColors.primaryButtonText
+    }
 });
 //# sourceMappingURL=ScreenShareButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,cAAc,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,CACnD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAC7F,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,CACpD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB;QACxD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB;QAC7C,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;QACpD,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;KACrD;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE;CAChE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyleSets, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link ScreenShareButton} that can be overridden.\n *\n * @public\n */\nexport interface ScreenShareButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/**\n * Props for {@link ScreenShareButton}.\n *\n * @public\n */\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleScreenShare?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.screenShareButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const styles = screenshareButtonStyles(theme);\n\n  const onRenderScreenShareOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />\n  );\n  const onRenderScreenShareOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      styles={mergeStyleSets(styles, props.styles)}\n      onClick={props.onToggleScreenShare ?? props.onClick}\n      onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon}\n      onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'screenShareButtonLabel'}\n      disabled={props.disabled}\n    />\n  );\n};\n\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.semanticColors.primaryButtonBackground,\n    color: theme.semanticColors.primaryButtonText,\n    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.semanticColors.primaryButtonBackgroundHovered,\n    color: theme.semanticColors.primaryButtonTextHovered,\n    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedPressed: {\n    background: theme.semanticColors.primaryButtonBackgroundPressed,\n    color: theme.semanticColors.primaryButtonTextPressed\n  },\n  labelChecked: { color: theme.semanticColors.primaryButtonText }\n});\n"]}
+{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,cAAc,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAAC;IAClJ,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAAC;IACpJ,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AACvX,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB;QACxD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB;QAC7C,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;QACpD,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;KACrD;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB;KAC9C;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyleSets, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link ScreenShareButton} that can be overridden.\n *\n * @public\n */\nexport interface ScreenShareButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/**\n * Props for {@link ScreenShareButton}.\n *\n * @public\n */\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleScreenShare?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.screenShareButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = screenshareButtonStyles(theme);\n  const onRenderScreenShareOnIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />;\n  const onRenderScreenShareOffIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />;\n  return <ControlBarButton {...props} styles={mergeStyleSets(styles, props.styles)} onClick={props.onToggleScreenShare ?? props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon} strings={strings} labelKey={props.labelKey ?? 'screenShareButtonLabel'} disabled={props.disabled} />;\n};\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.semanticColors.primaryButtonBackground,\n    color: theme.semanticColors.primaryButtonText,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white} !important`\n    },\n    // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.semanticColors.primaryButtonBackgroundHovered,\n    color: theme.semanticColors.primaryButtonTextHovered,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white} !important`\n    },\n    // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedPressed: {\n    background: theme.semanticColors.primaryButtonBackgroundPressed,\n    color: theme.semanticColors.primaryButtonTextPressed\n  },\n  labelChecked: {\n    color: theme.semanticColors.primaryButtonText\n  }\n});"]}