@azure/communication-react 1.14.1-alpha-202403280012 → 1.14.1-alpha-202403290012

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js

@@ -59,7 +59,7 @@ export const configurationSectionStyle = {
  */
 export const selectionContainerStyle = (theme, noSpeakerDropdownShown) => mergeStyles({
     width: '100%',
-    height: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    minHeight: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
     padding: '1rem',
     borderRadius: theme.effects.roundedCorner6,
     border: `0.0625rem solid ${theme.palette.neutralLight}`,
@@ -189,7 +189,7 @@ export const cameraAndVideoEffectsContainerStyleDesktop = {
 /**
  * @private
  */
-export const effectsButtonStyles = (theme) => {
+export const effectsButtonStyles = (theme, disabled) => {
     return {
         root: {
             background: 'transparent',
@@ -197,26 +197,41 @@ export const effectsButtonStyles = (theme) => {
             color: theme.palette.themePrimary,
             // Top and bottom padding needs to be 5px to match the label padding
             padding: '5px 0.25rem',
-            ':hover, :focus': {
-                color: theme.palette.themePrimary
-            },
+            ':hover, :focus': disabled
+                ? {}
+                : {
+                    color: theme.palette.themePrimary
+                },
             svg: {
                 height: '1rem',
                 width: '1rem'
             }
         },
-        rootChecked: {
-            color: theme.palette.themePrimary
-        },
-        rootHovered: {
-            color: theme.palette.themePrimary
-        },
-        rootPressed: {
-            color: theme.palette.themePrimary
-        },
-        rootFocused: {
-            color: theme.palette.themePrimary
-        }
+        labelHovered: disabled
+            ? {}
+            : {
+                color: theme.palette.themePrimary
+            },
+        rootChecked: disabled
+            ? {}
+            : {
+                color: theme.palette.themePrimary
+            },
+        rootHovered: disabled
+            ? {}
+            : {
+                color: theme.palette.themePrimary
+            },
+        rootPressed: disabled
+            ? {}
+            : {
+                color: theme.palette.themePrimary
+            },
+        rootFocused: disabled
+            ? {}
+            : {
+                color: theme.palette.themePrimary
+            }
     };
 };
 /** @private */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  IStackItemStyles,\n  IStackStyles,\n  IStackTokens,\n  IStyle,\n  mergeStyles,\n  IButtonStyles,\n  Theme,\n  IPanelStyles,\n  IFocusTrapZoneProps,\n  IImageStyles,\n  AnimationStyles,\n  ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\n\nconst LOGO_HEIGHT_REM = 3;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const deviceConfigurationStackTokens: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n  root: {\n    height: '100%',\n    width: '100%',\n    padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',\n    minWidth: desktop\n      ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n      : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop\n      ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n      : '13rem',\n    '::before': !backgroundImageUrl\n      ? undefined\n      : {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 0,\n          width: '100%',\n          height: '100%',\n          backgroundImage: `url(${backgroundImageUrl})`,\n          backgroundSize: 'cover',\n          backgroundPosition: 'center',\n          ...AnimationStyles.fadeIn500\n        }\n  }\n});\n\n/**\n * @private\n */\nexport const configurationSectionStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n  }\n};\n\n/**\n * @private\n */\nexport const selectionContainerStyle = (theme: ITheme, noSpeakerDropdownShown?: boolean): string =>\n  mergeStyles({\n    width: '100%',\n    height: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n    padding: '1rem',\n    borderRadius: theme.effects.roundedCorner6,\n    border: `0.0625rem solid ${theme.palette.neutralLight}`,\n    overflow: 'hidden', // do not let child background overflow the curved corners\n    boxShadow: theme.effects.elevation4,\n    // Style the background of the container to have partial transparency.\n    // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n    // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n    // to parse it correctly.\n    position: 'relative',\n    ':before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: 0,\n      background: theme.palette.white,\n      opacity: 0.9\n    }\n  });\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.2rem',\n      lineHeight: '1rem',\n      fontWeight: 600\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.0625rem',\n      lineHeight: '1.375rem',\n      fontWeight: 600,\n      textAlign: 'center'\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * Ensure configuration page text is legible on top of a background image.\n * @private\n */\nconst configurationPageTextDecoration = (theme: ITheme): IStyle => {\n  return {\n    textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n    fill: theme.semanticColors.bodyText,\n    stroke: theme.palette.whiteTranslucent40,\n    paintOrder: 'stroke fill',\n    strokeWidth: _pxToRem(1.5),\n    text: {\n      letterSpacing: '-0.02rem' // cope with extra width due to stroke width\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      fill: theme.palette.neutralQuaternaryAlt,\n      textShadow: 'none',\n      stroke: 'none'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n  root: {\n    textAlign: 'center',\n    maxWidth: _pxToRem(700),\n    alignSelf: 'center'\n  }\n};\n\nconst callDetailsStyle = (theme: ITheme): IStyle => ({\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n  marginTop: '-0.33rem' // compensate for extra padding around the CallTitle that avoids the SVG shadowing being cut off\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = (theme: ITheme): string => mergeStyles(callDetailsStyle(theme));\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = (theme: ITheme): string =>\n  mergeStyles(callDetailsStyle(theme), {\n    marginBottom: '0.5rem',\n    textAlign: 'center'\n  });\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem',\n  width: 'auto',\n  height: '2.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': {\n        color: theme.palette.themePrimary\n      },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    rootChecked: {\n      color: theme.palette.themePrimary\n    },\n    rootHovered: {\n      color: theme.palette.themePrimary\n    },\n    rootPressed: {\n      color: theme.palette.themePrimary\n    },\n    rootFocused: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%',\n  position: 'relative'\n});\n\n/** @private */\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string =>\n  mergeStyles({\n    width: '100%',\n    position: 'relative',\n\n    // If the content does not fill the height, center it vertically.\n    // We do not include the logo in the centering per design. This allows it to fade\n    // in and not shift the content. To exclude the logo, we subtract the logo height\n    // and margin from the actual height. This allows the flex box's natural centering\n    // to appropriately center the content.\n    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`\n  });\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem', // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: undefined | 'unset' | 'circle'): IImageStyles => ({\n  root: {\n    overflow: 'initial', // prevent the image being clipped\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  image: {\n    height: `${LOGO_HEIGHT_REM}rem`,\n    borderRadius: shape === 'circle' ? '100%' : undefined,\n    aspectRatio: shape === 'circle' ? '1 / 1' : undefined,\n    objectFit: shape === 'circle' ? 'cover' : undefined\n  }\n});\n"]}
+{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAKL,WAAW,EAMX,eAAe,EAEhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,EAAE,CAAC;AAC3D,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,MAAM,CAAC;AAC/D,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAG,MAAM,CAAC;AAE5D,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAiB;IAC3D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAgB,EAAE,kBAA2B,EAAgB,EAAE,CAAC,CAAC;IAC3G,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;QAChE,QAAQ,EAAE,OAAO;YACf,CAAC,CAAC,OAAO,CAAC,oHAAoH;YAC9H,CAAC,CAAC,OAAO,EAAE,mGAAmG;QAChH,SAAS,EAAE,OAAO;YAChB,CAAC,CAAC,OAAO,CAAC,gEAAgE;YAC1E,CAAC,CAAC,OAAO;QACX,UAAU,EAAE,CAAC,kBAAkB;YAC7B,CAAC,CAAC,SAAS;YACX,CAAC,iBACG,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,OAAO,kBAAkB,GAAG,EAC7C,cAAc,EAAE,OAAO,EACvB,kBAAkB,EAAE,QAAQ,IACzB,eAAe,CAAC,SAAS,CAC7B;KACN;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAiB;IACrD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,wCAAwC,KAAK;QAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK;KAC3D;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAE,sBAAgC,EAAU,EAAE,CACjG,WAAW,CAAC;IACV,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,qCAAqC,KAAK;IAC1F,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;IACvD,QAAQ,EAAE,QAAQ,EAAE,0DAA0D;IAC9E,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,sEAAsE;IACtE,sFAAsF;IACtF,uFAAuF;IACvF,yBAAyB;IACzB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE;QACT,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,OAAO,EAAE,GAAG;KACb;CACF,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAU,EAAE,CAClE,WAAW,CACT;IACE,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,GAAG;CAChB,EACD,+BAA+B,CAAC,KAAK,CAAC,CACvC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAU,EAAE,CACjE,WAAW,CACT;IACE,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,QAAQ;CACpB,EACD,+BAA+B,CAAC,KAAK,CAAC,CACvC,CAAC;AAEJ;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,KAAa,EAAU,EAAE;IAChE,OAAO;QACL,UAAU,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;QAC7D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;QACnC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB;QACxC,UAAU,EAAE,aAAa;QACzB,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC;QAC1B,IAAI,EAAE;YACJ,aAAa,EAAE,UAAU,CAAC,4CAA4C;SACvE;QACD,gCAAgC,EAAE;YAChC,iBAAiB,EAAE,MAAM;YACzB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB;YACxC,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,MAAM;SACf;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC;IACnD,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;IAC7D,SAAS,EAAE,UAAU,CAAC,gGAAgG;CACvH,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAU,EAAE,CAC9D,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;IACnC,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAiB;IAChE,IAAI,EAAE;QACJ,UAAU,EAAE,UAAU;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAiB;IAC/D,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,OAAO;IACjB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,0CAA0C,GAAqB;IAC1E,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,QAAkB,EAAiB,EAAE;IACrF,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;YACjC,oEAAoE;YACpE,OAAO,EAAE,aAAa;YACtB,gBAAgB,EAAE,QAAQ;gBACxB,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;iBAClC;YACL,GAAG,EAAE;gBACH,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,YAAY,EAAE,QAAQ;YACpB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;QACL,WAAW,EAAE,QAAQ;YACnB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;QACL,WAAW,EAAE,QAAQ;YACnB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;QACL,WAAW,EAAE,QAAQ;YACnB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;QACL,WAAW,EAAE,QAAQ;YACnB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC;gBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;KACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,WAAoB,EAAE,OAAiB,EAAU,EAAE,CAC9F,WAAW,CAAC;IACV,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IAEpB,iEAAiE;IACjE,iFAAiF;IACjF,iFAAiF;IACjF,kFAAkF;IAClF,uCAAuC;IACvC,MAAM,EAAE,eAAe,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG;CACrF,CAAC,CAAC;AAEL,eAAe;AACf,MAAM,CAAC,MAAM,WAAW,GAA0B;IAChD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,MAAM,EAAE,yBAAyB;QAC9C,YAAY,EAAE,MAAM,CAAC,yBAAyB;KAC/C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAC,yBAAyB;KAC7C;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAqC,EAAgB,EAAE,CAAC,CAAC;IAClF,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS,EAAE,kCAAkC;QACvD,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;KACzB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG,eAAe,KAAK;QAC/B,YAAY,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACrD,WAAW,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACrD,SAAS,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;KACpD;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  IStackItemStyles,\n  IStackStyles,\n  IStackTokens,\n  IStyle,\n  mergeStyles,\n  IButtonStyles,\n  Theme,\n  IPanelStyles,\n  IFocusTrapZoneProps,\n  IImageStyles,\n  AnimationStyles,\n  ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\n\nconst LOGO_HEIGHT_REM = 3;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const deviceConfigurationStackTokens: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n  root: {\n    height: '100%',\n    width: '100%',\n    padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',\n    minWidth: desktop\n      ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n      : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop\n      ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n      : '13rem',\n    '::before': !backgroundImageUrl\n      ? undefined\n      : {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 0,\n          width: '100%',\n          height: '100%',\n          backgroundImage: `url(${backgroundImageUrl})`,\n          backgroundSize: 'cover',\n          backgroundPosition: 'center',\n          ...AnimationStyles.fadeIn500\n        }\n  }\n});\n\n/**\n * @private\n */\nexport const configurationSectionStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n  }\n};\n\n/**\n * @private\n */\nexport const selectionContainerStyle = (theme: ITheme, noSpeakerDropdownShown?: boolean): string =>\n  mergeStyles({\n    width: '100%',\n    minHeight: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n    padding: '1rem',\n    borderRadius: theme.effects.roundedCorner6,\n    border: `0.0625rem solid ${theme.palette.neutralLight}`,\n    overflow: 'hidden', // do not let child background overflow the curved corners\n    boxShadow: theme.effects.elevation4,\n    // Style the background of the container to have partial transparency.\n    // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n    // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n    // to parse it correctly.\n    position: 'relative',\n    ':before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: 0,\n      background: theme.palette.white,\n      opacity: 0.9\n    }\n  });\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.2rem',\n      lineHeight: '1rem',\n      fontWeight: 600\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.0625rem',\n      lineHeight: '1.375rem',\n      fontWeight: 600,\n      textAlign: 'center'\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * Ensure configuration page text is legible on top of a background image.\n * @private\n */\nconst configurationPageTextDecoration = (theme: ITheme): IStyle => {\n  return {\n    textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n    fill: theme.semanticColors.bodyText,\n    stroke: theme.palette.whiteTranslucent40,\n    paintOrder: 'stroke fill',\n    strokeWidth: _pxToRem(1.5),\n    text: {\n      letterSpacing: '-0.02rem' // cope with extra width due to stroke width\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      fill: theme.palette.neutralQuaternaryAlt,\n      textShadow: 'none',\n      stroke: 'none'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n  root: {\n    textAlign: 'center',\n    maxWidth: _pxToRem(700),\n    alignSelf: 'center'\n  }\n};\n\nconst callDetailsStyle = (theme: ITheme): IStyle => ({\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n  marginTop: '-0.33rem' // compensate for extra padding around the CallTitle that avoids the SVG shadowing being cut off\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = (theme: ITheme): string => mergeStyles(callDetailsStyle(theme));\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = (theme: ITheme): string =>\n  mergeStyles(callDetailsStyle(theme), {\n    marginBottom: '0.5rem',\n    textAlign: 'center'\n  });\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem',\n  width: 'auto',\n  height: '2.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme, disabled?: boolean): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': disabled\n        ? {}\n        : {\n            color: theme.palette.themePrimary\n          },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    labelHovered: disabled\n      ? {}\n      : {\n          color: theme.palette.themePrimary\n        },\n    rootChecked: disabled\n      ? {}\n      : {\n          color: theme.palette.themePrimary\n        },\n    rootHovered: disabled\n      ? {}\n      : {\n          color: theme.palette.themePrimary\n        },\n    rootPressed: disabled\n      ? {}\n      : {\n          color: theme.palette.themePrimary\n        },\n    rootFocused: disabled\n      ? {}\n      : {\n          color: theme.palette.themePrimary\n        }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%',\n  position: 'relative'\n});\n\n/** @private */\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string =>\n  mergeStyles({\n    width: '100%',\n    position: 'relative',\n\n    // If the content does not fill the height, center it vertically.\n    // We do not include the logo in the centering per design. This allows it to fade\n    // in and not shift the content. To exclude the logo, we subtract the logo height\n    // and margin from the actual height. This allows the flex box's natural centering\n    // to appropriately center the content.\n    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`\n  });\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem', // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: undefined | 'unset' | 'circle'): IImageStyles => ({\n  root: {\n    overflow: 'initial', // prevent the image being clipped\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  image: {\n    height: `${LOGO_HEIGHT_REM}rem`,\n    borderRadius: shape === 'circle' ? '100%' : undefined,\n    aspectRatio: shape === 'circle' ? '1 / 1' : undefined,\n    objectFit: shape === 'circle' ? 'cover' : undefined\n  }\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.d.ts

@@ -1,4 +1,4 @@
-import { IDropdownStyles, IStackTokens, Theme } from '@fluentui/react';
+import { IDropdownStyles, IStackStyles, IStackTokens, Theme } from '@fluentui/react';
 /**
  * @private
  */
@@ -19,4 +19,8 @@ export declare const dropDownTitleIconStyles: string;
  * @private
  */
 export declare const optionIconStyles: string;
+/**
+ * @private
+ */
+export declare const deviceSelectionContainerStyles: IStackStyles;
 //# sourceMappingURL=LocalDeviceSettings.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.js

@@ -69,4 +69,16 @@ export const optionIconStyles = mergeStyles({
     marginRight: '8px',
     verticalAlign: 'text-top'
 });
+/**
+ * @private
+ */
+export const deviceSelectionContainerStyles = {
+    root: {
+        /**
+         * this is to move the device selection container above the larger border
+         * container that is occluding messages
+         */
+        zIndex: 1
+    }
+};
 //# sourceMappingURL=LocalDeviceSettings.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalDeviceSettings.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEpF,MAAM,mBAAmB,GAAG,IAAI,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAA4B,EAAE,CAAC,CAAC;IACzE,gBAAgB,EAAE;QAChB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,GAAG,mBAAmB,KAAK;KACxC;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAChC;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,KAAK,EAAE,MAAM;QACb,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;SACrB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,MAAM;QAClB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;KAC1D;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,UAAU;QAEpB,uFAAuF;QACvF,MAAM,EAAE,CAAC;KACV;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,UAAU;CAC1B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IDropdownStyles, IStackTokens, Theme, mergeStyles } from '@fluentui/react';\n\nconst DROPDOWN_HEIGHT_REM = 2.25;\n\n/**\n * @private\n */\nexport const mainStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const soundStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const dropDownStyles = (theme: Theme): Partial<IDropdownStyles> => ({\n  caretDownWrapper: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: `${DROPDOWN_HEIGHT_REM}rem`\n  },\n  dropdownItem: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    background: theme.palette.white\n  },\n  dropdown: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    width: '100%',\n    svg: {\n      verticalAlign: 'top'\n    }\n  },\n  title: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: '2rem',\n    borderRadius: '0.25rem',\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`\n  },\n  label: {\n    fontWeight: 600,\n    fontSize: '0.875rem',\n\n    // Add z-index to ensure labels are rendered above the configuration section background\n    zIndex: 1\n  },\n  errorMessage: {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const dropDownTitleIconStyles = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: '0',\n  maxWidth: '100%',\n  overflowWrap: 'break-word',\n  margin: '.063rem'\n});\n\n/**\n * @private\n */\nexport const optionIconStyles = mergeStyles({\n  marginRight: '8px',\n  verticalAlign: 'text-top'\n});\n"]}
+{"version":3,"file":"LocalDeviceSettings.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LocalDeviceSettings.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAsD,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAElG,MAAM,mBAAmB,GAAG,IAAI,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAA4B,EAAE,CAAC,CAAC;IACzE,gBAAgB,EAAE;QAChB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,GAAG,mBAAmB,KAAK;KACxC;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAChC;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,KAAK,EAAE,MAAM;QACb,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;SACrB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,UAAU,EAAE,MAAM;QAClB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;KAC1D;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,UAAU;QAEpB,uFAAuF;QACvF,MAAM,EAAE,CAAC;KACV;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,UAAU;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,IAAI,EAAE;QACJ;;;WAGG;QACH,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IDropdownStyles, IStackStyles, IStackTokens, Theme, mergeStyles } from '@fluentui/react';\n\nconst DROPDOWN_HEIGHT_REM = 2.25;\n\n/**\n * @private\n */\nexport const mainStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const soundStackTokens: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const dropDownStyles = (theme: Theme): Partial<IDropdownStyles> => ({\n  caretDownWrapper: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: `${DROPDOWN_HEIGHT_REM}rem`\n  },\n  dropdownItem: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    background: theme.palette.white\n  },\n  dropdown: {\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    width: '100%',\n    svg: {\n      verticalAlign: 'top'\n    }\n  },\n  title: {\n    fontSize: '0.875rem',\n    height: `${DROPDOWN_HEIGHT_REM}rem`,\n    lineHeight: '2rem',\n    borderRadius: '0.25rem',\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`\n  },\n  label: {\n    fontWeight: 600,\n    fontSize: '0.875rem',\n\n    // Add z-index to ensure labels are rendered above the configuration section background\n    zIndex: 1\n  },\n  errorMessage: {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const dropDownTitleIconStyles = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: '0',\n  maxWidth: '100%',\n  overflowWrap: 'break-word',\n  margin: '.063rem'\n});\n\n/**\n * @private\n */\nexport const optionIconStyles = mergeStyles({\n  marginRight: '8px',\n  verticalAlign: 'text-top'\n});\n\n/**\n * @private\n */\nexport const deviceSelectionContainerStyles: IStackStyles = {\n  root: {\n    /**\n     * this is to move the device selection container above the larger border\n     * container that is occluding messages\n     */\n    zIndex: 1\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.d.ts

@@ -1,4 +1,4 @@
-import { ITheme } from '@fluentui/react';
+import { IButtonStyles, ITheme } from '@fluentui/react';
 /**
  * @private
  */
@@ -25,17 +25,5 @@ export declare const localPreviewTileStyle: {
 /**
  * @private
  */
-export declare const localPreviewButtonStyle: {
-    root: {
-        '@media (forced-colors: active)': {
-            ':focus': {
-                border: string;
-            };
-            ':focus::after': {
-                border: string;
-                outline: string;
-            };
-        };
-    };
-};
+export declare const localPreviewButtonStyle: (isMobile: boolean) => IButtonStyles;
 //# sourceMappingURL=LocalPreview.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
 import { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';
+import { _pxToRem } from "../../../../../acs-ui-common/src";
 const localPreviewContainerStyle = (theme) => ({
     borderRadius: theme.effects.roundedCorner6,
     overflow: 'hidden' // do not let child background overflow the curved corners
@@ -46,17 +47,20 @@ export const localPreviewTileStyle = {
 /**
  * @private
  */
-export const localPreviewButtonStyle = {
-    root: {
-        '@media (forced-colors: active)': {
-            ':focus': {
-                border: '1px solid !important' // we need bang important to override fluents colours
-            },
-            ':focus::after': {
-                border: 'unset !important', // we need bang important to override fluents colours
-                outline: 'unset !important'
+export const localPreviewButtonStyle = (isMobile) => {
+    return {
+        root: {
+            minWidth: !isMobile ? _pxToRem(75) : 'unset', // we only want to enforce this for desktop views
+            '@media (forced-colors: active)': {
+                ':focus': {
+                    border: '1px solid !important' // we need bang important to override fluents colours
+                },
+                ':focus::after': {
+                    border: 'unset !important', // we need bang important to override fluents colours
+                    outline: 'unset !important'
+                }
             }
         }
-    }
+    };
 };
 //# sourceMappingURL=LocalPreview.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EACL,qCAAqC,EACrC,wCAAwC,EACxC,wCAAwC,EACzC,MAAM,4BAA4B,CAAC;AAEpC,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC;IAC7D,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,QAAQ,EAAE,QAAQ,CAAC,0DAA0D;CAC9E,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAa,EAAU,EAAE,CACzE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG,qCAAqC,KAAK;IACrD,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;IACvD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;CACpC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,KAAa,EAAU,EAAE,CACxE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG,qCAAqC,KAAK;CACzD,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,QAAQ,EAAE;gBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;aACrF;YACD,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB,EAAE,qDAAqD;gBACjF,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, ITheme, mergeStyles } from '@fluentui/react';\nimport {\n  CONFIGURATION_PAGE_SECTION_HEIGHT_REM,\n  CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM,\n  CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM\n} from './CallConfiguration.styles';\n\nconst localPreviewContainerStyle = (theme: ITheme): IStyle => ({\n  borderRadius: theme.effects.roundedCorner6,\n  overflow: 'hidden' // do not let child background overflow the curved corners\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = (theme: ITheme): string =>\n  mergeStyles(localPreviewContainerStyle(theme), {\n    width: '100%',\n    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,\n    border: `0.0625rem solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner6,\n    boxShadow: theme.effects.elevation4\n  });\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(localPreviewContainerStyle(theme), {\n    width: '100%',\n    height: '100%',\n    minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`\n  });\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        border: '1px solid !important' // we need bang important to override fluents colours\n      },\n      ':focus::after': {\n        border: 'unset !important', // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};\n"]}
+{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EACL,qCAAqC,EACrC,wCAAwC,EACxC,wCAAwC,EACzC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC;IAC7D,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,QAAQ,EAAE,QAAQ,CAAC,0DAA0D;CAC9E,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAa,EAAU,EAAE,CACzE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG,qCAAqC,KAAK;IACrD,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;IACvD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;CACpC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,KAAa,EAAU,EAAE,CACxE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG,qCAAqC,KAAK;CACzD,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,QAAiB,EAAiB,EAAE;IAC1E,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,iDAAiD;YAC/F,gCAAgC,EAAE;gBAChC,QAAQ,EAAE;oBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;iBACrF;gBACD,eAAe,EAAE;oBACf,MAAM,EAAE,kBAAkB,EAAE,qDAAqD;oBACjF,OAAO,EAAE,kBAAkB;iBAC5B;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, ITheme, mergeStyles } from '@fluentui/react';\nimport {\n  CONFIGURATION_PAGE_SECTION_HEIGHT_REM,\n  CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM,\n  CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM\n} from './CallConfiguration.styles';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\nconst localPreviewContainerStyle = (theme: ITheme): IStyle => ({\n  borderRadius: theme.effects.roundedCorner6,\n  overflow: 'hidden' // do not let child background overflow the curved corners\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = (theme: ITheme): string =>\n  mergeStyles(localPreviewContainerStyle(theme), {\n    width: '100%',\n    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,\n    border: `0.0625rem solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner6,\n    boxShadow: theme.effects.elevation4\n  });\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(localPreviewContainerStyle(theme), {\n    width: '100%',\n    height: '100%',\n    minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`\n  });\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = (isMobile: boolean): IButtonStyles => {\n  return {\n    root: {\n      minWidth: !isMobile ? _pxToRem(75) : 'unset', // we only want to enforce this for desktop views\n      '@media (forced-colors: active)': {\n        ':focus': {\n          border: '1px solid !important' // we need bang important to override fluents colours\n        },\n        ':focus::after': {\n          border: 'unset !important', // we need bang important to override fluents colours\n          outline: 'unset !important'\n        }\n      }\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * @private
+ */
+export interface AttachmentDownloadErrorBarProps {
+    /**callback to dismiss the download error message */
+    onDismissDownloadErrorMessage: () => void;
+    /** Error message to render */
+    attachmentDownloadErrorMessage: string;
+}
+/**
+ * @private
+ */
+export declare const AttachmentDownloadErrorBar: (props: AttachmentDownloadErrorBarProps) => JSX.Element;
+//# sourceMappingURL=AttachmentDownloadErrorBar.d.ts.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/{FileDownloadErrorBar.js → AttachmentDownloadErrorBar.js}

@@ -5,17 +5,17 @@ import React from 'react';
 /**
  * @private
  */
-export const FileDownloadErrorBar = (props) => {
-    const { fileDownloadErrorMessage, onDismissDownloadErrorMessage } = props;
+export const AttachmentDownloadErrorBar = (props) => {
+    const { attachmentDownloadErrorMessage, onDismissDownloadErrorMessage } = props;
     const messageBarIconProps = { iconName: 'ProtectedDocument' };
-    if (fileDownloadErrorMessage !== '') {
+    if (attachmentDownloadErrorMessage !== '') {
         return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
                     onDismissDownloadErrorMessage();
-                }, messageBarIconProps: messageBarIconProps }, fileDownloadErrorMessage)));
+                }, messageBarIconProps: messageBarIconProps }, attachmentDownloadErrorMessage)));
     }
     else {
         return React.createElement(React.Fragment, null);
     }
 };
-//# sourceMappingURL=FileDownloadErrorBar.js.map
+//# sourceMappingURL=AttachmentDownloadErrorBar.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentDownloadErrorBar.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EAAE,8BAA8B,EAAE,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,mBAAmB,GAAG,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAE9D,IAAI,8BAA8B,KAAK,EAAE,EAAE,CAAC;QAC1C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ;YACtE,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;oBACd,6BAA6B,EAAE,CAAC;gBAClC,CAAC,EACD,mBAAmB,EAAE,mBAAmB,IAEvC,8BAA8B,CACpB,CACP,CACT,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface AttachmentDownloadErrorBarProps {\n  /**callback to dismiss the download error message */\n  onDismissDownloadErrorMessage: () => void;\n  /** Error message to render */\n  attachmentDownloadErrorMessage: string;\n}\n\n/**\n * @private\n */\nexport const AttachmentDownloadErrorBar = (props: AttachmentDownloadErrorBarProps): JSX.Element => {\n  const { attachmentDownloadErrorMessage, onDismissDownloadErrorMessage } = props;\n  const messageBarIconProps = { iconName: 'ProtectedDocument' };\n\n  if (attachmentDownloadErrorMessage !== '') {\n    return (\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <MessageBar\n          messageBarType={MessageBarType.warning}\n          onDismiss={() => {\n            onDismissDownloadErrorMessage();\n          }}\n          messageBarIconProps={messageBarIconProps}\n        >\n          {attachmentDownloadErrorMessage}\n        </MessageBar>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { AttachmentMetadata } from "../../../../react-components/src";
 import { CommunicationParticipant, MessageProps, MessageRenderer, MessageThreadStyles, ParticipantMenuItemsCallback, SendBoxStylesProps, TypingIndicatorStylesProps } from "../../../../react-components/src";
+import { AttachmentMenuAction, ChatMessage } from "../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
 import { ChatCompositeOptions } from './ChatComposite';
-import { FileDownloadHandler } from "../../../../react-components/src";
 import { FileUploadHandler } from "../../../../react-components/src";
 /**
  * @private
@@ -50,11 +51,9 @@ export interface FileSharingOptions {
      */
     uploadHandler: FileUploadHandler;
     /**
-     * A function of type {@link FileDownloadHandler} for handling file downloads.
-     * If the function is not specified, the file's `url` will be opened in a new tab to
-     * initiate the download.
+     * A temp function until this interface is deprecated
      */
-    downloadHandler?: FileDownloadHandler;
+    actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js

@@ -27,7 +27,7 @@ import { participantListContainerPadding } from '../common/styles/ParticipantCon
 import { ChatScreenPeoplePane } from './ChatScreenPeoplePane';
 import { toFlatCommunicationIdentifier } from "../../../../acs-ui-common/src";
 /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-import { FileDownloadErrorBar } from './FileDownloadErrorBar';
+import { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';
 import { _AttachmentDownloadCards } from "../../../../react-components/src";
 import { ImageOverlay } from "../../../../react-components/src";
 import { SendBox } from '../common/SendBox';
@@ -106,9 +106,11 @@ export const ChatScreen = (props) => {
         fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
     }, [adapter, fileSharing, userId]);
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const onRenderFileDownloads = useCallback((userId, message) => (React.createElement(_AttachmentDownloadCards, { userId: userId, fileMetadata: message.files || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
+    const onRenderAttachmentDownloads = useCallback((userId, message) => (React.createElement(_AttachmentDownloadCards, { attachments: message.files, message: message, 
+        // temp walkaround until upload is refactored
+        actionsForAttachment: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.actionsForAttachment, onActionHandlerFailed: (errorMessage) => {
             setDownloadErrorMessage(errorMessage);
-        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.actionsForAttachment]);
     const onInlineImageClicked = useCallback((attachmentId, messageId) => {
         var _a, _b;
         const message = adapter.getState().thread.chatMessages[messageId];
@@ -197,10 +199,11 @@ export const ChatScreen = (props) => {
         }
     }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
     const AttachFileButton = useCallback(() => {
+        var _a, _b;
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
         }
-        return (React.createElement(FileUploadButton, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
+        return (React.createElement(FileUploadButton, { accept: (_a = fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept) !== null && _a !== void 0 ? _a : '*', multiple: (_b = fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple) !== null && _b !== void 0 ? _b : true, onChange: fileUploadButtonOnChange }));
     }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
     return (React.createElement(Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
@@ -208,12 +211,12 @@ export const ChatScreen = (props) => {
             React.createElement(Stack, { className: chatWrapper, grow: true },
                 (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
                 /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-                React.createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
+                React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
                         setDownloadErrorMessage('');
-                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
+                    }, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
                 React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
                     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-                    onRenderFileDownloads: onRenderFileDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                    onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React.createElement(Stack, { className: mergeStyles(sendboxContainerStyles) },
                     React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React.createElement(Stack, { horizontal: formFactor === 'mobile' },

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\nimport {\n  CommunicationParticipant,\n  ErrorBar,\n  MessageProps,\n  MessageRenderer,\n  MessageThread,\n  MessageThreadStyles,\n  ParticipantMenuItemsCallback,\n  SendBoxStylesProps,\n  TypingIndicator,\n  TypingIndicatorStylesProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ChatMessage } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FileDownloadHandler } from '@internal/react-components';\nimport { FileUploadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n  chatArea,\n  chatContainer,\n  chatWrapper,\n  messageThreadChatCompositeStyles,\n  sendboxContainerStyles,\n  typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FileDownloadErrorBar } from './FileDownloadErrorBar';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { SendBox } from '../common/SendBox';\nimport { ResourceFetchResult } from '@internal/chat-stateful-client';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  fileSharing?: FileSharingOptions;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n  /**\n   * A string containing the comma separated list of accepted file types.\n   * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n   * Accepts any type of file if not specified.\n   * @beta\n   */\n  accept?: string;\n  /**\n   * Allows multiple files to be selected if set to `true`.\n   * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n   * @defaultValue false\n   * @beta\n   */\n  multiple?: boolean;\n  /**\n   * A function of type {@link FileUploadHandler} for handling file uploads.\n   * @beta\n   */\n  uploadHandler: FileUploadHandler;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n}\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    fileSharing,\n    formFactor\n  } = props;\n\n  const defaultNumberOfChatMessagesToReload = 5;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n\n  const adapter = useAdapter();\n  const theme = useTheme();\n\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n\n  useEffect(() => {\n    if (overlayImageItem === undefined) {\n      return;\n    }\n    const message = adapter.getState().thread.chatMessages[overlayImageItem.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceCache = message.resourceCache;\n    if (overlayImageItem.imageSrc === '' && resourceCache && resourceCache[overlayImageItem.imageUrl]) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceCache[overlayImageItem.imageUrl]);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItem,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n    // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messageThreadProps.messages]);\n\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n\n    return src;\n  };\n\n  const onRenderAvatarCallback = useCallback(\n    (userId?: string, defaultOptions?: AvatarPersonaProps) => {\n      return (\n        <AvatarPersona\n          userId={userId}\n          hidePersonaDetails={true}\n          {...defaultOptions}\n          dataProvider={onFetchAvatarPersonaData}\n        />\n      );\n    },\n    [onFetchAvatarPersonaData]\n  );\n\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign(\n      {},\n      messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n      styles?.messageThread\n    );\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n\n  const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n  const fileUploadButtonOnChange = useCallback(\n    (files: FileList | null): void => {\n      if (!files) {\n        return;\n      }\n\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      const fileUploads = adapter.registerActiveFileUploads(Array.from(files));\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      fileSharing?.uploadHandler(userId, fileUploads);\n    },\n    [adapter, fileSharing, userId]\n  );\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderFileDownloads = useCallback(\n    (userId: string, message: ChatMessage) => (\n      <_AttachmentDownloadCards\n        userId={userId}\n        fileMetadata={message.files || []}\n        downloadHandler={fileSharing?.downloadHandler}\n        onDownloadErrorMessage={(errorMessage: string) => {\n          setDownloadErrorMessage(errorMessage);\n        }}\n      />\n    ),\n    [fileSharing?.downloadHandler]\n  );\n\n  const onInlineImageClicked = useCallback(\n    (attachmentId: string, messageId: string) => {\n      const message = adapter.getState().thread.chatMessages[messageId];\n      const inlinedImages = message.content?.attachments?.filter((attachment) => {\n        return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n      });\n\n      if (!inlinedImages || inlinedImages.length <= 0) {\n        return;\n      }\n\n      const attachment = inlinedImages[0];\n\n      const resourceCache = message.resourceCache;\n      let imageSrc = '';\n\n      if (attachment.url) {\n        if (resourceCache && resourceCache[attachment.url]) {\n          imageSrc = getResourceSourceUrl(resourceCache[attachment.url]);\n        } else {\n          adapter.downloadResourceToCache({\n            threadId: adapter.getState().thread.threadId,\n            messageId: messageId,\n            resourceUrl: attachment.url\n          });\n        }\n      }\n\n      const titleIconRenderOptions = {\n        text: message.senderDisplayName,\n        size: PersonaSize.size32,\n        showOverflowTooltip: false,\n        imageAlt: message.senderDisplayName\n      };\n\n      const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n      const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n      const overlayImage: OverlayImageItem = {\n        title: message.senderDisplayName || '',\n        titleIcon: titleIcon,\n        attachmentId: attachment.id,\n        imageSrc: imageSrc,\n        messageId: messageId,\n        imageUrl: attachment.url || ''\n      };\n\n      setIsImageOverlayOpen(true);\n      setOverlayImageItem(overlayImage);\n    },\n    [adapter, onRenderAvatarCallback, userId]\n  );\n\n  const inlineImageOptions = {\n    onRenderInlineImage: (\n      inlineImage: InlineImage,\n      defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n    ): JSX.Element => {\n      const message = adapter.getState().thread.chatMessages[inlineImage.messageId];\n      const attachment = message?.content?.attachments?.find(\n        (attachment) => attachment.id === inlineImage.imageAttributes.id\n      );\n\n      if (attachment === undefined) {\n        return defaultOnRender(inlineImage);\n      }\n\n      let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n      const resourceCache = message.resourceCache;\n      if (\n        resourceCache &&\n        attachment.previewUrl &&\n        resourceCache[attachment.previewUrl] &&\n        resourceCache[attachment.previewUrl].error\n      ) {\n        pointerEvents = 'none';\n      }\n\n      return (\n        <span\n          key={inlineImage.imageAttributes.id}\n          onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)}\n          tabIndex={0}\n          role=\"button\"\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n            }\n          }}\n          style={{ cursor: 'pointer', pointerEvents }}\n        >\n          {defaultOnRender(inlineImage)}\n        </span>\n      );\n    }\n  };\n\n  const onDownloadButtonClicked = useCallback(\n    (imageSrc: string): void => {\n      if (imageSrc === '') {\n        return;\n      }\n      if (isIOS()) {\n        window.open(imageSrc, '_blank');\n      } else {\n        // Create a new anchor element\n        const a = document.createElement('a');\n        // Set the href and download attributes for the anchor element\n        a.href = imageSrc;\n        a.download = overlayImageItem?.attachmentId || '';\n        a.rel = 'noopener noreferrer';\n        a.target = '_blank';\n\n        // Programmatically click the anchor element to trigger the download\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      }\n    },\n    [overlayImageItem?.attachmentId]\n  );\n\n  const AttachFileButton = useCallback(() => {\n    if (!fileSharing?.uploadHandler) {\n      return null;\n    }\n    return (\n      <FileUploadButton\n        accept={fileSharing?.accept}\n        multiple={fileSharing?.multiple}\n        onChange={fileUploadButtonOnChange}\n      />\n    );\n  }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\n\n  return (\n    <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            <FileDownloadErrorBar\n              onDismissDownloadErrorMessage={useCallback(() => {\n                setDownloadErrorMessage('');\n              }, [])}\n              fileDownloadErrorMessage={downloadErrorMessage || ''}\n            />\n          }\n          <MessageThread\n            {...messageThreadProps}\n            onRenderAvatar={onRenderAvatarCallback}\n            onRenderMessage={onRenderMessage}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderFileDownloads={onRenderFileDownloads}\n            inlineImageOptions={inlineImageOptions}\n            numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n            styles={messageThreadStyles}\n          />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? (\n                onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n              ) : (\n                <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n              )}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (\n                <Stack verticalAlign=\"center\">\n                  <AttachFileButton />\n                </Stack>\n              )}\n              <Stack grow>\n                <SendBox\n                  options={options}\n                  styles={styles?.sendBox}\n                  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n                  adapter={adapter}\n                />\n              </Stack>\n              {formFactor !== 'mobile' && <AttachFileButton />}\n            </Stack>\n          </Stack>\n        </Stack>\n        {\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          options?.participantPane === true && (\n            <ChatScreenPeoplePane\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              isMobile={formFactor === 'mobile'}\n            />\n          )\n        }\n      </Stack>\n      {overlayImageItem && (\n        <ImageOverlay\n          {...overlayImageItem}\n          isOpen={isImageOverlayOpen}\n          onDismiss={() => {\n            setOverlayImageItem(undefined);\n            setIsImageOverlayOpen(false);\n            adapter.removeResourceFromCache({\n              threadId: adapter.getState().thread.threadId,\n              messageId: overlayImageItem.messageId,\n              resourceUrl: overlayImageItem.imageUrl\n            });\n          }}\n          onDownloadButtonClicked={onDownloadButtonClicked}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '@internal/react-components';\nimport {\n  CommunicationParticipant,\n  ErrorBar,\n  MessageProps,\n  MessageRenderer,\n  MessageThread,\n  MessageThreadStyles,\n  ParticipantMenuItemsCallback,\n  SendBoxStylesProps,\n  TypingIndicator,\n  TypingIndicatorStylesProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMenuAction, ChatMessage } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { FileUploadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n  chatArea,\n  chatContainer,\n  chatWrapper,\n  messageThreadChatCompositeStyles,\n  sendboxContainerStyles,\n  typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { SendBox } from '../common/SendBox';\nimport { ResourceFetchResult } from '@internal/chat-stateful-client';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  fileSharing?: FileSharingOptions;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n  /**\n   * A string containing the comma separated list of accepted file types.\n   * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n   * Accepts any type of file if not specified.\n   * @beta\n   */\n  accept?: string;\n  /**\n   * Allows multiple files to be selected if set to `true`.\n   * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n   * @defaultValue false\n   * @beta\n   */\n  multiple?: boolean;\n  /**\n   * A function of type {@link FileUploadHandler} for handling file uploads.\n   * @beta\n   */\n  uploadHandler: FileUploadHandler;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * A temp function until this interface is deprecated\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n}\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    fileSharing,\n    formFactor\n  } = props;\n\n  const defaultNumberOfChatMessagesToReload = 5;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n\n  const adapter = useAdapter();\n  const theme = useTheme();\n\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n\n  useEffect(() => {\n    if (overlayImageItem === undefined) {\n      return;\n    }\n    const message = adapter.getState().thread.chatMessages[overlayImageItem.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceCache = message.resourceCache;\n    if (overlayImageItem.imageSrc === '' && resourceCache && resourceCache[overlayImageItem.imageUrl]) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceCache[overlayImageItem.imageUrl]);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItem,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n    // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messageThreadProps.messages]);\n\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n\n    return src;\n  };\n\n  const onRenderAvatarCallback = useCallback(\n    (userId?: string, defaultOptions?: AvatarPersonaProps) => {\n      return (\n        <AvatarPersona\n          userId={userId}\n          hidePersonaDetails={true}\n          {...defaultOptions}\n          dataProvider={onFetchAvatarPersonaData}\n        />\n      );\n    },\n    [onFetchAvatarPersonaData]\n  );\n\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign(\n      {},\n      messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n      styles?.messageThread\n    );\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n\n  const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n  const fileUploadButtonOnChange = useCallback(\n    (files: FileList | null): void => {\n      if (!files) {\n        return;\n      }\n\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      const fileUploads = adapter.registerActiveFileUploads(Array.from(files));\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      fileSharing?.uploadHandler(userId, fileUploads);\n    },\n    [adapter, fileSharing, userId]\n  );\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloads = useCallback(\n    (userId: string, message: ChatMessage) => (\n      <_AttachmentDownloadCards\n        attachments={message.files}\n        message={message}\n        // temp walkaround until upload is refactored\n        actionsForAttachment={fileSharing?.actionsForAttachment}\n        onActionHandlerFailed={(errorMessage: string) => {\n          setDownloadErrorMessage(errorMessage);\n        }}\n      />\n    ),\n    [fileSharing?.actionsForAttachment]\n  );\n\n  const onInlineImageClicked = useCallback(\n    (attachmentId: string, messageId: string) => {\n      const message = adapter.getState().thread.chatMessages[messageId];\n      const inlinedImages = message.content?.attachments?.filter((attachment) => {\n        return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n      });\n\n      if (!inlinedImages || inlinedImages.length <= 0) {\n        return;\n      }\n\n      const attachment = inlinedImages[0];\n\n      const resourceCache = message.resourceCache;\n      let imageSrc = '';\n\n      if (attachment.url) {\n        if (resourceCache && resourceCache[attachment.url]) {\n          imageSrc = getResourceSourceUrl(resourceCache[attachment.url]);\n        } else {\n          adapter.downloadResourceToCache({\n            threadId: adapter.getState().thread.threadId,\n            messageId: messageId,\n            resourceUrl: attachment.url\n          });\n        }\n      }\n\n      const titleIconRenderOptions = {\n        text: message.senderDisplayName,\n        size: PersonaSize.size32,\n        showOverflowTooltip: false,\n        imageAlt: message.senderDisplayName\n      };\n\n      const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n      const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n      const overlayImage: OverlayImageItem = {\n        title: message.senderDisplayName || '',\n        titleIcon: titleIcon,\n        attachmentId: attachment.id,\n        imageSrc: imageSrc,\n        messageId: messageId,\n        imageUrl: attachment.url || ''\n      };\n\n      setIsImageOverlayOpen(true);\n      setOverlayImageItem(overlayImage);\n    },\n    [adapter, onRenderAvatarCallback, userId]\n  );\n\n  const inlineImageOptions = {\n    onRenderInlineImage: (\n      inlineImage: InlineImage,\n      defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n    ): JSX.Element => {\n      const message = adapter.getState().thread.chatMessages[inlineImage.messageId];\n      const attachment = message?.content?.attachments?.find(\n        (attachment) => attachment.id === inlineImage.imageAttributes.id\n      );\n\n      if (attachment === undefined) {\n        return defaultOnRender(inlineImage);\n      }\n\n      let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n      const resourceCache = message.resourceCache;\n      if (\n        resourceCache &&\n        attachment.previewUrl &&\n        resourceCache[attachment.previewUrl] &&\n        resourceCache[attachment.previewUrl].error\n      ) {\n        pointerEvents = 'none';\n      }\n\n      return (\n        <span\n          key={inlineImage.imageAttributes.id}\n          onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)}\n          tabIndex={0}\n          role=\"button\"\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n            }\n          }}\n          style={{ cursor: 'pointer', pointerEvents }}\n        >\n          {defaultOnRender(inlineImage)}\n        </span>\n      );\n    }\n  };\n\n  const onDownloadButtonClicked = useCallback(\n    (imageSrc: string): void => {\n      if (imageSrc === '') {\n        return;\n      }\n      if (isIOS()) {\n        window.open(imageSrc, '_blank');\n      } else {\n        // Create a new anchor element\n        const a = document.createElement('a');\n        // Set the href and download attributes for the anchor element\n        a.href = imageSrc;\n        a.download = overlayImageItem?.attachmentId || '';\n        a.rel = 'noopener noreferrer';\n        a.target = '_blank';\n\n        // Programmatically click the anchor element to trigger the download\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      }\n    },\n    [overlayImageItem?.attachmentId]\n  );\n\n  const AttachFileButton = useCallback(() => {\n    if (!fileSharing?.uploadHandler) {\n      return null;\n    }\n    return (\n      <FileUploadButton\n        accept={fileSharing?.accept ?? '*'}\n        multiple={fileSharing?.multiple ?? true}\n        onChange={fileUploadButtonOnChange}\n      />\n    );\n  }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\n\n  return (\n    <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            <AttachmentDownloadErrorBar\n              onDismissDownloadErrorMessage={useCallback(() => {\n                setDownloadErrorMessage('');\n              }, [])}\n              attachmentDownloadErrorMessage={downloadErrorMessage || ''}\n            />\n          }\n          <MessageThread\n            {...messageThreadProps}\n            onRenderAvatar={onRenderAvatarCallback}\n            onRenderMessage={onRenderMessage}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloads}\n            inlineImageOptions={inlineImageOptions}\n            numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n            styles={messageThreadStyles}\n          />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? (\n                onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n              ) : (\n                <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n              )}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (\n                <Stack verticalAlign=\"center\">\n                  <AttachFileButton />\n                </Stack>\n              )}\n              <Stack grow>\n                <SendBox\n                  options={options}\n                  styles={styles?.sendBox}\n                  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n                  adapter={adapter}\n                />\n              </Stack>\n              {formFactor !== 'mobile' && <AttachFileButton />}\n            </Stack>\n          </Stack>\n        </Stack>\n        {\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          options?.participantPane === true && (\n            <ChatScreenPeoplePane\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              isMobile={formFactor === 'mobile'}\n            />\n          )\n        }\n      </Stack>\n      {overlayImageItem && (\n        <ImageOverlay\n          {...overlayImageItem}\n          isOpen={isImageOverlayOpen}\n          onDismiss={() => {\n            setOverlayImageItem(undefined);\n            setIsImageOverlayOpen(false);\n            adapter.removeResourceFromCache({\n              threadId: adapter.getState().thread.threadId,\n              messageId: overlayImageItem.messageId,\n              resourceUrl: overlayImageItem.imageUrl\n            });\n          }}\n          onDownloadButtonClicked={onDownloadButtonClicked}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/FileUploadButton.js

@@ -37,7 +37,7 @@ export const FileUploadButton = (props) => {
             } },
             React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: uploadFileButtonStringTrampoline() },
                 React.createElement(SendBoxAttachFileIconTrampoline, null))),
-        React.createElement("input", { ref: inputRef, hidden: true, multiple: multiple, accept: accept, type: "file", onClick: (e) => {
+        React.createElement("input", { ref: inputRef, hidden: true, multiple: multiple !== null && multiple !== void 0 ? multiple : true, accept: accept !== null && accept !== void 0 ? accept : '*', type: "file", onClick: (e) => {
                 // To ensure that `onChange` is fired even if the same file is picked again.
                 e.currentTarget.value = '';
             }, onChange: (e) => {