@azure/communication-react 1.18.0-alpha-202407162016 → 1.18.0-alpha-202407170014

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAE3C,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n\n  return (\n    <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery\n        childrenPerPage={childrenPerPage}\n        styles={props.horizontalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,IAAI,4BAA4B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IACnG,IAAI,MAAM,CAAC,KAAK,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC/C,4BAA4B,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,4BAA4B;QAC5C,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAE3C,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n  let containerWidthWithoutPadding = Math.max((containerWidth ?? 0) - leftPadding - rightPadding, 0);\n  if (Number.isNaN(containerWidthWithoutPadding)) {\n    containerWidthWithoutPadding = 0;\n  }\n\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: containerWidthWithoutPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n\n  return (\n    <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery\n        childrenPerPage={childrenPerPage}\n        styles={props.horizontalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n"]}

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

@@ -19,9 +19,13 @@ export const ResponsiveVerticalGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
     const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
+    let containerHeightWithoutPadding = Math.max((containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding, 0);
+    if (Number.isNaN(containerHeightWithoutPadding)) {
+        containerHeightWithoutPadding = 0;
+    }
     const childrenPerPage = calculateVerticalChildrenPerPage({
         numberOfChildren: (_a = React.Children.count(children)) !== null && _a !== void 0 ? _a : 0,
-        containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
+        containerHeight: containerHeightWithoutPadding,
         gapHeightRem,
         controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
         isShort: isShort !== null && isShort !== void 0 ? isShort : false

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa;QACpE,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,CACL,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACtG,oBAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,qBAAqB,EAC7B,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: (containerHeight ?? 0) - topPadding - bottomPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return (\n    <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery\n        childrenPerPage={childrenPerPage}\n        styles={verticalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {children}\n      </VerticalGallery>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,IAAI,6BAA6B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa,EAAE,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAChD,6BAA6B,GAAG,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,6BAA6B;QAC9C,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,CACL,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACtG,oBAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,qBAAqB,EAC7B,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n  let containerHeightWithoutPadding = Math.max((containerHeight ?? 0) - topPadding - bottomPadding, 0);\n  if (Number.isNaN(containerHeightWithoutPadding)) {\n    containerHeightWithoutPadding = 0;\n  }\n\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: containerHeightWithoutPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return (\n    <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery\n        childrenPerPage={childrenPerPage}\n        styles={verticalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {children}\n      </VerticalGallery>\n    </div>\n  );\n};\n"]}

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

@@ -17,6 +17,7 @@ import { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProv
 import { borderApplier, dataSetApplier, DefaultSanitizers } from '../utils/RichTextEditorUtils';
 import { ContextualMenu } from '@fluentui/react';
 import { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';
+import { getFormatState, setDirection } from 'roosterjs-content-model-api';
 /**
  * A component to wrap RoosterJS Rich Text Editor.
  *
@@ -32,6 +33,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     const editorDiv = useRef(null);
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = useState(null);
+    const previousThemeDirection = useRef(themeDirection(theme));
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -213,9 +215,24 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         // don't update the editor on deps update as everything is handled in separate hooks or plugins
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [theme, plugins]);
+    useEffect(() => {
+        const themeDirectionValue = themeDirection(theme);
+        // check that editor exists and theme was actually changed
+        // as format.direction will be undefined if setDirection is not called
+        if (editor.current && previousThemeDirection.current !== themeDirectionValue) {
+            const format = getFormatState(editor.current);
+            if (format.direction !== themeDirectionValue) {
+                // should be set after the hook where editor is created as the editor might be null
+                // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)
+                // that's why it's not part of the create editor hook
+                setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');
+            }
+            previousThemeDirection.current = themeDirectionValue;
+        }
+    }, [theme]);
     return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && toolbar,
-        React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
+        React.createElement("div", { className: richTextEditorWrapperStyle(theme) },
             React.createElement("div", { id: "richTextSendBox", ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles), "aria-label": placeholderText })),
         contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: { isBeakVisible: false } }))));
 });
@@ -248,4 +265,7 @@ const setSelectionAfterLastSegment = (model, block) => {
     block.segments.push(marker);
     setSelection(model, marker);
 };
+const themeDirection = (theme) => {
+    return theme.rtl ? 'rtl' : 'ltr';
+};
 //# sourceMappingURL=RichTextEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n  ContentModelDocument,\n  ContentModelParagraph,\n  EditorPlugin,\n  IEditor,\n  ReadonlyContentModelBlockGroup,\n  ShallowMutableContentModelDocument\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier, DefaultSanitizers } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\n\n/**\n * Style props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  onChange: (newValue?: string, imageSrcArray?: Array<string>) => void;\n  onKeyDown?: (ev: KeyboardEvent) => void;\n  // update the current content of the rich text editor\n  onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;\n  contentModel?: ContentModelDocument | undefined;\n  placeholderText?: string;\n  strings: Partial<RichTextStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n}\n\n/**\n * Represents a reference to the RichTextEditor component.\n */\nexport interface RichTextEditorComponentRef {\n  /**\n   * Sets focus on the RichTextEditor component.\n   */\n  focus: () => void;\n\n  /**\n   * Sets the content of the RichTextEditor component to an empty string.\n   */\n  setEmptyContent: () => void;\n\n  /**\n   * Retrieves the plain text content of the RichTextEditor component.\n   * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n   */\n  getPlainContent: () => string | undefined;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const {\n    initialContent,\n    onChange,\n    placeholderText,\n    strings,\n    showRichTextEditorFormatting,\n    autoFocus,\n    onKeyDown,\n    onContentModelUpdate,\n    contentModel,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const editorDiv = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);\n\n  useImperativeHandle(ref, () => {\n    return {\n      focus() {\n        if (editor.current) {\n          editor.current.focus();\n        }\n      },\n      setEmptyContent() {\n        if (editor.current) {\n          // remove all content from the editor and update the model\n          // ContentChanged event will be sent by RoosterJS automatically\n          editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n            // Create a new empty paragraph with selection marker\n            // this is needed for correct processing of images after the content is deleted\n            const block = createParagraph(true);\n            setSelectionAfterLastSegment(model, block);\n            model.blocks = [block];\n            return true;\n          });\n          //reset content model\n          onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n        }\n      },\n      getPlainContent() {\n        if (editor.current) {\n          return exportContent(editor.current, 'PlainTextFast');\n        } else {\n          return undefined;\n        }\n      }\n    };\n  }, [onContentModelUpdate]);\n\n  const toolbarPlugin = React.useMemo(() => {\n    return new RichTextToolbarPlugin();\n  }, []);\n\n  const isDarkThemedValue = useMemo(() => {\n    return isDarkThemed(theme);\n  }, [theme]);\n\n  useEffect(() => {\n    editor.current?.setDarkModeState(isDarkThemedValue);\n  }, [isDarkThemedValue]);\n\n  const placeholderPlugin = useMemo(() => {\n    const textColor = theme.palette?.neutralSecondary;\n    return new PlaceholderPlugin(\n      '',\n      textColor\n        ? {\n            textColor: textColor\n          }\n        : undefined\n    );\n  }, [theme]);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updatePlaceholder(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const toolbar = useMemo(() => {\n    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n  }, [strings, toolbarPlugin]);\n\n  const updatePlugin = useMemo(() => {\n    return new UpdateContentPlugin();\n  }, []);\n\n  const copyPastePlugin = useMemo(() => {\n    return new CopyPastePlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    updatePlugin.onUpdate = (event: string, imageSrcArray?: Array<string>) => {\n      if (editor.current === null) {\n        return;\n      }\n      if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {\n        onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n      } else {\n        onChange && onChange(exportContent(editor.current), imageSrcArray);\n      }\n    };\n  }, [onChange, onContentModelUpdate, updatePlugin]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onUploadInlineImage = onUploadInlineImage;\n  }, [copyPastePlugin, onUploadInlineImage]);\n\n  const keyboardInputPlugin = useMemo(() => {\n    return new KeyboardInputPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    keyboardInputPlugin.onKeyDown = onKeyDown;\n  }, [keyboardInputPlugin, onKeyDown]);\n\n  const tableContextMenuPlugin = useMemo(() => {\n    return new TableEditContextMenuProvider();\n  }, []);\n\n  useEffect(() => {\n    tableContextMenuPlugin.updateStrings(strings);\n  }, [tableContextMenuPlugin, strings]);\n\n  const onContextMenuRender = useCallback(\n    (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n      setContextMenuProps({\n        items: items,\n        target: container,\n        onDismiss: onDismiss\n      });\n    },\n    []\n  );\n\n  const onContextMenuDismiss = useCallback((): void => {\n    setContextMenuProps(null);\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onPaste = onPaste;\n  }, [copyPastePlugin, onPaste]);\n\n  const plugins: EditorPlugin[] = useMemo(() => {\n    const contentEdit = new EditPlugin({ handleTabKey: false });\n    // AutoFormatPlugin previously was a part of the edit plugin\n    const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n    const roosterPastePlugin = new PastePlugin(false, {\n      additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n      additionalAllowedTags: [],\n      styleSanitizers: DefaultSanitizers,\n      attributeSanitizers: {}\n    });\n\n    const shortcutPlugin = new ShortcutPlugin();\n    const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n    return [\n      placeholderPlugin,\n      keyboardInputPlugin,\n      contentEdit,\n      autoFormatPlugin,\n      updatePlugin,\n      copyPastePlugin,\n      roosterPastePlugin,\n      toolbarPlugin,\n      shortcutPlugin,\n      // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n      contextMenuPlugin,\n      tableContextMenuPlugin\n    ];\n  }, [\n    onContextMenuRender,\n    onContextMenuDismiss,\n    placeholderPlugin,\n    keyboardInputPlugin,\n    updatePlugin,\n    copyPastePlugin,\n    toolbarPlugin,\n    tableContextMenuPlugin\n  ]);\n\n  useEffect(() => {\n    const initialModel = createEditorInitialModel(initialContent, contentModel);\n    if (editorDiv.current) {\n      editor.current = new Editor(editorDiv.current, {\n        inDarkMode: isDarkThemedValue,\n        // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n        doNotAdjustEditorColor: true,\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor: 'blue',\n        tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n        plugins: plugins,\n        initialModel: initialModel,\n        defaultModelToDomOptions: {\n          formatApplierOverride: {\n            // apply border and dataset formats for table\n            border: borderApplier,\n            dataset: dataSetApplier\n          }\n        }\n      });\n    }\n\n    if (autoFocus === 'sendBoxTextField') {\n      editor.current?.focus();\n    }\n\n    return () => {\n      if (editor.current) {\n        editor.current.dispose();\n        editor.current = null;\n      }\n    };\n    // don't update the editor on deps update as everything is handled in separate hooks or plugins\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [theme, plugins]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && toolbar}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        {/* div that is used by Rooster JS as a parent of the editor */}\n        <div\n          id=\"richTextSendBox\"\n          ref={editorDiv}\n          tabIndex={0}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          data-testid={'rooster-rich-text-editor'}\n          className={richTextEditorStyle(props.styles)}\n          aria-label={placeholderText}\n        />\n      </div>\n      {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n    </div>\n  );\n});\n\nconst createEditorInitialModel = (\n  initialContent?: string,\n  contentModel?: ContentModelDocument\n): ContentModelDocument | undefined => {\n  if (contentModel) {\n    // contentModel is the current content of the editor\n    return contentModel;\n  } else {\n    const initialContentValue = initialContent;\n    const initialModel =\n      initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n    if (initialModel && initialModel.blocks.length > 0) {\n      // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n      // to set focus to the end of the content\n      let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n      if (lastBlock?.blockType === 'Paragraph') {\n        // now lastBlock is paragraph\n      } else {\n        lastBlock = createParagraph(true);\n        initialModel.blocks.push(lastBlock);\n      }\n      setSelectionAfterLastSegment(initialModel, lastBlock);\n    }\n    return initialModel;\n  }\n};\n\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n  const marker = createSelectionMarker();\n  block.segments.push(marker);\n  setSelection(model, marker);\n};\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type {\n  ContentModelDocument,\n  ContentModelParagraph,\n  EditorPlugin,\n  IEditor,\n  ReadonlyContentModelBlockGroup,\n  ShallowMutableContentModelDocument\n} from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier, DefaultSanitizers } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps, Theme } from '@fluentui/react';\nimport { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';\nimport { getFormatState, setDirection } from 'roosterjs-content-model-api';\n\n/**\n * Style props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  onChange: (newValue?: string, imageSrcArray?: Array<string>) => void;\n  onKeyDown?: (ev: KeyboardEvent) => void;\n  // update the current content of the rich text editor\n  onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;\n  contentModel?: ContentModelDocument | undefined;\n  placeholderText?: string;\n  strings: Partial<RichTextStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n}\n\n/**\n * Represents a reference to the RichTextEditor component.\n */\nexport interface RichTextEditorComponentRef {\n  /**\n   * Sets focus on the RichTextEditor component.\n   */\n  focus: () => void;\n\n  /**\n   * Sets the content of the RichTextEditor component to an empty string.\n   */\n  setEmptyContent: () => void;\n\n  /**\n   * Retrieves the plain text content of the RichTextEditor component.\n   * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n   */\n  getPlainContent: () => string | undefined;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const {\n    initialContent,\n    onChange,\n    placeholderText,\n    strings,\n    showRichTextEditorFormatting,\n    autoFocus,\n    onKeyDown,\n    onContentModelUpdate,\n    contentModel,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const editorDiv = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);\n  const previousThemeDirection = useRef(themeDirection(theme));\n\n  useImperativeHandle(ref, () => {\n    return {\n      focus() {\n        if (editor.current) {\n          editor.current.focus();\n        }\n      },\n      setEmptyContent() {\n        if (editor.current) {\n          // remove all content from the editor and update the model\n          // ContentChanged event will be sent by RoosterJS automatically\n          editor.current.formatContentModel((model: ShallowMutableContentModelDocument): boolean => {\n            // Create a new empty paragraph with selection marker\n            // this is needed for correct processing of images after the content is deleted\n            const block = createParagraph(true);\n            setSelectionAfterLastSegment(model, block);\n            model.blocks = [block];\n            return true;\n          });\n          //reset content model\n          onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n        }\n      },\n      getPlainContent() {\n        if (editor.current) {\n          return exportContent(editor.current, 'PlainTextFast');\n        } else {\n          return undefined;\n        }\n      }\n    };\n  }, [onContentModelUpdate]);\n\n  const toolbarPlugin = React.useMemo(() => {\n    return new RichTextToolbarPlugin();\n  }, []);\n\n  const isDarkThemedValue = useMemo(() => {\n    return isDarkThemed(theme);\n  }, [theme]);\n\n  useEffect(() => {\n    editor.current?.setDarkModeState(isDarkThemedValue);\n  }, [isDarkThemedValue]);\n\n  const placeholderPlugin = useMemo(() => {\n    const textColor = theme.palette?.neutralSecondary;\n    return new PlaceholderPlugin(\n      '',\n      textColor\n        ? {\n            textColor: textColor\n          }\n        : undefined\n    );\n  }, [theme]);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updatePlaceholder(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const toolbar = useMemo(() => {\n    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n  }, [strings, toolbarPlugin]);\n\n  const updatePlugin = useMemo(() => {\n    return new UpdateContentPlugin();\n  }, []);\n\n  const copyPastePlugin = useMemo(() => {\n    return new CopyPastePlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    updatePlugin.onUpdate = (event: string, imageSrcArray?: Array<string>) => {\n      if (editor.current === null) {\n        return;\n      }\n      if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {\n        onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n      } else {\n        onChange && onChange(exportContent(editor.current), imageSrcArray);\n      }\n    };\n  }, [onChange, onContentModelUpdate, updatePlugin]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onUploadInlineImage = onUploadInlineImage;\n  }, [copyPastePlugin, onUploadInlineImage]);\n\n  const keyboardInputPlugin = useMemo(() => {\n    return new KeyboardInputPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    keyboardInputPlugin.onKeyDown = onKeyDown;\n  }, [keyboardInputPlugin, onKeyDown]);\n\n  const tableContextMenuPlugin = useMemo(() => {\n    return new TableEditContextMenuProvider();\n  }, []);\n\n  useEffect(() => {\n    tableContextMenuPlugin.updateStrings(strings);\n  }, [tableContextMenuPlugin, strings]);\n\n  const onContextMenuRender = useCallback(\n    (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n      setContextMenuProps({\n        items: items,\n        target: container,\n        onDismiss: onDismiss\n      });\n    },\n    []\n  );\n\n  const onContextMenuDismiss = useCallback((): void => {\n    setContextMenuProps(null);\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onPaste = onPaste;\n  }, [copyPastePlugin, onPaste]);\n\n  const plugins: EditorPlugin[] = useMemo(() => {\n    const contentEdit = new EditPlugin({ handleTabKey: false });\n    // AutoFormatPlugin previously was a part of the edit plugin\n    const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n    const roosterPastePlugin = new PastePlugin(false, {\n      additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],\n      additionalAllowedTags: [],\n      styleSanitizers: DefaultSanitizers,\n      attributeSanitizers: {}\n    });\n\n    const shortcutPlugin = new ShortcutPlugin();\n    const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n    return [\n      placeholderPlugin,\n      keyboardInputPlugin,\n      contentEdit,\n      autoFormatPlugin,\n      updatePlugin,\n      copyPastePlugin,\n      roosterPastePlugin,\n      toolbarPlugin,\n      shortcutPlugin,\n      // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n      contextMenuPlugin,\n      tableContextMenuPlugin\n    ];\n  }, [\n    onContextMenuRender,\n    onContextMenuDismiss,\n    placeholderPlugin,\n    keyboardInputPlugin,\n    updatePlugin,\n    copyPastePlugin,\n    toolbarPlugin,\n    tableContextMenuPlugin\n  ]);\n\n  useEffect(() => {\n    const initialModel = createEditorInitialModel(initialContent, contentModel);\n    if (editorDiv.current) {\n      editor.current = new Editor(editorDiv.current, {\n        inDarkMode: isDarkThemedValue,\n        // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n        doNotAdjustEditorColor: true,\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor: 'blue',\n        tableCellSelectionBackgroundColor: theme.palette.neutralLight,\n        plugins: plugins,\n        initialModel: initialModel,\n        defaultModelToDomOptions: {\n          formatApplierOverride: {\n            // apply border and dataset formats for table\n            border: borderApplier,\n            dataset: dataSetApplier\n          }\n        }\n      });\n    }\n\n    if (autoFocus === 'sendBoxTextField') {\n      editor.current?.focus();\n    }\n\n    return () => {\n      if (editor.current) {\n        editor.current.dispose();\n        editor.current = null;\n      }\n    };\n    // don't update the editor on deps update as everything is handled in separate hooks or plugins\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [theme, plugins]);\n\n  useEffect(() => {\n    const themeDirectionValue = themeDirection(theme);\n    // check that editor exists and theme was actually changed\n    // as format.direction will be undefined if setDirection is not called\n    if (editor.current && previousThemeDirection.current !== themeDirectionValue) {\n      const format = getFormatState(editor.current);\n      if (format.direction !== themeDirectionValue) {\n        // should be set after the hook where editor is created as the editor might be null\n        // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)\n        // that's why it's not part of the create editor hook\n        setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');\n      }\n      previousThemeDirection.current = themeDirectionValue;\n    }\n  }, [theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && toolbar}\n      <div className={richTextEditorWrapperStyle(theme)}>\n        {/* div that is used by Rooster JS as a parent of the editor */}\n        <div\n          id=\"richTextSendBox\"\n          ref={editorDiv}\n          tabIndex={0}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          data-testid={'rooster-rich-text-editor'}\n          className={richTextEditorStyle(props.styles)}\n          aria-label={placeholderText}\n        />\n      </div>\n      {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n    </div>\n  );\n});\n\nconst createEditorInitialModel = (\n  initialContent?: string,\n  contentModel?: ContentModelDocument\n): ContentModelDocument | undefined => {\n  if (contentModel) {\n    // contentModel is the current content of the editor\n    return contentModel;\n  } else {\n    const initialContentValue = initialContent;\n    const initialModel =\n      initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n    if (initialModel && initialModel.blocks.length > 0) {\n      // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n      // to set focus to the end of the content\n      let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n      if (lastBlock?.blockType === 'Paragraph') {\n        // now lastBlock is paragraph\n      } else {\n        lastBlock = createParagraph(true);\n        initialModel.blocks.push(lastBlock);\n      }\n      setSelectionAfterLastSegment(initialModel, lastBlock);\n    }\n    return initialModel;\n  }\n};\n\nconst setSelectionAfterLastSegment = (model: ReadonlyContentModelBlockGroup, block: ContentModelParagraph): void => {\n  const marker = createSelectionMarker();\n  block.segments.push(marker);\n  setSelection(model, marker);\n};\n\nconst themeDirection = (theme: Theme): 'rtl' | 'ltr' => {\n  return theme.rtl ? 'rtl' : 'ltr';\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/Common.style.d.ts

@@ -14,5 +14,5 @@ export declare const scrollbarStyles: {
 /**
  * @private
  */
-export declare const ERROR_IMAGE_SVG_PATH = "M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z";
+export declare const BROKEN_IMAGE_SVG_DATA = "data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z' fill='currentColor' /%3E%3C/svg%3E";
 //# sourceMappingURL=Common.style.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/Common.style.js

@@ -13,8 +13,9 @@ export const scrollbarStyles = {
         background: 'rgba(150, 150, 150)'
     }
 };
+const ERROR_IMAGE_SVG_PATH = 'M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z';
 /**
  * @private
  */
-export const ERROR_IMAGE_SVG_PATH = 'M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z';
+export const BROKEN_IMAGE_SVG_DATA = `data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E`;
 //# sourceMappingURL=Common.style.js.map

package/dist/dist-esm/react-components/src/components/styles/Common.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Common.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,2CAA2C,EAAE;QAC3C,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;KACjB;IACD,uDAAuD,EAAE;QACvD,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,qBAAqB;KAClC;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAC/B,mdAAmd,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport const scrollbarStyles = {\n  '::-webkit-scrollbar, *::-webkit-scrollbar': {\n    width: '0.3rem',\n    height: '0.3rem'\n  },\n  '::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb': {\n    borderRadius: '10px',\n    background: 'rgba(150, 150, 150)'\n  }\n};\n\n/**\n * @private\n */\nexport const ERROR_IMAGE_SVG_PATH =\n  'M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z';\n"]}
+{"version":3,"file":"Common.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Common.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,2CAA2C,EAAE;QAC3C,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;KACjB;IACD,uDAAuD,EAAE;QACvD,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,qBAAqB;KAClC;CACF,CAAC;AAEF,MAAM,oBAAoB,GACxB,mdAAmd,CAAC;AAEtd;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,gJAAgJ,oBAAoB,sCAAsC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport const scrollbarStyles = {\n  '::-webkit-scrollbar, *::-webkit-scrollbar': {\n    width: '0.3rem',\n    height: '0.3rem'\n  },\n  '::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb': {\n    borderRadius: '10px',\n    background: 'rgba(150, 150, 150)'\n  }\n};\n\nconst ERROR_IMAGE_SVG_PATH =\n  'M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z';\n\n/**\n * @private\n */\nexport const BROKEN_IMAGE_SVG_DATA = `data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E`;\n"]}

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@fluentui/react';
 import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';
 import { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';
-import { ERROR_IMAGE_SVG_PATH } from './Common.style';
+import { BROKEN_IMAGE_SVG_DATA } from './Common.style';
 // Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI
 // that can contain a message and a timestamp.
 const CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;
@@ -232,9 +232,13 @@ export const useChatMessageCommonStyles = makeStyles({
     },
     bodyWithPlaceholderImage: {
         '& img[src=""]': {
-            display: 'block',
+            backgroundColor: tokens.colorNeutralBackground1Selected,
+            // this ensures safari won't have default rendering when image source
+            // becomes invalid such as empty string in this case
+            fontSize: '0',
             position: 'relative',
-            marginBottom: '5px'
+            clipPath: 'inset(0.3px)',
+            display: 'flex'
         },
         '& img[src=""]:after': {
             backgroundColor: tokens.colorNeutralBackground1Selected,
@@ -250,7 +254,7 @@ export const useChatMessageCommonStyles = makeStyles({
         '& .broken-image-wrapper': Object.assign(Object.assign({ width: '12rem', height: '12rem', marginTop: '0.75rem', display: 'flex', justifyContent: 'center', alignItems: 'center' }, shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled)), { backgroundColor: tokens.colorNeutralBackground2 }),
         '& .broken-image-wrapper:after': {
             content: `''`,
-            maskImage: `url("data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E");`,
+            maskImage: `url("${BROKEN_IMAGE_SVG_DATA}");`,
             width: '3rem',
             height: '3rem',
             backgroundColor: `${tokens.colorNeutralForeground2}`

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { ERROR_IMAGE_SVG_PATH } from './Common.style';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {},\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\n    marginTop: 0\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  bodyWithPlaceholderImage: {\n    // Adding width and height to the placeholder image only for myMessages\n    // because inline images sent from ACS doesn't have width and height in the image tag\n    '& img[src=\"\"]': {\n      width: '12rem',\n      height: '12rem'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0'\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    },\n    '& .broken-image-wrapper': {\n      width: '12rem',\n      height: '12rem',\n      marginTop: '0.75rem',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,iCAAiC,EAAE,MAAM,iCAAiC,CAAC;AAEpF,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AACvG,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,sFAAsF;AACtF,8CAA8C;AAC9C,MAAM,oCAAoC,GAAG,IAAI,CAAC;AAElD,sEAAsE;AACtE,yEAAyE;AACzE,oFAAoF;AACpF,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,sBAAsB,GAAG,KAAK,CAAC;AACrC,MAAM,gCAAgC,GAAG,CAAC,CAAC;AAE3C,gFAAgF;AAChF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAC9B,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,sDAAsD;AACtD,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,4EAA4E;IAC5E,4DAA4D;IAC5D,KAAK,EAAE,GAAG,iCAAiC,KAAK;CACjD,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAC;IACtC,IAAI;QACF,sEAAsE;QACtE,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,QAAQ,EACpB,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,QAAQ,IAClB,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,GACzB,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC9B,oFAAoF;QACpF,wEAAwE;QACxE,MAAM,EAAE,MAAM,EAEd,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC,EACD,aAAa,EAAE;YACb,KAAK,EAAE,MAAM,CAAC,6BAA6B;SAC5C,EACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,6BAA6B;SAC5C,GACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC;IACnD,UAAU,EAAE,EAAE;IACd,WAAW,gDACN,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,GACvB,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,KACzB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,GACvD;IACD,aAAa,gCACX,mBAAmB,EAAE,qBAAqB,EAC1C,iBAAiB,EAAE;;OAEhB,EACH,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,GAAG,IACT,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,KAC1B,SAAS,EAAE,GAAG,EACd,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,mBAAmB,GAC3B;IACD,UAAU,kCACL,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,KAC1B,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,GAAG,EACjB,eAAe,EAAE,aAAa,EAC9B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;KACf;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,GAAG,kBAAkB,KAAK;QACtC,SAAS,EAAE,GAAG;KACf;IACD,gBAAgB,EAAE;QAChB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;KACb;IACD,cAAc,EAAE;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,SAAS;KACrB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,eAAe,gBAAgB,GAAG,gCAAgC,GAAG,sBAAsB,MAAM;KACzG;IACD,aAAa,EAAE;QACb,KAAK,EAAE,eAAe,gBAAgB,GAAG,gCAAgC,GAAG,0BAA0B,MAAM;KAC7G;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,UAAU,CAAC;IAC/C,IAAI,EAAE;QACJ,iDAAiD;QACjD,oEAAoE;QACpE,mBAAmB,EAAE,UAAU;QAC/B,iBAAiB,EAAE;;;OAGhB;QACH,OAAO,EAAE,GAAG;QACZ,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,gCACF,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,UAAU,EAAE,MAAM,IAEf,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KAEnD,uCAAuC,EAAE;YACvC,UAAU,EAAE,SAAS;SACtB,EACD,uCAAuC,EAAE;YACvC,UAAU,EAAE,SAAS;SACtB,EACD,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM,CAAC,6BAA6B;YAC3C,UAAU,EAAE,GAAG;SAChB,EACD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,gEAAgE;IAChE,wBAAwB,EAAE;QACxB,uEAAuE;QACvE,qFAAqF;QACrF,eAAe,EAAE;YACf,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;KACF;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,UAAU;KACtB;IACD,IAAI,gCACF,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,eAAe,EAAE,MAAM,CAAC,uBAAuB,EAC/C,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,IACP,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,kBAAkB,CAAC,KACrD,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,MAAM,CAAC,iBAAiB,EACpC,UAAU,EAAE,QAAQ,EAEpB,kBAAkB,EAAE;YAClB,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,SAAS;SACtB,GACF;IACD,YAAY,EAAE;QACZ,GAAG,EAAE,OAAO;KACb;IACD,UAAU,EAAE;QACV,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,SAAS;KACtB;IACD,4BAA4B,EAAE;QAC5B,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,CAAC,6BAA6B,GAAG,6BAA6B,CAAC,GAAG,CAAC,KAAK;KACtF;IACD,4BAA4B,EAAE;QAC5B,8DAA8D;QAC9D,iEAAiE;QACjE,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,yBAAyB;IACjC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,QAAQ;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAAC;IAC7C,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,gCACF,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,mBAAmB,IAExB,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KACnD,uBAAuB,EAAE;YACvB,QAAQ,EAAE,MAAM;SACjB,EACD,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM,CAAC,6BAA6B;YAC3C,UAAU,EAAE,MAAM,CAAC,kBAAkB;SACtC,EACD,OAAO,EAAE;YACP,QAAQ,EAAE,iBAAiB,EAAE,iFAAiF;YAC9G,MAAM,EAAE,iBAAiB;SAC1B,EACD,SAAS,EAAE;YACT,QAAQ,EAAE,iBAAiB,EAAE,iFAAiF;YAC9G,MAAM,EAAE,iBAAiB;SAC1B,EACD,KAAK,oBAGA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,GAEvC,cAAc,0EACZ,eAAe,EAAE,MAAM,CAAC,4BAA4B,EACpD,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,KAAK,IACjB,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,GAC1B,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,GAC9B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,GAC7B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,2BAA2B,CAAC,KAC7D,eAAe,EAAE,KAAK,KAExB,QAAQ,EAAE;YACR,UAAU,EAAE,UAAU;SACvB,EACD,iBAAiB,EAAE;YACjB,YAAY,EAAE,MAAM;SACrB,GACF;IACD,iBAAiB,EAAE;QACjB,SAAS,EAAE,UAAU;KACtB;IACD,cAAc,EAAE;QACd,SAAS,EAAE,UAAU;KACtB;IACD,eAAe,EAAE;QACf,UAAU,EAAE,GAAG,CAAC,kBAAkB,GAAG,sBAAsB,KAAK;KACjE;IACD,aAAa,EAAE;QACb,UAAU,EAAE,GAAG,CAAC,kBAAkB,GAAG,0BAA0B,KAAK;KACrE;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,GAAG,CAAC,6BAA6B,GAAG,6BAA6B,CAAC,GAAG,CAAC,KAAK;KACnF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC;IACnD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,4BAA4B;YACpD,cAAc,EAAE,UAAU;YAC1B,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,MAAM;YAEb,MAAM,kCACD,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,4BAA4B,EAAE,CAAC,KAE9E,MAAM,kCACD,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,4BAA4B,EAAE,CAAC,KAC9E,SAAS,EAAE,QAAQ,EACnB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAE,KAAK,MAEtB;SACF;KACF;IACD,wBAAwB,EAAE;QACxB,eAAe,EAAE;YACf,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,qEAAqE;YACrE,oDAAoD;YACpD,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,cAAc;YACxB,OAAO,EAAE,MAAM;SAChB;QACD,qBAAqB,EAAE;YACrB,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,OAAO,EAAE,mDAAmD;YAC5D,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,GAAG;YACT,OAAO,EAAE,OAAO;SACjB;QACD,yBAAyB,gCACvB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,IACjB,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,8BAA8B,CAAC,KAC5E,eAAe,EAAE,MAAM,CAAC,uBAAuB,GAChD;QACD,+BAA+B,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,QAAQ,qBAAqB,KAAK;YAC7C,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,GAAG,MAAM,CAAC,uBAAuB,EAAE;SACrD;KACF;IACD,MAAM,EAAE;QACN,wCAAwC;QACxC,eAAe,EAAE,sBAAsB;KACxC;IACD,OAAO,gCACL,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,oCAAoC,KAAK,EACtD,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,CAAC,uBAAuB,IAGlC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,KACnD,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;SACtB,EAED,KAAK,kCAGA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,KACrC,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,QAAQ,KAGrB,KAAK,gDACA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,KACrC,SAAS,EAAE,QAAQ,EACnB,KAAK,EAAE,MAAM,CAAC,wBAAwB,KACnC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,IAEvC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuB;IAClD,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,GAAG,gBAAgB,KAAK;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,SAAS;IACrB,MAAM,EAAE,aAAa;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,mCAC9B,gBAAgB,KACnB,UAAU,EAAE,QAAQ;IACpB,wDAAwD;IACxD,wDAAwD;IACxD,MAAM,EAAE,CAAC,GACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;IACxD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;IACjC,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,WAAW,EAAE,OAAO;CACrB,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { BROKEN_IMAGE_SVG_DATA } from './Common.style';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {},\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\n    marginTop: 0\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  bodyWithPlaceholderImage: {\n    // Adding width and height to the placeholder image only for myMessages\n    // because inline images sent from ACS doesn't have width and height in the image tag\n    '& img[src=\"\"]': {\n      width: '12rem',\n      height: '12rem'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0'\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      // this ensures safari won't have default rendering when image source\n      // becomes invalid such as empty string in this case\n      fontSize: '0',\n      position: 'relative',\n      clipPath: 'inset(0.3px)',\n      display: 'flex'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    },\n    '& .broken-image-wrapper': {\n      width: '12rem',\n      height: '12rem',\n      marginTop: '0.75rem',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"${BROKEN_IMAGE_SVG_DATA}\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n"]}

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

@@ -10,7 +10,7 @@ export declare const richTextEditorStyle: (props: {
 /**
  * @private
  */
-export declare const richTextEditorWrapperStyle: (theme: Theme, addTopOffset: boolean) => string;
+export declare const richTextEditorWrapperStyle: (theme: Theme) => string;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js

@@ -13,20 +13,14 @@ export const richTextEditorStyle = (props) => {
         minHeight: props.minHeight,
         maxHeight: props.maxHeight,
         maxWidth: '100%',
-        // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and
-        // it gets both horizontal margins because of the user agent stylesheet
-        // remove this code when RoosterJS content model packages are used as they use different approach for indentation
-        '& blockquote': {
-            marginInlineEnd: '0'
-        }
+        paddingTop: '0.5rem'
     });
 };
 /**
  * @private
  */
-export const richTextEditorWrapperStyle = (theme, addTopOffset) => {
+export const richTextEditorWrapperStyle = (theme) => {
     return mergeStyles({
-        paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,
         paddingInlineStart: `0.75rem`,
         paddingInlineEnd: `0.75rem`,
         maxWidth: '100%',
@@ -105,7 +99,7 @@ const ribbonOverflowButtonRootStyles = (theme) => {
             },
             '.ribbon-table-button-regular-icon': {
                 display: 'inline-block',
-                margin: '-0.25rem 0.25rem 0 0.25rem',
+                margin: '0 0.25rem 0 0.25rem',
                 width: '1.25rem',
                 height: '1.25rem'
             },
@@ -144,8 +138,8 @@ const ribbonButtonRootStyles = (iconColor, hoverIconColor) => {
  */
 export const toolbarButtonStyle = (theme) => {
     return {
-        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
-        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        icon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
         root: { minWidth: 'auto', backgroundColor: 'transparent' },
         rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
         // there is a bug for Android where the press action is considered hover sometimes
@@ -185,14 +179,14 @@ const ribbonTableButtonRootStyles = (theme, isSelected) => {
             '.ribbon-table-button-regular-icon': {
                 width: '1.25rem',
                 height: '1.25rem',
-                margin: '-0.25rem 0.25rem 0 0.25rem',
+                margin: '0 0.25rem 0 0.25rem',
                 color: theme.palette.neutralPrimary,
                 display: isSelected ? 'none' : 'inline-block'
             },
             '.ribbon-table-button-filled-icon': {
                 width: '1.25rem',
                 height: '1.25rem',
-                margin: '-0.25rem 0.25rem 0 0.25rem',
+                margin: '0 0.25rem 0 0.25rem',
                 color: theme.palette.themePrimary,
                 display: isSelected ? 'inline-block' : 'none'
             }
@@ -206,7 +200,7 @@ export const ribbonDividerStyle = (theme) => {
     return mergeStyles({
         color: theme.palette.neutralQuaternaryAlt,
         margin: '0 -0.5rem',
-        paddingTop: '0.5rem'
+        paddingTop: '0.25rem'
     });
 };
 /**
@@ -214,7 +208,7 @@ export const ribbonDividerStyle = (theme) => {
  */
 export const richTextToolbarStyle = {
     // Override for the default white color of the Ribbon component
-    root: { backgroundColor: 'transparent', padding: '0px' }
+    root: { backgroundColor: 'transparent', padding: '0.25rem 0 0 0', height: '2rem' }
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%',\n    // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n    // it gets both horizontal margins because of the user agent stylesheet\n    // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n    '& blockquote': {\n      marginInlineEnd: '0'\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n  return mergeStyles({\n    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary,\n\n    '& table': {\n      background: 'transparent',\n      borderCollapse: 'collapse',\n      width: '100%',\n      borderSpacing: '0',\n      tableLayout: 'auto',\n\n      '& tr': {\n        background: 'transparent',\n        border: `1px solid ${theme.palette.neutralSecondary}`,\n\n        '& td': {\n          background: 'transparent',\n          border: `1px solid ${theme.palette.neutralSecondary}`,\n          wordBreak: 'normal',\n          padding: '0.125rem 0.25rem',\n          verticalAlign: 'top'\n        }\n      }\n    },\n    '& img': {\n      width: '119px'\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      },\n      '.ribbon-table-button-regular-icon': {\n        display: 'inline-block',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        width: '1.25rem',\n        height: '1.25rem'\n      },\n      '.ribbon-table-button-filled-icon': {\n        display: 'none'\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // media query applies only if the device allows real hover interactions\n      // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n      '@media (hover: hover)': {\n        ':hover .ms-Button-icon': {\n          color: hoverIconColor\n        },\n        ':hover .ms-Button-menuIcon': {\n          color: hoverIconColor\n        }\n      },\n      // the classes needs here to apply to styles for icons because of the specificity\n      '.ms-Button-icon': {\n        color: iconColor\n      },\n      '.ms-Button-menuIcon': {\n        color: iconColor\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    // there is a bug for Android where the press action is considered hover sometimes\n    rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n    rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n  };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n  // merge IStyles props\n  return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/**\n * @private\n */\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { height: 'auto' },\n    menuIcon: { height: 'auto' },\n    root: rootRibbonTableButtonStyle(theme),\n    rootChecked: ribbonTableButtonRootStyles(theme, true),\n    rootHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n    rootPressed: ribbonTableButtonRootStyles(theme, true),\n    rootExpanded: ribbonTableButtonRootStyles(theme, true),\n    rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n  };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      '.ribbon-table-button-regular-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        color: theme.palette.neutralPrimary,\n        display: isSelected ? 'none' : 'inline-block'\n      },\n      '.ribbon-table-button-filled-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        color: theme.palette.themePrimary,\n        display: isSelected ? 'inline-block' : 'none'\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0 -0.5rem',\n    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '4rem' : '1.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n  return {\n    width: '24px',\n    height: '24px',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`,\n    cursor: 'pointer',\n    background: 'transparent'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n  return {\n    background: theme.palette.themePrimary,\n    border: `solid 1px ${theme.palette.themeLighterAlt}`\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTablePane = mergeStyles({\n  padding: '8px 10px 12px 10px',\n  boxSizing: 'content-box',\n  minWidth: 'auto'\n});\n\n/**\n * @private\n */\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n  return mergeStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: 'auto auto auto auto auto',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`\n  });\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTitleStyles = mergeStyles({\n  width: '100%',\n  height: '1rem',\n  fontSize: '0.75rem',\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n  marginTop: '0.375rem'\n});\n"]}
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%',\n    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme): string => {\n  return mergeStyles({\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary,\n\n    '& table': {\n      background: 'transparent',\n      borderCollapse: 'collapse',\n      width: '100%',\n      borderSpacing: '0',\n      tableLayout: 'auto',\n\n      '& tr': {\n        background: 'transparent',\n        border: `1px solid ${theme.palette.neutralSecondary}`,\n\n        '& td': {\n          background: 'transparent',\n          border: `1px solid ${theme.palette.neutralSecondary}`,\n          wordBreak: 'normal',\n          padding: '0.125rem 0.25rem',\n          verticalAlign: 'top'\n        }\n      }\n    },\n    '& img': {\n      width: '119px'\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      },\n      '.ribbon-table-button-regular-icon': {\n        display: 'inline-block',\n        margin: '0 0.25rem 0 0.25rem',\n        width: '1.25rem',\n        height: '1.25rem'\n      },\n      '.ribbon-table-button-filled-icon': {\n        display: 'none'\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // media query applies only if the device allows real hover interactions\n      // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n      '@media (hover: hover)': {\n        ':hover .ms-Button-icon': {\n          color: hoverIconColor\n        },\n        ':hover .ms-Button-menuIcon': {\n          color: hoverIconColor\n        }\n      },\n      // the classes needs here to apply to styles for icons because of the specificity\n      '.ms-Button-icon': {\n        color: iconColor\n      },\n      '.ms-Button-menuIcon': {\n        color: iconColor\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    // there is a bug for Android where the press action is considered hover sometimes\n    rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n    rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n  };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n  // merge IStyles props\n  return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/**\n * @private\n */\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { height: 'auto' },\n    menuIcon: { height: 'auto' },\n    root: rootRibbonTableButtonStyle(theme),\n    rootChecked: ribbonTableButtonRootStyles(theme, true),\n    rootHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n    rootPressed: ribbonTableButtonRootStyles(theme, true),\n    rootExpanded: ribbonTableButtonRootStyles(theme, true),\n    rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n  };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      '.ribbon-table-button-regular-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '0 0.25rem 0 0.25rem',\n        color: theme.palette.neutralPrimary,\n        display: isSelected ? 'none' : 'inline-block'\n      },\n      '.ribbon-table-button-filled-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '0 0.25rem 0 0.25rem',\n        color: theme.palette.themePrimary,\n        display: isSelected ? 'inline-block' : 'none'\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0 -0.5rem',\n    paddingTop: '0.25rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent', padding: '0.25rem 0 0 0', height: '2rem' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '4rem' : '1.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n  return {\n    width: '24px',\n    height: '24px',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`,\n    cursor: 'pointer',\n    background: 'transparent'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n  return {\n    background: theme.palette.themePrimary,\n    border: `solid 1px ${theme.palette.themeLighterAlt}`\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTablePane = mergeStyles({\n  padding: '8px 10px 12px 10px',\n  boxSizing: 'content-box',\n  minWidth: 'auto'\n});\n\n/**\n * @private\n */\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n  return mergeStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: 'auto auto auto auto auto',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`\n  });\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTitleStyles = mergeStyles({\n  width: '100%',\n  height: '1rem',\n  fontSize: '0.75rem',\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n  marginTop: '0.375rem'\n});\n"]}

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.d.ts

@@ -51,4 +51,8 @@ export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentM
  * @internal
  */
 export declare const insertImagesToContentString: (content: string, imageUploadsInProgress?: AttachmentMetadataInProgress[]) => string;
+/**
+ * @internal
+ */
+export declare const removeBrokenImageContent: (content: string) => string;
 //# sourceMappingURL=SendBoxUtils.d.ts.map