@azure/communication-react 1.15.0-alpha-202404050013 → 1.15.0-alpha-202404060012

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C4BFVPuO.js');
+var index = require('./index-CeUuqiwO.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.15.0-alpha-202404050013';
+module.exports = '1.15.0-alpha-202404060012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.15.0-alpha-202404050013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.15.0-alpha-202404060012';\n"]}

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

@@ -18,7 +18,6 @@ import React from 'react';
 import { Announcer } from './Announcer';
 import { useEffect, useState, useMemo } from 'react';
 import { useLocaleAttachmentCardStringsTrampoline } from './utils/common';
-import { MoreHorizontal24Filled } from '@fluentui/react-icons';
 import { useAttachmentCardStyles, attachmentNameContainerClassName } from './styles/AttachmentCard.styles';
 /**
  * @internal
@@ -54,7 +53,7 @@ export const _AttachmentCard = (props) => {
     }, [progress, showProgressIndicator, attachment.name, uploadStartedString, uploadCompletedString]);
     return (React.createElement("div", { "data-is-focusable": true },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(Card, { className: attachmentCardStyles.root, size: "small", role: "listitem" },
+        React.createElement(Card, { className: attachmentCardStyles.root, size: "small", role: "listitem", appearance: "filled-alternative", "aria-label": attachment.name },
             React.createElement(CardHeader, { image: React.createElement(Icon, { "data-ui-id": 'attachmenttype-icon', iconName: getFileTypeIconProps({
                         extension: useMemo(() => {
                             var _a, _b;
@@ -63,11 +62,12 @@ export const _AttachmentCard = (props) => {
                         size: 24,
                         imageFileType: 'svg'
                     }).iconName }), header: React.createElement("div", { className: attachmentNameContainerClassName },
-                    React.createElement(Text, { title: attachment.name }, attachment.name)), action: getMenuItems(menuActions, attachment, onActionHandlerFailed) })),
+                    React.createElement(Text, { title: attachment.name }, attachment.name)), action: MappedMenuItems(menuActions, attachment, onActionHandlerFailed) })),
         isUploadComplete ? (React.createElement(CardFooter, null,
             React.createElement(ProgressBar, { thickness: "medium", value: progress, shape: "rounded" }))) : (React.createElement(React.Fragment, null, " "))));
 };
-const getMenuItems = (menuActions, attachment, handleOnClickError) => {
+const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
+    const localeStrings = useLocaleAttachmentCardStringsTrampoline();
     if (menuActions.length === 0) {
         return React.createElement(React.Fragment, null);
     }
@@ -81,7 +81,7 @@ const getMenuItems = (menuActions, attachment, handleOnClickError) => {
         } })) : (React.createElement(Toolbar, null,
         React.createElement(Menu, null,
             React.createElement(MenuTrigger, null,
-                React.createElement(ToolbarButton, { "aria-label": "More", icon: React.createElement(MoreHorizontal24Filled, null) })),
+                React.createElement(ToolbarButton, { icon: React.createElement(Icon, { iconName: "AttachmentMoreMenu", "aria-label": localeStrings.attachmentMoreMenu }) })),
             React.createElement(MenuPopover, null,
                 React.createElement(MenuList, null, menuActions.map((menuItem, index) => (React.createElement(MenuItem, { key: index, icon: menuItem.icon, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                         try {

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon\n} from '@fluentui/react';\nimport {\n  Card,\n  CardHeader,\n  Text,\n  Menu,\n  MenuTrigger,\n  ToolbarButton,\n  MenuPopover,\n  MenuItem,\n  MenuList,\n  Toolbar,\n  CardFooter,\n  ProgressBar\n} from '@fluentui/react-components';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState, useMemo } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from './utils/common';\nimport { AttachmentMetadata, AttachmentMenuAction } from '../types/Attachment';\nimport { MoreHorizontal24Filled } from '@fluentui/react-icons';\nimport { useAttachmentCardStyles, attachmentNameContainerClassName } from './styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n  /**\n   * Attachment details including name, extension, url, etc.\n   */\n  attachment: AttachmentMetadata;\n  /**\n   * An array of menu actions to be displayed in the attachment card.\n   */\n  menuActions: AttachmentMenuAction[];\n  /**\n   * Optional aria label strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional callback that runs if menu bar action onclick throws.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n}\n\n/**\n * @internal\n * A component for displaying an attachment card with attachment icon and progress bar.\n *\n * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).\n */\nexport const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {\n  const { attachment, menuActions, onActionHandlerFailed } = props;\n  const attachmentCardStyles = useAttachmentCardStyles();\n  const progress = useMemo(() => {\n    return attachment.progress;\n  }, [attachment.progress]);\n  const isUploadComplete = useMemo(() => {\n    return progress !== undefined && progress > 0 && progress < 1;\n  }, [progress]);\n\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, attachment.name, uploadStartedString, uploadCompletedString]);\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Card className={attachmentCardStyles.root} size=\"small\" role=\"listitem\">\n        <CardHeader\n          image={\n            <Icon\n              data-ui-id={'attachmenttype-icon'}\n              iconName={\n                getFileTypeIconProps({\n                  extension: useMemo((): string => {\n                    return attachment.extension ?? attachment.name.split('.').pop() ?? '';\n                  }, [attachment]),\n                  size: 24,\n                  imageFileType: 'svg'\n                }).iconName\n              }\n            />\n          }\n          header={\n            <div className={attachmentNameContainerClassName}>\n              <Text title={attachment.name}>{attachment.name}</Text>\n            </div>\n          }\n          action={getMenuItems(menuActions, attachment, onActionHandlerFailed)}\n        />\n      </Card>\n      {isUploadComplete ? (\n        <CardFooter>\n          <ProgressBar thickness=\"medium\" value={progress} shape=\"rounded\" />\n        </CardFooter>\n      ) : (\n        <> </>\n      )}\n    </div>\n  );\n};\n\nconst getMenuItems = (\n  menuActions: AttachmentMenuAction[],\n  attachment: AttachmentMetadata,\n  handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n  if (menuActions.length === 0) {\n    return <></>;\n  }\n  return menuActions.length === 1 ? (\n    <ToolbarButton\n      aria-label={menuActions[0].name}\n      icon={menuActions[0].icon}\n      onClick={() => {\n        try {\n          menuActions[0].onClick(attachment);\n        } catch (e) {\n          handleOnClickError?.((e as Error).message);\n        }\n      }}\n    />\n  ) : (\n    <Toolbar>\n      <Menu>\n        <MenuTrigger>\n          <ToolbarButton aria-label=\"More\" icon={<MoreHorizontal24Filled />} />\n        </MenuTrigger>\n        <MenuPopover>\n          <MenuList>\n            {menuActions.map((menuItem, index) => (\n              <MenuItem\n                key={index}\n                icon={menuItem.icon}\n                onClick={async () => {\n                  try {\n                    await menuItem.onClick(attachment);\n                  } catch (e) {\n                    handleOnClickError?.((e as Error).message);\n                  }\n                }}\n              >\n                {menuItem.name}\n              </MenuItem>\n            ))}\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n    </Toolbar>\n  );\n};\n"]}
+{"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon\n} from '@fluentui/react';\nimport {\n  Card,\n  CardHeader,\n  Text,\n  Menu,\n  MenuTrigger,\n  ToolbarButton,\n  MenuPopover,\n  MenuItem,\n  MenuList,\n  Toolbar,\n  CardFooter,\n  ProgressBar\n} from '@fluentui/react-components';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState, useMemo } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from './utils/common';\nimport { AttachmentMetadata, AttachmentMenuAction } from '../types/Attachment';\nimport { useAttachmentCardStyles, attachmentNameContainerClassName } from './styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n  /**\n   * Attachment details including name, extension, url, etc.\n   */\n  attachment: AttachmentMetadata;\n  /**\n   * An array of menu actions to be displayed in the attachment card.\n   */\n  menuActions: AttachmentMenuAction[];\n  /**\n   * Optional aria label strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n  /**\n   * Optional callback that runs if menu bar action onclick throws.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n}\n\n/**\n * @internal\n * A component for displaying an attachment card with attachment icon and progress bar.\n *\n * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).\n */\nexport const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {\n  const { attachment, menuActions, onActionHandlerFailed } = props;\n  const attachmentCardStyles = useAttachmentCardStyles();\n  const progress = useMemo(() => {\n    return attachment.progress;\n  }, [attachment.progress]);\n  const isUploadComplete = useMemo(() => {\n    return progress !== undefined && progress > 0 && progress < 1;\n  }, [progress]);\n\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, attachment.name, uploadStartedString, uploadCompletedString]);\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Card\n        className={attachmentCardStyles.root}\n        size=\"small\"\n        role=\"listitem\"\n        appearance=\"filled-alternative\"\n        aria-label={attachment.name}\n      >\n        <CardHeader\n          image={\n            <Icon\n              data-ui-id={'attachmenttype-icon'}\n              iconName={\n                getFileTypeIconProps({\n                  extension: useMemo((): string => {\n                    return attachment.extension ?? attachment.name.split('.').pop() ?? '';\n                  }, [attachment]),\n                  size: 24,\n                  imageFileType: 'svg'\n                }).iconName\n              }\n            />\n          }\n          header={\n            <div className={attachmentNameContainerClassName}>\n              <Text title={attachment.name}>{attachment.name}</Text>\n            </div>\n          }\n          action={MappedMenuItems(menuActions, attachment, onActionHandlerFailed)}\n        />\n      </Card>\n      {isUploadComplete ? (\n        <CardFooter>\n          <ProgressBar thickness=\"medium\" value={progress} shape=\"rounded\" />\n        </CardFooter>\n      ) : (\n        <> </>\n      )}\n    </div>\n  );\n};\n\nconst MappedMenuItems = (\n  menuActions: AttachmentMenuAction[],\n  attachment: AttachmentMetadata,\n  handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n\n  if (menuActions.length === 0) {\n    return <></>;\n  }\n  return menuActions.length === 1 ? (\n    <ToolbarButton\n      aria-label={menuActions[0].name}\n      icon={menuActions[0].icon}\n      onClick={() => {\n        try {\n          menuActions[0].onClick(attachment);\n        } catch (e) {\n          handleOnClickError?.((e as Error).message);\n        }\n      }}\n    />\n  ) : (\n    <Toolbar>\n      <Menu>\n        <MenuTrigger>\n          <ToolbarButton icon={<Icon iconName=\"AttachmentMoreMenu\" aria-label={localeStrings.attachmentMoreMenu} />} />\n        </MenuTrigger>\n        <MenuPopover>\n          <MenuList>\n            {menuActions.map((menuItem, index) => (\n              <MenuItem\n                key={index}\n                icon={menuItem.icon}\n                onClick={async () => {\n                  try {\n                    await menuItem.onClick(attachment);\n                  } catch (e) {\n                    handleOnClickError?.((e as Error).message);\n                  }\n                }}\n              >\n                {menuItem.name}\n              </MenuItem>\n            ))}\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n    </Toolbar>\n  );\n};\n"]}

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

@@ -12,6 +12,8 @@ export interface _AttachmentUploadCardsStrings {
     uploading: string;
     /** Aria label to notify user attachment is uploaded. */
     uploadCompleted: string;
+    /** Aria label to notify user more attachment action menu. */
+    attachmentMoreMenu: string;
 }
 /**
  * @internal

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,wCAAwC,EAAE,MAAM,gBAAgB,CAAC;AAoC1E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,uBAAuB,CAAC;IAClD,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,QAClB,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC;aAC/C,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;YAAC,OAAA,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;oBACX;wBACE,IAAI,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,QAAQ;wBACjD,IAAI,EAAE,CACJ,2CAAiB,4BAA4B,EAAE;4BAC7C,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;wBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;4BACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACrC,IAAI,CAAC;oCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;oCAChF,OAAO,EAAE,CAAC;gCACZ,CAAC;gCAAC,OAAO,CAAC,EAAE,CAAC;oCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gCAC/B,CAAC;4BACH,CAAC,CAAC,CAAC;wBACL,CAAC;qBACF;iBACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAA;SAAA,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { AttachmentMetadata } from '../types/Attachment';\nimport { useLocaleAttachmentCardStringsTrampoline } from './utils/common';\n\n/**\n * Strings of _AttachmentUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel attachment upload button. */\n  removeAttachment: string;\n  /** Aria label to notify user attachment uploading starts. */\n  uploading: string;\n  /** Aria label to notify user attachment is uploaded. */\n  uploadCompleted: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of active attachment uploads where each object has attibutes\n   * of a attachment upload like name, progress, errormessage etc.\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.activeAttachmentUploads;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n    },\n    [props.strings?.removeAttachment, localeStrings.removeAttachment]\n  );\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.uploadError)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={[\n                {\n                  name: props.strings?.removeAttachment ?? 'Remove',\n                  icon: (\n                    <div aria-label={removeAttachmentButtonString()}>\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>\n                  ),\n                  onClick: (attachment) => {\n                    return new Promise((resolve, reject) => {\n                      try {\n                        props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n                        resolve();\n                      } catch (e) {\n                        reject((e as Error).message);\n                      }\n                    });\n                  }\n                }\n              ]}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}
+{"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,wCAAwC,EAAE,MAAM,gBAAgB,CAAC;AAsC1E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,uBAAuB,CAAC;IAClD,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,QAClB,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC;aAC/C,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;YAAC,OAAA,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;oBACX;wBACE,IAAI,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,QAAQ;wBACjD,IAAI,EAAE,CACJ,2CAAiB,4BAA4B,EAAE;4BAC7C,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;wBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;4BACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACrC,IAAI,CAAC;oCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;oCAChF,OAAO,EAAE,CAAC;gCACZ,CAAC;gCAAC,OAAO,CAAC,EAAE,CAAC;oCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gCAC/B,CAAC;4BACH,CAAC,CAAC,CAAC;wBACL,CAAC;qBACF;iBACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAA;SAAA,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { AttachmentMetadata } from '../types/Attachment';\nimport { useLocaleAttachmentCardStringsTrampoline } from './utils/common';\n\n/**\n * Strings of _AttachmentUploadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentUploadCardsStrings {\n  /** Aria label to notify user when focus is on cancel attachment upload button. */\n  removeAttachment: string;\n  /** Aria label to notify user attachment uploading starts. */\n  uploading: string;\n  /** Aria label to notify user attachment is uploaded. */\n  uploadCompleted: string;\n  /** Aria label to notify user more attachment action menu. */\n  attachmentMoreMenu: string;\n}\n\n/**\n * @internal\n */\nexport interface AttachmentUploadCardsProps {\n  /**\n   * Optional array of active attachment uploads where each object has attibutes\n   * of a attachment upload like name, progress, errormessage etc.\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Optional arialabel strings for attachment upload cards\n   */\n  strings?: _AttachmentUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n  const attachments = props.activeAttachmentUploads;\n  const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n  const removeAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n    },\n    [props.strings?.removeAttachment, localeStrings.removeAttachment]\n  );\n\n  if (!attachments || attachments.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <_AttachmentCardGroup>\n      {attachments &&\n        attachments\n          .filter((attachment) => !attachment.uploadError)\n          .map((attachment) => (\n            <_AttachmentCard\n              attachment={attachment}\n              key={attachment.id}\n              menuActions={[\n                {\n                  name: props.strings?.removeAttachment ?? 'Remove',\n                  icon: (\n                    <div aria-label={removeAttachmentButtonString()}>\n                      <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n                    </div>\n                  ),\n                  onClick: (attachment) => {\n                    return new Promise((resolve, reject) => {\n                      try {\n                        props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n                        resolve();\n                      } catch (e) {\n                        reject((e as Error).message);\n                      }\n                    });\n                  }\n                }\n              ]}\n              strings={props.strings}\n            />\n          ))}\n    </_AttachmentCardGroup>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponentAsEditBox.d.ts → MyMessageComponents/ChatMessageComponentAsEditBox.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { MessageThreadStrings } from '../MessageThread';
-import { ChatMessage } from '../../types';
-import { AttachmentMetadata } from '../../types/Attachment';
-import { MentionLookupOptions } from '../MentionPopover';
+import { MessageThreadStrings } from '../../MessageThread';
+import { ChatMessage } from '../../../types';
+import { AttachmentMetadata } from '../../../types/Attachment';
+import { MentionLookupOptions } from '../../MentionPopover';
 /** @private */
 export type ChatMessageComponentAsEditBoxProps = {
     onCancel?: (messageId: string) => void;

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponentAsEditBox.js → MyMessageComponents/ChatMessageComponentAsEditBox.js}

@@ -3,19 +3,19 @@
 import { concatStyleSets, mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
-import { _formatString } from "../../../../acs-ui-common/src";
-import { useTheme } from '../../theming/FluentThemeProvider';
+import { _formatString } from "../../../../../acs-ui-common/src";
+import { useTheme } from '../../../theming/FluentThemeProvider';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../styles/EditBox.styles';
-import { InputBoxComponent } from '../InputBoxComponent';
-import { InputBoxButton } from '../InputBoxButton';
-import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
-import { _AttachmentUploadCards } from '../AttachmentUploadCards';
-import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
-import { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';
-import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';
+import { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';
+import { InputBoxComponent } from '../../InputBoxComponent';
+import { InputBoxButton } from '../../InputBoxButton';
+import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
+import { _AttachmentUploadCards } from '../../AttachmentUploadCards';
+import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
+import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
+import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /* @conditional-compile-remove(attachment-upload) */
-import { getMessageWithAttachmentMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
+import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';\nimport { InputBoxComponent } from '../../InputBoxComponent';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types/Attachment';\nimport {\n  chatMessageFailedTagStyle,\n  editChatMessageFailedTagStyle,\n  chatMessageFailedTagStackItemStyle,\n  editChatMessageButtonsStackStyle,\n  useChatMessageEditContainerStyles\n} from '../../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n  getMessageState,\n  onRenderCancelIcon,\n  onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n  /* @conditional-compile-remove(mention) */\n  const { mentionLookupOptions } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentMetadata, setAttachmentMetadata] = React.useState(getMessageWithAttachmentMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(\n    textValue,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata ?? []\n  );\n  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(inputBoxIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n  }, [theme.palette.themePrimary]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      !!attachmentMetadata &&\n      attachmentMetadata.length > 0 && (\n        <div style={{ margin: '0.25rem' }}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={attachmentMetadata}\n            onCancelAttachmentUpload={(attachmentId) => {\n              setAttachmentMetadata(attachmentMetadata?.filter((attachment) => attachment.id !== attachmentId));\n            }}\n          />\n        </div>\n      )\n    );\n  }, [attachmentMetadata]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <>\n        <InputBoxComponent\n          data-ui-id=\"edit-box\"\n          textFieldRef={editTextFieldRef}\n          inputClassName={editBoxStyle}\n          placeholderText={strings.editBoxPlaceholderText}\n          textValue={textValue}\n          onChange={setText}\n          onKeyDown={(ev) => {\n            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n              ev.stopPropagation();\n            }\n          }}\n          onEnterKeyDown={() => {\n            submitEnabled &&\n              onSubmit(\n                textValue,\n                message.metadata,\n                /* @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n          }}\n          supportNewline={false}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          errorMessage={textTooLongMessage}\n          styles={editBoxStyles}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        ></InputBoxComponent>\n        <Stack\n          horizontal\n          horizontalAlign=\"end\"\n          className={editChatMessageButtonsStackStyle}\n          tokens={{ childrenGap: '0.25rem' }}\n        >\n          {message.failureReason && (\n            <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>\n          )}\n          <Stack.Item align=\"end\">\n            <InputBoxButton\n              className={editingButtonStyle}\n              ariaLabel={strings.editBoxCancelButton}\n              tooltipContent={strings.editBoxCancelButton}\n              onRenderIcon={onRenderThemedCancelIcon}\n              onClick={() => {\n                onCancel && onCancel(message.messageId);\n              }}\n              id={'dismissIconWrapper'}\n            />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton\n              className={editingButtonStyle}\n              ariaLabel={strings.editBoxSubmitButton}\n              tooltipContent={strings.editBoxSubmitButton}\n              onRenderIcon={onRenderThemedSubmitIcon}\n              onClick={(e) => {\n                submitEnabled &&\n                  onSubmit(\n                    textValue,\n                    message.metadata,\n                    /* @conditional-compile-remove(attachment-upload) */ {\n                      attachmentMetadata\n                    }\n                  );\n                e.stopPropagation();\n              }}\n              id={'submitIconWrapper'}\n            />\n          </Stack.Item>\n        </Stack>\n        {/* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads()}\n      </>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: chatMyMessageStyles.root\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.js

@@ -3,9 +3,9 @@
 import React from 'react';
 /* @conditional-compile-remove(rich-text-editor) */
 import { Suspense } from 'react';
-import { ChatMessageComponentAsEditBox } from '../ChatMessageComponentAsEditBox';
+import { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('../ChatMessageComponentAsRichTextEditBox').then((module) => ({
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('./ChatMessageComponentAsRichTextEditBox').then((module) => ({
     default: module.ChatMessageComponentAsRichTextEditBox
 })));
 /**

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBoxPicker.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC;AAIjF,mDAAmD;AACnD,MAAM,qCAAqC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAC5D,MAAM,CAAC,0CAA0C,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACnE,OAAO,EAAE,MAAM,CAAC,qCAAqC;CACtD,CAAC,CAAC,CACJ,CAAC;AAsBF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,KAA+C,EAAe,EAAE;IAClH,mDAAmD;IACnD,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,mDAAmD;IACnD,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,QAAQ;YACP,oBAAC,qCAAqC,oBAAK,KAAK,EAAI,CAC3C,CACZ,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,6BAA6B,oBAAK,KAAK,EAAI,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(rich-text-editor) */\nimport { Suspense } from 'react';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessageComponentAsEditBox } from '../ChatMessageComponentAsEditBox';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../../MentionPopover';\n\n/* @conditional-compile-remove(rich-text-editor) */\nconst ChatMessageComponentAsRichTextEditBox = React.lazy(() =>\n  import('../ChatMessageComponentAsRichTextEditBox').then((module) => ({\n    default: module.ChatMessageComponentAsRichTextEditBox\n  }))\n);\n\n/**\n * @private\n */\nexport type ChatMessageComponentAsEditBoxPickerProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n  richTextEditor?: boolean;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBoxPicker = (props: ChatMessageComponentAsEditBoxPickerProps): JSX.Element => {\n  /* @conditional-compile-remove(rich-text-editor) */\n  const { richTextEditor } = props;\n\n  /* @conditional-compile-remove(rich-text-editor) */\n  if (richTextEditor) {\n    return (\n      <Suspense>\n        <ChatMessageComponentAsRichTextEditBox {...props} />\n      </Suspense>\n    );\n  }\n\n  return <ChatMessageComponentAsEditBox {...props} />;\n};\n"]}
+{"version":3,"file":"ChatMessageComponentAsEditBoxPicker.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAIhF,mDAAmD;AACnD,MAAM,qCAAqC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAC5D,MAAM,CAAC,yCAAyC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAClE,OAAO,EAAE,MAAM,CAAC,qCAAqC;CACtD,CAAC,CAAC,CACJ,CAAC;AAsBF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,KAA+C,EAAe,EAAE;IAClH,mDAAmD;IACnD,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,mDAAmD;IACnD,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,QAAQ;YACP,oBAAC,qCAAqC,oBAAK,KAAK,EAAI,CAC3C,CACZ,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,6BAA6B,oBAAK,KAAK,EAAI,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(rich-text-editor) */\nimport { Suspense } from 'react';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../../MentionPopover';\n\n/* @conditional-compile-remove(rich-text-editor) */\nconst ChatMessageComponentAsRichTextEditBox = React.lazy(() =>\n  import('./ChatMessageComponentAsRichTextEditBox').then((module) => ({\n    default: module.ChatMessageComponentAsRichTextEditBox\n  }))\n);\n\n/**\n * @private\n */\nexport type ChatMessageComponentAsEditBoxPickerProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n  richTextEditor?: boolean;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBoxPicker = (props: ChatMessageComponentAsEditBoxPickerProps): JSX.Element => {\n  /* @conditional-compile-remove(rich-text-editor) */\n  const { richTextEditor } = props;\n\n  /* @conditional-compile-remove(rich-text-editor) */\n  if (richTextEditor) {\n    return (\n      <Suspense>\n        <ChatMessageComponentAsRichTextEditBox {...props} />\n      </Suspense>\n    );\n  }\n\n  return <ChatMessageComponentAsEditBox {...props} />;\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponentAsRichTextEditBox.d.ts → MyMessageComponents/ChatMessageComponentAsRichTextEditBox.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { MessageThreadStrings } from '../MessageThread';
-import { ChatMessage } from '../../types';
-import { AttachmentMetadata } from '../../types/Attachment';
-/** @beta */
+import { MessageThreadStrings } from '../../MessageThread';
+import { ChatMessage } from '../../../types';
+import { AttachmentMetadata } from '../../../types/Attachment';
+/** @private */
 export type ChatMessageComponentAsRichTextEditBoxProps = {
     onCancel?: (messageId: string) => void;
     onSubmit: (text: string, metadata?: Record<string, string>, options?: {
@@ -12,7 +12,7 @@ export type ChatMessageComponentAsRichTextEditBoxProps = {
     strings: MessageThreadStrings;
 };
 /**
- * @beta
+ * @private
  */
 export declare const ChatMessageComponentAsRichTextEditBox: (props: ChatMessageComponentAsRichTextEditBoxProps) => JSX.Element;
 //# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponentAsRichTextEditBox.js → MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js}

@@ -3,29 +3,34 @@
 import { mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
-import { _formatString } from "../../../../acs-ui-common/src";
-import { useTheme } from '../../theming/FluentThemeProvider';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';
-import { InputBoxButton } from '../InputBoxButton';
-import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
-import { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';
-import { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';
-import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';
+import { _formatString } from "../../../../../acs-ui-common/src";
+import { useTheme } from '../../../theming';
+import React, { useCallback, useMemo, useState } from 'react';
+import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';
+import { InputBoxButton } from '../../InputBoxButton';
+import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
+import { _AttachmentUploadCards } from '../../AttachmentUploadCards';
+import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
+import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
+import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /* @conditional-compile-remove(attachment-upload) */
-import { getMessageWithAttachmentMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
-import { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';
-import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';
-import { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';
-import { useLocale } from '../../localization';
+import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
+import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';
+import { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';
+import { useLocale } from '../../../localization';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';
+/* @conditional-compile-remove(attachment-upload) */
+import { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';
 /**
- * @beta
+ * @private
  */
 export const ChatMessageComponentAsRichTextEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
     const [textValue, setTextValue] = useState(message.content || '');
-    /* @conditional-compile-remove(attachment-upload) */
-    const [attachmentMetadata, _] = React.useState(getMessageWithAttachmentMetadata(message));
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const [attachmentMetadata, setAttachmentMetadata] = useState(getMessageWithAttachmentMetadata(message));
     const editTextFieldRef = React.useRef(null);
     const theme = useTheme();
     const messageState = getMessageState(textValue, 
@@ -34,12 +39,6 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
     const editContainerStyles = useChatMessageRichTextEditContainerStyles();
     const chatMyMessageStyles = useChatMyMessageStyles();
     const locale = useLocale().strings;
-    // TODO: Check if the focus is needed, if so use `focusOnInit` prop
-    // for Rooster component instead as this sets focus too early
-    useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
     const setText = (newValue) => {
         setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
     };
@@ -87,10 +86,22 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
         return locale.richTextSendBox;
         return locale.sendBox;
     }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const onCancelAttachmentUpload = useCallback((attachmentId) => {
+        setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
+    }, [attachmentMetadata]);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const onRenderAttachmentUploads = useCallback(() => {
+        return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload }))));
+    }, [attachmentMetadata, onCancelAttachmentUpload, theme]);
     const getContent = () => {
         return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
             React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason }),
-            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true })));
+            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, content: textValue, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true, 
+                /* @conditional-compile-remove(attachment-upload) */
+                onRenderAttachmentUploads: onRenderAttachmentUploads })));
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     return (React.createElement(ChatMyMessage, { attached: attached, root: {

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n  getMessageState,\n  onRenderCancelIcon,\n  onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n  props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentMetadata, setAttachmentMetadata] = useState(getMessageWithAttachmentMetadata(message));\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(\n    textValue,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata ?? []\n  );\n  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n\n  const setText = (newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack horizontal>\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(\n                textValue,\n                message.metadata,\n                /* @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </Stack>\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata,\n    message.messageId,\n    message.metadata,\n    onCancel,\n    onRenderThemedCancelIcon,\n    onRenderThemedSubmitIcon,\n    onSubmit,\n    strings.editBoxCancelButton,\n    strings.editBoxSubmitButton,\n    submitEnabled,\n    textValue\n  ]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.richTextSendBox;\n    return locale.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onCancelAttachmentUpload = useCallback(\n    (attachmentId: string) => {\n      setAttachmentMetadata(attachmentMetadata?.filter((attachment) => attachment.id !== attachmentId));\n    },\n    [attachmentMetadata]\n  );\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={attachmentMetadata}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n        <RichTextInputBoxComponent\n          placeholderText={strings.editBoxPlaceholderText}\n          onChange={setText}\n          editorComponentRef={editTextFieldRef}\n          initialContent={message.content}\n          content={textValue}\n          strings={richTextLocaleStrings}\n          disabled={false}\n          actionComponents={actionButtons}\n          richTextEditorStyleProps={editBoxRichTextEditorStyle}\n          isHorizontalLayoutDisabled={true}\n          /* @conditional-compile-remove(attachment-upload) */\n          onRenderAttachmentUploads={onRenderAttachmentUploads}\n        />\n      </Stack>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: chatMyMessageStyles.root\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n"]}

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

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { concatStyleSets, Icon } from '@fluentui/react';
-import React from 'react';
+/* @conditional-compile-remove(end-call-options) */
+import { mergeStyles } from '@fluentui/react';
+import React, { useCallback } from 'react';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
@@ -9,7 +11,10 @@ import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
 /* @conditional-compile-remove(end-call-options) */
 import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
-const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "ControlButtonEndCall" });
+/* @conditional-compile-remove(end-call-options) */
+const spacerClass = mergeStyles({
+    width: 4
+});
 /**
  * A button to end an ongoing call.
  *
@@ -24,7 +29,11 @@ export const EndCallButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
-    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
+    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, 
+    /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
+    const onRenderEndCallIcon = useCallback(() => (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { iconName: "ControlButtonEndCall" }), /* @conditional-compile-remove(end-call-options) */
+        enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu]);
     /* @conditional-compile-remove(end-call-options) */
     const defaultMenuProps = {
         items: [
@@ -125,4 +134,8 @@ const lightThemeCallButtonStyles = {
         color: lightTheme.callingPalette.iconWhite
     }
 };
+/* @conditional-compile-remove(end-call-options) */
+const menupButtonPadding = {
+    root: { padding: '0 0.75rem' }
+};
 //# sourceMappingURL=EndCallButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(end-call-options) */\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { CallingTheme, darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(end-call-options) */\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for leave option when ending call */\n  leaveOption?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for end the whole call option when ending call */\n  endCallOption?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: (forEveryone?: boolean) => Promise<void>;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Set this to true to make it a split button.\n   * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.\n   */\n  enableEndCallMenu?: boolean;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\n\nconst onRenderEndCallIcon = (): JSX.Element => <Icon iconName=\"ControlButtonEndCall\" />;\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;\n\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(\n    isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n    styles ?? {}\n  );\n\n  /* @conditional-compile-remove(end-call-options) */\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [\n      {\n        key: 'endForSelf',\n        text: localeStrings.leaveOption,\n        title: localeStrings.leaveOption,\n        onClick: () => {\n          onHangUp && onHangUp(false);\n        }\n      },\n      {\n        key: 'endForEveryone',\n        text: localeStrings.endCallOption,\n        title: localeStrings.endCallOption,\n        onClick: () => {\n          onHangUp && onHangUp(true);\n        }\n      }\n    ],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  return (\n    <>\n      <ControlBarButton\n        {...props}\n        /* @conditional-compile-remove(end-call-options) */\n        menuProps={enableEndCallMenu ? defaultMenuProps : undefined}\n        onClick={onHangUp ? () => onHangUp() : props.onClick}\n        styles={componentStyles}\n        onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'endCallButtonLabel'}\n      />\n    </>\n  );\n};\n\nconst getButtonStyles = (\n  theme: PartialTheme & CallingTheme\n): { regular: IStyle; pressed: IStyle; hovered: IStyle } => ({\n  regular: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${theme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  pressed: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDarker,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  hovered: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDark,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  }\n});\n\nconst darkThemeButtonStyles = getButtonStyles(darkTheme);\nconst lightThemeButtonStyles = getButtonStyles(lightTheme);\n\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: darkThemeButtonStyles.regular,\n  rootHovered: darkThemeButtonStyles.hovered,\n  rootPressed: darkThemeButtonStyles.pressed,\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  },\n  splitButtonMenuButton: {\n    ...(darkThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': darkThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed\n};\n\nconst lightThemeCallButtonStyles = {\n  root: lightThemeButtonStyles.regular,\n  rootHovered: lightThemeButtonStyles.hovered,\n  rootPressed: lightThemeButtonStyles.pressed,\n  splitButtonMenuButton: {\n    ...(lightThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': lightThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,\n  splitButtonMenuFocused: lightThemeButtonStyles.pressed,\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};\n"]}
+{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(end-call-options) */\nimport { IContextualMenuProps, mergeStyles } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { CallingTheme, darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(end-call-options) */\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for leave option when ending call */\n  leaveOption?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for end the whole call option when ending call */\n  endCallOption?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: (forEveryone?: boolean) => Promise<void>;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Set this to true to make it a split button.\n   * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.\n   */\n  enableEndCallMenu?: boolean;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\n\n/* @conditional-compile-remove(end-call-options) */\nconst spacerClass = mergeStyles({\n  width: 4\n});\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;\n\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(\n    isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n    /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu ? menupButtonPadding : {},\n    styles ?? {}\n  );\n\n  const onRenderEndCallIcon = useCallback(\n    (): JSX.Element => (\n      <>\n        <Icon iconName=\"ControlButtonEndCall\" />\n        {/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu && <span className={spacerClass} />}\n      </>\n    ),\n    [/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu]\n  );\n\n  /* @conditional-compile-remove(end-call-options) */\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [\n      {\n        key: 'endForSelf',\n        text: localeStrings.leaveOption,\n        title: localeStrings.leaveOption,\n        onClick: () => {\n          onHangUp && onHangUp(false);\n        }\n      },\n      {\n        key: 'endForEveryone',\n        text: localeStrings.endCallOption,\n        title: localeStrings.endCallOption,\n        onClick: () => {\n          onHangUp && onHangUp(true);\n        }\n      }\n    ],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  return (\n    <>\n      <ControlBarButton\n        {...props}\n        /* @conditional-compile-remove(end-call-options) */\n        menuProps={enableEndCallMenu ? defaultMenuProps : undefined}\n        onClick={onHangUp ? () => onHangUp() : props.onClick}\n        styles={componentStyles}\n        onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'endCallButtonLabel'}\n      />\n    </>\n  );\n};\n\nconst getButtonStyles = (\n  theme: PartialTheme & CallingTheme\n): { regular: IStyle; pressed: IStyle; hovered: IStyle } => ({\n  regular: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${theme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  pressed: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDarker,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  hovered: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDark,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  }\n});\n\nconst darkThemeButtonStyles = getButtonStyles(darkTheme);\nconst lightThemeButtonStyles = getButtonStyles(lightTheme);\n\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: darkThemeButtonStyles.regular,\n  rootHovered: darkThemeButtonStyles.hovered,\n  rootPressed: darkThemeButtonStyles.pressed,\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  },\n  splitButtonMenuButton: {\n    ...(darkThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': darkThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed\n};\n\nconst lightThemeCallButtonStyles = {\n  root: lightThemeButtonStyles.regular,\n  rootHovered: lightThemeButtonStyles.hovered,\n  rootPressed: lightThemeButtonStyles.pressed,\n  splitButtonMenuButton: {\n    ...(lightThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': lightThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,\n  splitButtonMenuFocused: lightThemeButtonStyles.pressed,\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};\n\n/* @conditional-compile-remove(end-call-options) */\nconst menupButtonPadding = {\n  root: { padding: '0 0.75rem' }\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js

@@ -19,6 +19,9 @@ export const insertTable = (editor, columns, rows) => {
             const td = document.createElement('td');
             tr.appendChild(td);
             td.appendChild(document.createElement('br'));
+            // set the width as otherwise insets doesn't work well in table
+            // review if it's needed when content model packages are used
+            td.style.width = getTableCellWidth(columns);
         }
     }
     editor.focus();
@@ -31,4 +34,15 @@ export const insertTable = (editor, columns, rows) => {
         formatApiName: 'insertTable'
     });
 };
+function getTableCellWidth(columns) {
+    if (columns <= 4) {
+        return '120px';
+    }
+    else if (columns <= 6) {
+        return '100px';
+    }
+    else {
+        return '70px';
+    }
+}
 //# sourceMappingURL=insertTableAction.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"insertTableAction.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEnG,+GAA+G;AAE/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAe,EAAE,OAAe,EAAE,IAAY,EAAQ,EAAE;IAClF,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAwB,CAAC;QAC/D,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAyB,CAAC;YAChE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACnB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,CAAC,eAAe,CACpB,GAAG,EAAE;QACH,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzB,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC5G,CAAC,EACD,sBAAsB,CAAC,MAAM,EAC7B,SAAS,CAAC,wBAAwB,EAClC;QACE,aAAa,EAAE,aAAa;KAC7B,CACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Position, VTable } from 'roosterjs-editor-dom';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\nimport { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';\n\n// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles\n\n/**\n * Insert table into editor at current selection\n * @param editor The editor instance\n * @param columns Number of columns in table\n * @param rows Number of rows in table\n */\nexport const insertTable = (editor: IEditor, columns: number, rows: number): void => {\n  const document = editor.getDocument();\n  const table = document.createElement('table') as HTMLTableElement;\n  for (let i = 0; i < rows; i++) {\n    const tr = document.createElement('tr') as HTMLTableRowElement;\n    table.appendChild(tr);\n    for (let j = 0; j < columns; j++) {\n      const td = document.createElement('td') as HTMLTableCellElement;\n      tr.appendChild(td);\n      td.appendChild(document.createElement('br'));\n    }\n  }\n\n  editor.focus();\n  editor.addUndoSnapshot(\n    () => {\n      const vTable = new VTable(table);\n      vTable.writeBack();\n      editor.insertNode(table);\n      editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));\n    },\n    CompatibleChangeSource.Format,\n    undefined /* canUndoByBackspace */,\n    {\n      formatApiName: 'insertTable'\n    }\n  );\n};\n"]}
+{"version":3,"file":"insertTableAction.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/insertTableAction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEnG,+GAA+G;AAE/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAe,EAAE,OAAe,EAAE,IAAY,EAAQ,EAAE;IAClF,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAwB,CAAC;QAC/D,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAyB,CAAC;YAChE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACnB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;YAE7C,+DAA+D;YAC/D,6DAA6D;YAC7D,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,CAAC,eAAe,CACpB,GAAG,EAAE;QACH,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzB,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC5G,CAAC,EACD,sBAAsB,CAAC,MAAM,EAC7B,SAAS,CAAC,wBAAwB,EAClC;QACE,aAAa,EAAE,aAAa;KAC7B,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,iBAAiB,CAAC,OAAe;IACxC,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC;IAChB,CAAC;AACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Position, VTable } from 'roosterjs-editor-dom';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\nimport { CompatibleChangeSource, CompatiblePositionType } from 'roosterjs-editor-types-compatible';\n\n// This file  uses RoosterJS React package implementation with updates to change table's size and remove styles\n\n/**\n * Insert table into editor at current selection\n * @param editor The editor instance\n * @param columns Number of columns in table\n * @param rows Number of rows in table\n */\nexport const insertTable = (editor: IEditor, columns: number, rows: number): void => {\n  const document = editor.getDocument();\n  const table = document.createElement('table') as HTMLTableElement;\n  for (let i = 0; i < rows; i++) {\n    const tr = document.createElement('tr') as HTMLTableRowElement;\n    table.appendChild(tr);\n    for (let j = 0; j < columns; j++) {\n      const td = document.createElement('td') as HTMLTableCellElement;\n      tr.appendChild(td);\n      td.appendChild(document.createElement('br'));\n\n      // set the width as otherwise insets doesn't work well in table\n      // review if it's needed when content model packages are used\n      td.style.width = getTableCellWidth(columns);\n    }\n  }\n\n  editor.focus();\n  editor.addUndoSnapshot(\n    () => {\n      const vTable = new VTable(table);\n      vTable.writeBack();\n      editor.insertNode(table);\n      editor.runAsync((editor) => editor.select(new Position(table, CompatiblePositionType.Begin).normalize()));\n    },\n    CompatibleChangeSource.Format,\n    undefined /* canUndoByBackspace */,\n    {\n      formatApiName: 'insertTable'\n    }\n  );\n};\n\nfunction getTableCellWidth(columns: number): string {\n  if (columns <= 4) {\n    return '120px';\n  } else if (columns <= 6) {\n    return '100px';\n  } else {\n    return '70px';\n  }\n}\n"]}

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

@@ -16,6 +16,7 @@ export interface RichTextEditorStyleProps {
  */
 export interface RichTextEditorProps {
     initialContent?: string;
+    content?: string;
     onChange: (newValue?: string) => void;
     onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
     placeholderText?: string;