npm - @azure/communication-react - Versions diffs - 1.22.0-alpha-202412070017 → 1.22.0-beta.1 - Mend

@azure/communication-react 1.22.0-alpha-202412070017 → 1.22.0-beta.1

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

Files changed (1190) hide show

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

@@ -31,7 +31,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarBoldButton',
             icon: 'RichTextBoldButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleBold(editor);
                 });
             },
@@ -46,7 +46,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarItalicButton',
             icon: 'RichTextItalicButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleItalic(editor);
                 });
             },
@@ -61,7 +61,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarUnderlineButton',
             icon: 'RichTextUnderlineButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     toggleUnderline(editor);
                 });
             },
@@ -76,7 +76,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);
@@ -84,7 +84,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);
                     }
                 });
@@ -100,7 +103,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);
@@ -108,7 +111,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);
                     }
                 });
@@ -124,7 +130,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentDecreaseButton',
             icon: 'RichTextIndentDecreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'outdent');
                 });
             },
@@ -139,7 +145,7 @@ export const RichTextToolbar = (props) => {
             key: 'RichTextToolbarIndentIncreaseButton',
             icon: 'RichTextIndentIncreaseButtonIcon',
             onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
+                plugin.onToolbarButtonClick(editor => {
                     setIndentation(editor, 'indent');
                 });
             },
@@ -153,7 +159,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
@@ -165,49 +171,32 @@ 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)
             }
         };
     }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
-    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, "aria-label": strings.richTextToolbarAriaLabel }));
+    return React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps, "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 CHANGED Viewed

	@@ -1 +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 } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, 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 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 return (\n <CommandBar\n items={buttons}\n data-testid={'rich-text-editor-toolbar'}\n styles={richTextToolbarStyle}\n overflowButtonProps={overflowButtonProps}\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"]}
1	+ {"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 } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, 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 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 return <CommandBar items={buttons} data-testid={'rich-text-editor-toolbar'} styles={richTextToolbarStyle} overflowButtonProps={overflowButtonProps} 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["~~../../../../../../../../../~~react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,~~EACL~~,uCAAuC,~~EACvC~~,+BAA+B,~~EAC/B~~,wBAAwB,~~EACxB~~,0BAA0B,~~EAC3B~~,MAAM,uCAAuC,CAAC;~~AAC/C~~,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,kGAAkG;AAClG,MAAM,qBAAqB,GAAG,CAAC,CAAC;~~AAShC~~;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,~~EAAE~~,IAAI,~~EAAE~~,OAAO,~~EAAE~~,gBAAgB,~~EAAE~~,aAAa,~~EAAE~~,GAAG,KAAK,CAAC;~~IACjE~~,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAC5D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;~~IAEzB~~,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,~~CAClC~~,CAAC,MAAoB,EAAE,EAAE;~~QACvB~~,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACpG,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;~~YAEzC~~,~~IACE~~,MAAM,IAAI,qBAAqB~~;gBAC/B~~,MAAM,GAAG,gBAAgB~~;gBACzB~~,GAAG,IAAI,qBAAqB~~;gBAC5B~~,GAAG,GAAG,aAAa,~~EACnB~~,CAAC;~~gBACD~~,SAAS,CAAC,MAAM,CAAC,CAAC;gBAClB,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC,~~EACD~~,CAAC,gBAAgB,EAAE,aAAa,CAAC,~~CAClC~~,CAAC;~~IAEF~~,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,~~CACpC~~,CAAC,CAAsC,EAAE,EAAE;~~QACzC~~,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IACtC,CAAC,~~EACD~~,CAAC,UAAU,CAAC,~~CACb~~,CAAC;~~IAEF~~,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,~~CACpC~~,CAAC,CAAsC,EAAE,EAAE;~~QACzC~~,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IACtC,CAAC,~~EACD~~,CAAC,UAAU,CAAC,~~CACb~~,CAAC;~~IAEF~~,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,OAAO,CAAC,SAAS,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAE3B~~,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QAC/B,MAAM,KAAK,GAAkB,EAAE,CAAC;~~QAEhC~~,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC1C,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,MAAM,UAAU,GAAG,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC;gBAC3C,KAAK,CAAC,IAAI,~~CACR~~,~~gCACE~~,SAAS,EAAE,WAAW,~~CACpB~~,+BAA+B,CAAC,KAAK,CAAC,~~EACtC~~,UAAU,CAAC,CAAC,CAAC,uCAAuC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,~~CACxE~~,~~EACD~~,OAAO,EAAE,aAAa,~~EACtB~~,GAAG,EAAE,GAAG,~~EACR~~,EAAE,EAAE,GAAG,~~iBACM~~,CAAC,~~cACJ~~,CAAC,~~uBACQ~~,IAAI,~~EACvB~~,YAAY,EAAE,YAAY,~~EAC1B~~,YAAY,EAAE,YAAY,~~gBACd~~,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,~~iBAC1E~~,GAAG,~~GAChB~~,~~CACH~~,CAAC;~~YACJ~~,CAAC;QACH,CAAC;~~QAED~~,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;~~IAEhH~~,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;;QACxB,OAAO,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;~~IAE7B~~,OAAO~~,CACL~~;~~QACE~~,6BAAK,SAAS,EAAE,0BAA0B,IAAG,IAAI,CAAO;QACxD,oBAAC,SAAS,~~IACR~~,sBAAsB,EAAE,QAAQ,qBAAqB,IAAI,qBAAqB,EAAE,~~EAChF~~,SAAS,EAAE,kBAAkB,CAAC,aAAa,~~EAC3C~~,sBAAsB,EAAE,UAAU,~~EAClC~~,SAAS,EAAE,wBAAwB,CAAC,KAAK,CAAC,~~IAEzC~~,KAAK,CACI,CACR,~~CACP,~~CAAC;~~AACJ~~,CAAC,CAAC;~~AAEF~~,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,MAAc,EAAU,EAAE;IACvE,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,sBAAsB,EAAE,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAC/F,CAAC,CAAC;~~AAEF~~,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAU,EAAE;IACpD,OAAO,KAAK,GAAG,CAAC,CAAC;AACnB,CAAC,CAAC","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~~"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"]}
1	+ {"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 CHANGED Viewed

@@ -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.palette.themePrimary,
         color: DefaultPalette.white,
-        ':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,12 +38,17 @@ const screenshareButtonStyles = (theme) => ({
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':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
         }
     },
-    labelChecked: { color: DefaultPalette.white }
+    labelChecked: {
+        color: DefaultPalette.white
+    }
 });
 //# sourceMappingURL=ScreenShareButton.js.map

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

	@@ -1 +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,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,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,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,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,YAAY,EAAE,~~EAAE,~~KAAK,EAAE,cAAc,CAAC,KAAK~~,EAAE~~;~~CAC9C~~,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.palette.themePrimary,\n color: DefaultPalette.white,\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.palette.themePrimary,\n color: DefaultPalette.white,\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 labelChecked: { color: DefaultPalette.white }\n})~~;\n~~"]}
1	+ {"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,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,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,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,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,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;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.palette.themePrimary,\n color: DefaultPalette.white,\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.palette.themePrimary,\n color: DefaultPalette.white,\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 labelChecked: {\n color: DefaultPalette.white\n }\n});"]}