@azure/communication-react 1.24.0-beta.1 → 1.24.0

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

@@ -1,221 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';
-import { toolbarButtonStyle, ribbonDividerStyle, ribbonOverflowButtonStyle, richTextToolbarStyle } from '../../styles/RichTextEditor.styles';
-import { useTheme } from '../../../theming';
-import { toggleBold, toggleItalic, toggleUnderline, toggleBullet, toggleNumbering, setIndentation, insertTable } from 'roosterjs-content-model-api';
-import { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';
-const MaxRowsNumber = 5;
-const MaxColumnsNumber = 5;
-/**
- * A component to display rich text toolbar.
- *
- * @beta
- */
-export const RichTextToolbar = (props) => {
-    const { plugin, strings } = props;
-    const theme = useTheme();
-    // need to re-render the buttons when format state changes
-    const [formatState, setFormatState] = React.useState(undefined);
-    useEffect(() => {
-        // update the format state on editor events
-        plugin.onFormatChanged = setFormatState;
-        // plugin editor ready event may happen before onFormatChanged is set
-        // call update format function to ensure the format state is set
-        plugin.updateFormat();
-    }, [plugin]);
-    const boldButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-bold-button',
-            key: 'RichTextToolbarBoldButton',
-            icon: 'RichTextBoldButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick(editor => {
-                    toggleBold(editor);
-                });
-            },
-            text: strings.richTextBoldTooltip,
-            checked: formatState !== undefined && formatState.isBold === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextBoldTooltip, theme]);
-    const italicButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-italic-button',
-            key: 'RichTextToolbarItalicButton',
-            icon: 'RichTextItalicButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick(editor => {
-                    toggleItalic(editor);
-                });
-            },
-            text: strings.richTextItalicTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isItalic) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextItalicTooltip, theme]);
-    const underlineButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-underline-button',
-            key: 'RichTextToolbarUnderlineButton',
-            icon: 'RichTextUnderlineButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick(editor => {
-                    toggleUnderline(editor);
-                });
-            },
-            text: strings.richTextUnderlineTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isUnderline) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);
-    const bulletListButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-bullet-list-button',
-            key: 'RichTextToolbarBulletListButton',
-            icon: 'RichTextBulletListButtonIcon',
-            onClick: () => {
-                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);
-                    // the bulleted list was added
-                    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
-                            });
-                        }, 50);
-                    }
-                });
-            },
-            text: strings.richTextBulletListTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isBullet) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);
-    const numberListButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-number-list-button',
-            key: 'RichTextToolbarNumberListButton',
-            icon: 'RichTextNumberListButtonIcon',
-            onClick: () => {
-                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);
-                    // the numbered list was added
-                    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
-                            });
-                        }, 50);
-                    }
-                });
-            },
-            text: strings.richTextNumberListTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);
-    const indentDecreaseButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-indent-decrease-button',
-            key: 'RichTextToolbarIndentDecreaseButton',
-            icon: 'RichTextIndentDecreaseButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick(editor => {
-                    setIndentation(editor, 'outdent');
-                });
-            },
-            text: strings.richTextDecreaseIndentTooltip,
-            canCheck: false,
-            theme: theme
-        });
-    }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);
-    const indentIncreaseButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-indent-increase-button',
-            key: 'RichTextToolbarIndentIncreaseButton',
-            icon: 'RichTextIndentIncreaseButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick(editor => {
-                    setIndentation(editor, 'indent');
-                });
-            },
-            text: strings.richTextIncreaseIndentTooltip,
-            canCheck: false,
-            theme: theme
-        });
-    }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);
-    const divider = useCallback((key) => {
-        return dividerCommandBarItem(theme, key);
-    }, [theme]);
-    const tableButton = useMemo(() => {
-        return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column, row) => {
-            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
-                // set focus to editor on next re-render
-                setTimeout(() => {
-                    editor.focus();
-                });
-            });
-        });
-    }, [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]);
-    const overflowButtonProps = useMemo(() => {
-        return {
-            ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,
-            styles: toolbarButtonStyle(theme),
-            menuProps: {
-                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 });
-};
-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`
-        'data-testid': dataTestId,
-        key: key,
-        iconProps: {
-            iconName: icon
-        },
-        onClick: onClick,
-        text: text,
-        ariaLabel: text,
-        iconOnly: true,
-        canCheck: canCheck,
-        buttonStyles: Object.assign({}, toolbarButtonStyle(theme)),
-        checked: checked,
-        disabled: disabled
-    };
-};
-const dividerCommandBarItem = (theme, key) => {
-    return {
-        key: key,
-        disabled: true,
-        // show the item correctly for the overflow menu
-        itemType: ContextualMenuItemType.Divider,
-        // this is still needed to remove checkmark icon space even though it is a divider
-        canCheck: false,
-        onRender: () => React.createElement(Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
-    };
-};
-//# sourceMappingURL=RichTextToolbar.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,7 +0,0 @@
-import type { ICommandBarItemProps, Theme } from '@fluentui/react';
-import { RichTextStrings } from '../../RichTextSendBox';
-/**
- * "Insert table" command bar item for the rich text toolbar
- */
-export declare const richTextInsertTableCommandBarItem: (theme: Theme, maxRowsNumber: number, maxColumnsNumber: number, strings: Partial<RichTextStrings>, onClick: (column: number, row: number) => void) => ICommandBarItemProps;
-//# sourceMappingURL=RichTextInsertTableCommandBarItem.d.ts.map

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

@@ -1,51 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { FocusZoneDirection } from '@fluentui/react';
-import { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';
-import { RichTextInsertTablePane } from './RichTextInsertTablePane';
-import { parseKey } from '../../../utils/RichTextTableUtils';
-import { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';
-/**
- * "Insert table" command bar item for the rich text toolbar
- */
-export const richTextInsertTableCommandBarItem = (theme, maxRowsNumber, maxColumnsNumber, strings, onClick) => {
-    return {
-        'data-testid': 'rich-text-toolbar-insert-table-button',
-        key: 'RichTextToolbarInsertTableButton',
-        text: strings.richTextInsertTableTooltip,
-        ariaLabel: strings.richTextInsertTableTooltip,
-        // hide the chevron icon
-        menuIconProps: {
-            hidden: true
-        },
-        onRenderIcon: () => {
-            return React.createElement(RichTextToolbarTableIcon, null);
-        },
-        buttonStyles: toolbarTableButtonStyle(theme),
-        canCheck: false,
-        iconOnly: true,
-        subMenuProps: {
-            calloutProps: {
-                isBeakVisible: false
-            },
-            shouldFocusOnMount: true,
-            className: insertTableMenuTablePane,
-            focusZoneProps: {
-                direction: FocusZoneDirection.bidirectional
-            },
-            items: [{
-                    key: 'RichTextToolbarInsertTableMenu',
-                    text: strings.richTextInsertTableMenuTitle,
-                    canCheck: false,
-                    onRender: (item) => {
-                        return React.createElement(RichTextInsertTablePane, { item: item, onClick: key => {
-                                const { row, column } = parseKey(key);
-                                onClick(column, row);
-                            }, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber });
-                    }
-                }]
-        }
-    };
-};
-//# sourceMappingURL=RichTextInsertTableCommandBarItem.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { IContextualMenuItem } from '@fluentui/react';
-interface RichTextInsertTablePaneProps {
-    item: IContextualMenuItem;
-    onClick: (key: string) => void;
-    maxRowsNumber: number;
-    maxColumnsNumber: number;
-}
-/**
- * @private
- * Component for the insert table pane
- */
-export declare const RichTextInsertTablePane: (props: RichTextInsertTablePaneProps) => JSX.Element;
-export {};
-//# sourceMappingURL=RichTextInsertTablePane.d.ts.map

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

@@ -1,64 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useMemo } from 'react';
-import { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';
-import { insertTableMenuCellButtonSelectedStyles, insertTableMenuCellButtonStyles, insertTableMenuFocusZone, insertTableMenuTitleStyles } from '../../../styles/RichTextEditor.styles';
-import { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';
-import { useTheme } from '../../../../theming';
-// This file uses RoosterJS React package implementation with updates to UI components and styles.
-const RowColumnInitialValue = 0;
-/**
- * @private
- * Component for the insert table pane
- */
-export const RichTextInsertTablePane = (props) => {
-    const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
-    const [column, setColumn] = React.useState(RowColumnInitialValue);
-    const [row, setRow] = React.useState(RowColumnInitialValue);
-    const theme = useTheme();
-    const updateSize = React.useCallback((target) => {
-        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) {
-                setColumn(column);
-                setRow(row);
-            }
-        }
-    }, [maxColumnsNumber, maxRowsNumber]);
-    const onMouseEnter = React.useCallback((e) => {
-        updateSize(e.target);
-    }, [updateSize]);
-    const onTouchStart = React.useCallback((e) => {
-        updateSize(e.target);
-    }, [updateSize]);
-    const onClickButton = React.useCallback(() => {
-        onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));
-    }, [row, column, onClick]);
-    const items = React.useMemo(() => {
-        var _a;
-        const items = [];
-        for (let i = 0; i < maxRowsNumber; i++) {
-            for (let j = 0; j < maxColumnsNumber; j++) {
-                const key = `cell_${i}_${j}`;
-                const isSelected = j <= column && i <= row;
-                items.push(React.createElement("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((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
-            }
-        }
-        return items;
-    }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, onTouchStart, item.text]);
-    const text = useMemo(() => {
-        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,
-        React.createElement("div", { className: insertTableMenuTitleStyles }, text),
-        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()}`);
-};
-const formatRowColumnText = (value) => {
-    return value + 1;
-};
-//# sourceMappingURL=RichTextInsertTablePane.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-/**
- * Renders the icon component for the insert table button in the rich text editor toolbar.
- */
-export declare const RichTextToolbarTableIcon: () => JSX.Element;
-//# sourceMappingURL=RichTextToolbarTableIcon.d.ts.map

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

@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-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,
-        React.createElement(Icon, { iconName: "RichTextInsertTableFilledIcon", className: 'ribbon-table-button-filled-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 +0,0 @@
-{"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/SendBoxErrorBar.d.ts

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-/**
- * @beta
- * Error bar type for {@link SendBoxErrorBarError}
- */
-export declare enum SendBoxErrorBarType {
-    /** Info styled MessageBar */
-    info = 0,
-    /** Error styled MessageBar */
-    error = 1,
-    /** Blocked styled MessageBar */
-    blocked = 2,
-    /** SevereWarning styled MessageBar */
-    severeWarning = 3,
-    /** Success styled MessageBar */
-    success = 4,
-    /** Warning styled MessageBar */
-    warning = 5
-}
-/**
- * @beta
- * Error to be displayed to the user in an error bar above sendbox.
- */
-export interface SendBoxErrorBarError {
-    /** Error Message to be displayed */
-    message: string;
-    /**
-     * Unix Timestamp. Preferred generation using `Date.now()`
-     */
-    timestamp: number;
-    /**
-     * ErrorBar type. Defaults to `warning`.
-     */
-    errorBarType?: SendBoxErrorBarType;
-}
-/**
- * @private
- */
-export interface SendBoxErrorBarProps {
-    /** Error to render */
-    error?: SendBoxErrorBarError;
-    /**
-     * Automatically dismisses the error bar after the specified delay in ms.
-     * Example: `10 * 1000` would be 10 seconds
-     */
-    dismissAfterMs?: number;
-    /**
-     * Callback to invoke when the error bar is dismissed
-     */
-    onDismiss?: () => void;
-}
-/**
- * @private
- */
-export declare const SendBoxErrorBar: (props: SendBoxErrorBarProps) => JSX.Element;
-//# sourceMappingURL=SendBoxErrorBar.d.ts.map

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

@@ -1,75 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { MessageBar } from '@fluentui/react';
-import { MessageBarType } from '@fluentui/react';
-import React, { useEffect } from 'react';
-import { useMemo } from 'react';
-import { useLocale } from '../localization';
-/**
- * @beta
- * Error bar type for {@link SendBoxErrorBarError}
- */
-export var SendBoxErrorBarType;
-(function (SendBoxErrorBarType) {
-    /** Info styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["info"] = 0] = "info";
-    /** Error styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["error"] = 1] = "error";
-    /** Blocked styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["blocked"] = 2] = "blocked";
-    /** SevereWarning styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["severeWarning"] = 3] = "severeWarning";
-    /** Success styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["success"] = 4] = "success";
-    /** Warning styled MessageBar */
-    SendBoxErrorBarType[SendBoxErrorBarType["warning"] = 5] = "warning";
-})(SendBoxErrorBarType || (SendBoxErrorBarType = {}));
-/**
- * @private
- */
-export const SendBoxErrorBar = (props) => {
-    const { error, dismissAfterMs, onDismiss } = props;
-    const strings = useLocale().strings.errorBar;
-    const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message);
-    // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const timeoutRef = React.useRef();
-    React.useEffect(() => {
-        setErrorMessage(error === null || error === void 0 ? void 0 : error.message);
-    }, [error]);
-    useEffect(() => {
-        if (error && dismissAfterMs !== undefined) {
-            timeoutRef.current = setTimeout(() => {
-                setErrorMessage(undefined);
-                onDismiss && onDismiss();
-            }, dismissAfterMs);
-        }
-        return () => {
-            timeoutRef.current && clearTimeout(timeoutRef.current);
-        };
-    }, [dismissAfterMs, onDismiss, error]);
-    const messageBarType = useMemo(() => {
-        switch (error === null || error === void 0 ? void 0 : error.errorBarType) {
-            case SendBoxErrorBarType.info:
-                return MessageBarType.info;
-            case SendBoxErrorBarType.error:
-                return MessageBarType.error;
-            case SendBoxErrorBarType.blocked:
-                return MessageBarType.blocked;
-            case SendBoxErrorBarType.severeWarning:
-                return MessageBarType.severeWarning;
-            case SendBoxErrorBarType.success:
-                return MessageBarType.success;
-            case SendBoxErrorBarType.warning:
-            default:
-                return MessageBarType.warning;
-        }
-    }, [error]);
-    if (errorMessage) {
-        return React.createElement(MessageBar, { role: "alert", "aria-label": errorMessage, "data-testid": 'send-box-message-bar', messageBarType: messageBarType, isMultiline: true, key: (error === null || error === void 0 ? void 0 : error.errorBarType) || SendBoxErrorBarType.warning, onDismiss: onDismiss, dismissButtonAriaLabel: strings.dismissButtonAriaLabel }, errorMessage);
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
-};
-//# sourceMappingURL=SendBoxErrorBar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar } from '@fluentui/react';\nimport { MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useMemo } from 'react';\nimport { useLocale } from '../localization';\n/**\n * @beta\n * Error bar type for {@link SendBoxErrorBarError}\n */\nexport enum SendBoxErrorBarType {\n  /** Info styled MessageBar */\n  info = 0,\n  /** Error styled MessageBar */\n  error = 1,\n  /** Blocked styled MessageBar */\n  blocked = 2,\n  /** SevereWarning styled MessageBar */\n  severeWarning = 3,\n  /** Success styled MessageBar */\n  success = 4,\n  /** Warning styled MessageBar */\n  warning = 5,\n}\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n  /**\n   * ErrorBar type. Defaults to `warning`.\n   */\n  errorBarType?: SendBoxErrorBarType;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const {\n    error,\n    dismissAfterMs,\n    onDismiss\n  } = props;\n  const strings = useLocale().strings.errorBar;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n  const messageBarType = useMemo(() => {\n    switch (error?.errorBarType) {\n      case SendBoxErrorBarType.info:\n        return MessageBarType.info;\n      case SendBoxErrorBarType.error:\n        return MessageBarType.error;\n      case SendBoxErrorBarType.blocked:\n        return MessageBarType.blocked;\n      case SendBoxErrorBarType.severeWarning:\n        return MessageBarType.severeWarning;\n      case SendBoxErrorBarType.success:\n        return MessageBarType.success;\n      case SendBoxErrorBarType.warning:\n      default:\n        return MessageBarType.warning;\n    }\n  }, [error]);\n  if (errorMessage) {\n    return <MessageBar role=\"alert\" aria-label={errorMessage} data-testid={'send-box-message-bar'} messageBarType={messageBarType} isMultiline={true} key={error?.errorBarType || SendBoxErrorBarType.warning} onDismiss={onDismiss} dismissButtonAriaLabel={strings.dismissButtonAriaLabel}>\n        {errorMessage}\n      </MessageBar>;\n  } else {\n    return <></>;\n  }\n};"]}

package/dist/dist-esm/react-components/src/components/SendBoxErrors.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { SendBoxErrorBarError } from './SendBoxErrorBar';
-/**
- * @private
- */
-export interface SendBoxErrorsProps {
-    attachmentUploadsPendingError?: SendBoxErrorBarError;
-    attachmentProgressError?: SendBoxErrorBarError;
-}
-/**
- * @private
- */
-export declare const SendBoxErrors: (props: SendBoxErrorsProps) => JSX.Element;
-//# sourceMappingURL=SendBoxErrors.d.ts.map