@azure/communication-react 1.20.0 → 1.21.0-alpha-202410180016

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

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

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

@@ -0,0 +1,6 @@
+/// <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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +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"]}

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

@@ -18,18 +18,15 @@ 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, { className: mergeStyles(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, { className: mergeStyles(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
@@ -38,17 +35,12 @@ 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

@@ -1 +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,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,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,SAAS,EAAE,WAAW,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, mergeStyles, 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} className={mergeStyles(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});"]}
+{"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,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,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,SAAS,EAAE,WAAW,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, mergeStyles, 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      className={mergeStyles(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"]}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
+import { AttachmentMetadataInProgress, MessageOptions } from "../../../acs-ui-common/src";
+import { MentionLookupOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link Sendbox}.
  *
@@ -36,6 +38,26 @@ export interface SendBoxStrings {
      * Aria label for send message button
      */
     sendButtonAriaLabel: string;
+    /**
+     * Error message indicating that all attachment uploads are not complete.
+     */
+    attachmentUploadsPendingError: string;
+    /**
+     * Aria label to notify user when focus is on cancel attachment upload button.
+     */
+    removeAttachment: string;
+    /**
+     * Aria label to notify user attachment uploading starts.
+     */
+    uploading: string;
+    /**
+     * Aria label to notify user attachment is uploaded.
+     */
+    uploadCompleted: string;
+    /**
+     * Aria label to notify user more attachment action menu.
+     */
+    attachmentMoreMenu: string;
 }
 /**
  * Props for {@link SendBox}.
@@ -55,7 +77,12 @@ export interface SendBoxProps {
     /**
      * Optional override behavior on send button click
      */
-    onSendMessage?: (content: string) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    /**
+     * Optional props needed to lookup suggestions in the mention scenario.
+     * @beta
+     */
+    mentionLookupOptions?: MentionLookupOptions;
     /**
      * Optional callback called when user is typing
      */
@@ -92,6 +119,25 @@ export interface SendBoxProps {
      * When undefined nothing has focus on render
      */
     autoFocus?: 'sendBoxTextField';
+    /**
+     * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand
+     * vertically to accommodate the uploaded attachments. Attachment uploads will
+     * be rendered below the text area in sendBox.
+     * @beta
+     */
+    onRenderAttachmentUploads?: () => JSX.Element;
+    /**
+     * Optional array of type {@link AttachmentMetadataInProgress}
+     * to render attachments being uploaded in the SendBox.
+     * @beta
+     */
+    attachments?: AttachmentMetadataInProgress[];
+    /**
+     * Optional callback to remove the attachment upload before sending by clicking on
+     * cancel icon.
+     * @beta
+     */
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
 }
 /**
  * Component for typing and sending messages.

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

@@ -3,12 +3,24 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
 import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { useV9CustomStyles } from './styles/SendBox.styles';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { SendBoxErrors } from './SendBoxErrors';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
  *
@@ -18,7 +30,11 @@ import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxBut
  * @public
  */
 export const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
+    /* @conditional-compile-remove(mention) */
+    mentionLookupOptions, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachments } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -26,6 +42,10 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const customV9Styles = useV9CustomStyles();
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
         // don't send a message when disabled
@@ -33,11 +53,27 @@ export const SendBox = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing-acs) */
+        setAttachmentUploadsPendingError(undefined);
+        /* @conditional-compile-remove(file-sharing-acs) */
+        if (hasIncompleteAttachmentUploads(attachments)) {
+            setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
+            return;
+        }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (sanitizeText(message).length > 0) {
-            onSendMessage && onSendMessage(message);
+        if (sanitizeText(message).length > 0 ||
+            /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {
+            onSendMessage &&
+                onSendMessage(message, 
+                /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                {
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    attachments: toAttachmentMetadata(attachments),
+                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                    type: 'text'
+                });
             setTextValue('');
             (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -54,10 +90,17 @@ export const SendBox = (props) => {
     const isSendBoxButtonDisabledValue = useMemo(() => {
         return isSendBoxButtonDisabled({
             hasContent: sanitizeText(textValue).length > 0,
+            /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
             hasError: !!errorMessage,
             disabled: !!disabled
         });
-    }, [disabled, errorMessage, textValue]);
+    }, [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachments,
+        disabled,
+        errorMessage,
+        textValue
+    ]);
     const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
@@ -65,30 +108,78 @@ export const SendBox = (props) => {
         isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [theme, isSendBoxButtonDisabledValue, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
-    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? onRenderIcon(isHover) : React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle }), [mergedSendIconStyle, onRenderIcon, textValue]);
+    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no attachments in sendBox
-    return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, {
-            overflow: 'visible'
-        } // This is needed for the mention popup to be visible
+    /* @conditional-compile-remove(file-sharing-acs) */
+    React.useEffect(() => {
+        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter((upload) => !upload.error).length)) {
+            setAttachmentUploadsPendingError(undefined);
+        }
+    }, [attachments]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const sendBoxErrorsProps = useMemo(() => {
+        var _a;
+        return {
+            attachmentUploadsPendingError: attachmentUploadsPendingError,
+            attachmentProgressError: (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
+        };
+    }, [attachments, attachmentUploadsPendingError]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const onRenderAttachmentUploads = useCallback(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter((upload) => !upload.error).length)) {
+            return null;
+        }
+        return props.onRenderAttachmentUploads ? (props.onRenderAttachmentUploads()) : (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme, className: customV9Styles.clearBackground },
+                React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
+                        removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
+                        uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
+                        uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted,
+                        attachmentMoreMenu: (_h = (_g = props.strings) === null || _g === void 0 ? void 0 : _g.attachmentMoreMenu) !== null && _h !== void 0 ? _h : localeStrings.attachmentMoreMenu
+                    }, disabled: disabled }))));
+    }, [
+        attachments,
+        props,
+        theme,
+        customV9Styles.clearBackground,
+        localeStrings.removeAttachment,
+        localeStrings.uploading,
+        localeStrings.uploadCompleted,
+        localeStrings.attachmentMoreMenu,
+        disabled
+    ]);
+    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
         ) },
+        /* @conditional-compile-remove(file-sharing-acs) */
+        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError
+                ? {
+                    message: sendBoxErrorsProps.attachmentProgressError.message,
+                    timestamp: Date.now()
+                }
+                : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             }) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
                     }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE },
-                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue }))));
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue })),
+            /* @conditional-compile-remove(file-sharing-acs) */
+            onRenderAttachmentUploads())));
 };
 //# sourceMappingURL=SendBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (sanitizeText(message).length > 0) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const isSendBoxButtonDisabledValue = useMemo(() => {\n    return isSendBoxButtonDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [disabled, errorMessage, textValue]);\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n    customSendIconStyle: styles?.sendMessageIcon\n  }), [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} disabled={isSendBoxButtonDisabledValue} />\n        </InputBoxComponent>\n        {}\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useV9CustomStyles } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n  isAttachmentUploadCompleted,\n  hasIncompleteAttachmentUploads,\n  toAttachmentMetadata\n} from './utils/SendBoxUtils';\nimport {\n  MAXIMUM_LENGTH_OF_MESSAGE,\n  isMessageTooLong,\n  sanitizeText,\n  isSendBoxButtonDisabled\n} from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: string;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Aria label to notify user more attachment action menu.\n   */\n  attachmentMoreMenu: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (\n    content: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    options?: MessageOptions\n  ) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded attachments. Attachment uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render attachments being uploaded in the SendBox.\n   * @beta\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const customV9Styles = useV9CustomStyles();\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing-acs) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing-acs) */\n    if (hasIncompleteAttachmentUploads(attachments)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)\n    ) {\n      onSendMessage &&\n        onSendMessage(\n          message,\n          /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */\n          {\n            /* @conditional-compile-remove(file-sharing-acs) */\n            attachments: toAttachmentMetadata(attachments),\n            /* @conditional-compile-remove(rich-text-editor-composite-support) */\n            type: 'text'\n          }\n        );\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const isSendBoxButtonDisabledValue = useMemo(() => {\n    return isSendBoxButtonDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads:\n        isAttachmentUploadCompleted(attachments),\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachments,\n    disabled,\n    errorMessage,\n    textValue\n  ]);\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      sendIconStyle({\n        theme,\n        isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  /* @conditional-compile-remove(file-sharing-acs) */\n  React.useEffect(() => {\n    if (!attachments?.filter((upload) => !upload.error).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [attachments]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentProgressError: attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    };\n  }, [attachments, attachmentUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    if (!attachments?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderAttachmentUploads ? (\n      props.onRenderAttachmentUploads()\n    ) : (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n          <_AttachmentUploadCards\n            attachments={attachments}\n            onCancelAttachmentUpload={props.onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n              uploading: props.strings?.uploading ?? localeStrings.uploading,\n              uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,\n              attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu\n            }}\n            disabled={disabled}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    attachments,\n    props,\n    theme,\n    customV9Styles.clearBackground,\n    localeStrings.removeAttachment,\n    localeStrings.uploading,\n    localeStrings.uploadCompleted,\n    localeStrings.attachmentMoreMenu,\n    disabled\n  ]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      {\n        /* @conditional-compile-remove(file-sharing-acs) */\n        <SendBoxErrors\n          attachmentProgressError={\n            sendBoxErrorsProps.attachmentProgressError\n              ? {\n                  message: sendBoxErrorsProps.attachmentProgressError.message,\n                  timestamp: Date.now()\n                }\n              : undefined\n          }\n          attachmentUploadsPendingError={sendBoxErrorsProps.attachmentUploadsPendingError}\n        />\n      }\n      <Stack\n        className={borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: !!errorMessage,\n          disabled: !!disabled\n        })}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n            disabled={isSendBoxButtonDisabledValue}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing-acs) */\n          onRenderAttachmentUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,56 @@
+/// <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

@@ -0,0 +1,91 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { MessageBar } from '@fluentui/react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { MessageBarType } from '@fluentui/react';
+import React, { useEffect } from 'react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { useMemo } from 'react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @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;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    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]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    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', 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            messageBarType: messageBarType, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            isMultiline: true, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            key: (error === null || error === void 0 ? void 0 : error.errorBarType) || SendBoxErrorBarType.warning, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onDismiss: onDismiss, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            dismissButtonAriaLabel: strings.dismissButtonAriaLabel }, errorMessage));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+//# sourceMappingURL=SendBoxErrorBar.js.map