@azure/communication-react 1.14.0-alpha-202403060013 → 1.14.0-beta.2

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.js

@@ -14,22 +14,34 @@ export const DrawerMenuItem = (props) => {
     const theme = useTheme();
     const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
-    const secondaryIcon = props.secondaryIconProps ? (React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React.createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
-    return (React.createElement(FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
+    const secondaryIcon = props.secondaryIconProps ? React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps)) : props.subMenuProps ? React.createElement(MenuItemIcon, { iconName: "ChevronRight" }) : undefined;
+    return React.createElement(FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
         React.createElement(Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
-            props.iconProps && (React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
-                React.createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
+            props.iconProps && React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? {
+                    root: {
+                        color: theme.palette.neutralTertiaryAlt
+                    }
+                } : undefined },
+                React.createElement(MenuItemIcon, Object.assign({}, props.iconProps))),
             React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
-                React.createElement(Text, { styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined }, props.text)),
-            props.secondaryText && (React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
+                React.createElement(Text, { styles: props.disabled ? {
+                        root: {
+                            color: theme.palette.neutralTertiaryAlt
+                        }
+                    } : undefined }, props.text)),
+            props.secondaryText && React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
                 React.createElement(Text, { styles: {
-                        root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
-                    } }, props.secondaryText))),
+                        root: {
+                            color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary
+                        }
+                    } }, props.secondaryText)),
             props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
-            secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon))));
+            secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon)));
+};
+const MenuItemIcon = (props) => React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props));
+const menuItemChildrenGap = {
+    childrenGap: '0.5rem'
 };
-const MenuItemIcon = (props) => (React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props)));
-const menuItemChildrenGap = { childrenGap: '0.5rem' };
 const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
         background: hoverBackground
     } }));

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  FocusZone,\n  FontIcon,\n  IFontIconProps,\n  IIconProps,\n  IRawStyle,\n  IStackStyles,\n  IStyle,\n  mergeStyles,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/**\n * Props for the DrawerMenuItem\n *\n * @internal\n */\nexport interface _DrawerMenuItemProps {\n  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n  itemKey: string;\n  /** Text that shows at the start of the menu item after any icon supplied */\n  text?: string;\n  /** Text that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryText?: string;\n  /** A component that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryComponent?: JSX.Element;\n  /** Icon shown at the start of the menu item (before the menu item text) */\n  iconProps?: IIconProps;\n  /**\n   * Icon shown at the end of the menu item.\n   * By default if this component has subMenuProps, this icon is the RightChevron.\n   */\n  secondaryIconProps?: IIconProps;\n  styles?: BaseCustomStyles;\n  subMenuProps?: _DrawerMenuItemProps[];\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Property to set the focus since this is the first item in the menu\n   */\n  shouldFocusOnMount?: boolean;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @private\n */\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const onClick = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void =>\n    props.onItemClick && props.onItemClick(ev, props.itemKey);\n  const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n\n  const secondaryIcon = props.secondaryIconProps ? (\n    <MenuItemIcon {...props.secondaryIconProps} />\n  ) : props.subMenuProps ? (\n    <MenuItemIcon iconName=\"ChevronRight\" />\n  ) : undefined;\n\n  return (\n    <FocusZone shouldFocusOnMount={props.shouldFocusOnMount}>\n      <Stack\n        tabIndex={0}\n        role=\"menuitem\"\n        horizontal\n        className={mergeStyles(\n          drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n          props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n          props.styles?.root\n        )}\n        onKeyPress={props.disabled ? undefined : onKeyPress}\n        onClick={props.disabled ? undefined : onClick}\n        tokens={menuItemChildrenGap}\n        id={props.id}\n      >\n        {props.iconProps && (\n          <Stack.Item\n            role=\"presentation\"\n            styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}\n          >\n            <MenuItemIcon {...props.iconProps} />\n          </Stack.Item>\n        )}\n        <Stack.Item styles={drawerMenuItemTextStyles} grow>\n          <Text styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}>\n            {props.text}\n          </Text>\n        </Stack.Item>\n        {props.secondaryText && (\n          <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n            <Text\n              styles={{\n                root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }\n              }}\n            >\n              {props.secondaryText}\n            </Text>\n          </Stack.Item>\n        )}\n        {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n        {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n      </Stack>\n    </FocusZone>\n  );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n  <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n\n/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n  root: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap'\n  }\n};\n\nconst iconStyles: IStyle = {\n  // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n\n  // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n  ' span': {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%'\n  }\n};\n\nconst secondaryTextStyles: IStyle = {\n  // limit width for secondaryText in the menu item so it does not overlap with text on left.\n  maxWidth: '50%'\n};\n"]}
+{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, FontIcon, IFontIconProps, IIconProps, IRawStyle, IStackStyles, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/**\n * Props for the DrawerMenuItem\n *\n * @internal\n */\nexport interface _DrawerMenuItemProps {\n  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n  itemKey: string;\n  /** Text that shows at the start of the menu item after any icon supplied */\n  text?: string;\n  /** Text that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryText?: string;\n  /** A component that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryComponent?: JSX.Element;\n  /** Icon shown at the start of the menu item (before the menu item text) */\n  iconProps?: IIconProps;\n  /**\n   * Icon shown at the end of the menu item.\n   * By default if this component has subMenuProps, this icon is the RightChevron.\n   */\n  secondaryIconProps?: IIconProps;\n  styles?: BaseCustomStyles;\n  subMenuProps?: _DrawerMenuItemProps[];\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Property to set the focus since this is the first item in the menu\n   */\n  shouldFocusOnMount?: boolean;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @private\n */\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const onClick = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void => props.onItemClick && props.onItemClick(ev, props.itemKey);\n  const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n  const secondaryIcon = props.secondaryIconProps ? <MenuItemIcon {...props.secondaryIconProps} /> : props.subMenuProps ? <MenuItemIcon iconName=\"ChevronRight\" /> : undefined;\n  return <FocusZone shouldFocusOnMount={props.shouldFocusOnMount}>\n      <Stack tabIndex={0} role=\"menuitem\" horizontal className={mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, props.styles?.root)} onKeyPress={props.disabled ? undefined : onKeyPress} onClick={props.disabled ? undefined : onClick} tokens={menuItemChildrenGap} id={props.id}>\n        {props.iconProps && <Stack.Item role=\"presentation\" styles={props.disabled ? {\n        root: {\n          color: theme.palette.neutralTertiaryAlt\n        }\n      } : undefined}>\n            <MenuItemIcon {...props.iconProps} />\n          </Stack.Item>}\n        <Stack.Item styles={drawerMenuItemTextStyles} grow>\n          <Text styles={props.disabled ? {\n          root: {\n            color: theme.palette.neutralTertiaryAlt\n          }\n        } : undefined}>\n            {props.text}\n          </Text>\n        </Stack.Item>\n        {props.secondaryText && <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n            <Text styles={{\n          root: {\n            color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary\n          }\n        }}>\n              {props.secondaryText}\n            </Text>\n          </Stack.Item>}\n        {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n        {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n      </Stack>\n    </FocusZone>;\n};\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => <FontIcon className={mergeStyles(iconStyles)} {...props} />;\nconst menuItemChildrenGap = {\n  childrenGap: '0.5rem'\n};\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n\n/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n  root: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap'\n  }\n};\nconst iconStyles: IStyle = {\n  // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n  // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n  ' span': {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%'\n  }\n};\nconst secondaryTextStyles: IStyle = {\n  // limit width for secondaryText in the menu item so it does not overlap with text on left.\n  maxWidth: '50%'\n};"]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js

@@ -12,13 +12,11 @@ import { DrawerLightDismiss } from './DrawerLightDismiss';
  */
 export const _DrawerSurface = (props) => {
     var _a, _b, _c, _d;
-    const rootStyles = props.disableMaxHeight
-        ? mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root)
-        : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root);
+    const rootStyles = props.disableMaxHeight ? mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root);
     const containerStyles = mergeStyleSets(drawerContentContainerStyles, (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer);
-    return (React.createElement(Stack, { className: rootStyles },
+    return React.createElement(Stack, { className: rootStyles },
         React.createElement(DrawerLightDismiss, { styles: (_d = props.styles) === null || _d === void 0 ? void 0 : _d.lightDismissRoot, onDismiss: props.onLightDismiss }),
-        React.createElement(FocusTrapZone, { onKeyDown: (e) => {
+        React.createElement(FocusTrapZone, { onKeyDown: e => {
                 if (e.key === 'Escape' || e.key === 'Esc') {
                     props.onLightDismiss && props.onLightDismiss();
                 }
@@ -26,7 +24,7 @@ export const _DrawerSurface = (props) => {
             // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
             // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
             isClickableOutsideFocusTrap: true },
-            React.createElement(DrawerContentContainer, { styles: containerStyles, heading: props.heading }, props.children))));
+            React.createElement(DrawerContentContainer, { styles: containerStyles, heading: props.heading }, props.children)));
 };
 const drawerSurfaceStyles = {
     width: '100%',

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA6C1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB;QACvC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,cAAc,CAAC,4BAA4B,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,CAAC,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC1B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IACZ,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;oBAC1C,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACjD,CAAC;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAEjC,oBAAC,sBAAsB,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACpE,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,mCAAmC;IACnC,iFAAiF;IACjF,mEAAmE;IACnE,oBAAoB,EAAE;QACpB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,4BAA4B,GAAqB;IACrD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusTrapZone, IStyle, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = props.disableMaxHeight\n    ? mergeStyles(drawerSurfaceStyles, props.styles?.root)\n    : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, props.styles?.root);\n  const containerStyles = mergeStyleSets(drawerContentContainerStyles, props.styles?.drawerContentContainer);\n\n  return (\n    <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' || e.key === 'Esc') {\n            props.onLightDismiss && props.onLightDismiss();\n          }\n        }}\n        // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n        // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n        isClickableOutsideFocusTrap={true}\n      >\n        <DrawerContentContainer styles={containerStyles} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>\n  );\n};\n\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\n\nconst focusTrapZoneStyles: IStyle = {\n  // Targets FocusTrapZone in drawer.\n  // Setting percentage to Height to transform a container does not work unless the\n  // direct parent container also has a Height set other than 'auto'.\n  '> div:nth-child(2)': {\n    maxHeight: '75%',\n    overflow: 'auto'\n  }\n};\n\nconst drawerContentContainerStyles: BaseCustomStyles = {\n  root: {\n    height: 'auto'\n  }\n};\n"]}
+{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA6C1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAC7K,MAAM,eAAe,GAAG,cAAc,CAAC,4BAA4B,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,CAAC,CAAC;IAC3G,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC/B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;oBAC1C,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACjD,CAAC;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAC7B,oBAAC,sBAAsB,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACpE,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CAAC;AACb,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AACF,MAAM,mBAAmB,GAAW;IAClC,mCAAmC;IACnC,iFAAiF;IACjF,mEAAmE;IACnE,oBAAoB,EAAE;QACpB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AACF,MAAM,4BAA4B,GAAqB;IACrD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusTrapZone, IStyle, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = props.disableMaxHeight ? mergeStyles(drawerSurfaceStyles, props.styles?.root) : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, props.styles?.root);\n  const containerStyles = mergeStyleSets(drawerContentContainerStyles, props.styles?.drawerContentContainer);\n  return <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone onKeyDown={e => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        props.onLightDismiss && props.onLightDismiss();\n      }\n    }}\n    // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n    // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n    isClickableOutsideFocusTrap={true}>\n        <DrawerContentContainer styles={containerStyles} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>;\n};\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\nconst focusTrapZoneStyles: IStyle = {\n  // Targets FocusTrapZone in drawer.\n  // Setting percentage to Height to transform a container does not work unless the\n  // direct parent container also has a Height set other than 'auto'.\n  '> div:nth-child(2)': {\n    maxHeight: '75%',\n    overflow: 'auto'\n  }\n};\nconst drawerContentContainerStyles: BaseCustomStyles = {\n  root: {\n    height: 'auto'\n  }\n};"]}

package/dist/dist-esm/react-components/src/components/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _DrawerMenu } from './DrawerMenu';\nexport type { _DrawerMenuProps, _DrawerMenuStyles } from './DrawerMenu';\nexport type { _DrawerMenuItemProps } from './DrawerMenuItem';\n\nexport { _DrawerSurface } from './DrawerSurface';\nexport type { _DrawerSurfaceProps, _DrawerSurfaceStyles } from './DrawerSurface';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _DrawerMenu } from './DrawerMenu';\nexport type { _DrawerMenuProps, _DrawerMenuStyles } from './DrawerMenu';\nexport type { _DrawerMenuItemProps } from './DrawerMenuItem';\nexport { _DrawerSurface } from './DrawerSurface';\nexport type { _DrawerSurfaceProps, _DrawerSurfaceStyles } from './DrawerSurface';"]}

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

@@ -24,7 +24,7 @@ export const EndCallButton = (props) => {
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
     const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' })));
+    return React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' }));
 };
 // using media query to prevent windows from overwriting the button color
 const darkThemeCallButtonStyles = {
@@ -35,7 +35,9 @@ const darkThemeCallButtonStyles = {
             forcedColorAdjust: 'auto',
             border: `1px ${(_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
         },
-        ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
+        ':focus::after': {
+            outlineColor: `${darkTheme.callingPalette.iconWhite} !important`
+        } // added !important to avoid override by FluentUI button styles
     },
     rootHovered: {
         color: darkTheme.callingPalette.iconWhite,
@@ -63,7 +65,9 @@ const lightThemeCallButtonStyles = {
             forcedColorAdjust: 'auto',
             border: `1px ${(_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralQuaternaryAlt} solid`
         },
-        ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
+        ':focus::after': {
+            outlineColor: `${lightTheme.callingPalette.iconWhite} !important`
+        } // added !important to avoid override by FluentUI button styles
     },
     rootHovered: {
         color: lightTheme.callingPalette.iconWhite,

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

@@ -1 +1 @@
-{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\n\nconst onRenderEndCallIcon = (): JSX.Element => <Icon iconName=\"ControlButtonEndCall\" />;\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const { styles } = props;\n\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(\n    isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n    styles ?? {}\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      onClick={props.onHangUp ?? props.onClick}\n      styles={componentStyles}\n      onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'endCallButtonLabel'}\n    />\n  );\n};\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  rootHovered: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  rootPressed: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  }\n};\n\nconst lightThemeCallButtonStyles = {\n  root: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  rootHovered: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  rootPressed: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};\n"]}
+{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\nconst onRenderEndCallIcon = (): JSX.Element => <Icon iconName=\"ControlButtonEndCall\" />;\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const {\n    styles\n  } = props;\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles ?? {});\n  return <ControlBarButton {...props} onClick={props.onHangUp ?? props.onClick} styles={componentStyles} onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon} strings={strings} labelKey={props.labelKey ?? 'endCallButtonLabel'} />;\n};\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ':focus::after': {\n      outlineColor: `${darkTheme.callingPalette.iconWhite} !important`\n    } // added !important to avoid override by FluentUI button styles\n  },\n  rootHovered: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  rootPressed: {\n    color: darkTheme.callingPalette.iconWhite,\n    background: darkTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  }\n};\nconst lightThemeCallButtonStyles = {\n  root: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ':focus::after': {\n      outlineColor: `${lightTheme.callingPalette.iconWhite} !important`\n    } // added !important to avoid override by FluentUI button styles\n  },\n  rootHovered: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  rootPressed: {\n    color: lightTheme.callingPalette.iconWhite,\n    background: lightTheme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};"]}

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

@@ -178,10 +178,6 @@ export interface ErrorBarStrings {
      * Unable to start effect
      */
     unableToStartVideoEffect?: string;
-    /**
-     * An error message when starting spotlight while max participants are spotlighted
-     */
-    startSpotlightWhileMaxParticipantsAreSpotlighted: string;
 }
 /**
  * All errors that can be shown in the {@link ErrorBar}.

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

@@ -30,11 +30,10 @@ export const ErrorBar = (props) => {
     // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
     // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => {
-        trackDismissedErrorsInternally &&
-            setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
+        trackDismissedErrorsInternally && setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
     }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);
-    return (React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: {
+    return React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map(error => React.createElement(MessageBar, Object.assign({}, props, { styles: {
             innerText: {
                 alignSelf: 'center'
             },
@@ -48,11 +47,8 @@ export const ErrorBar = (props) => {
                 height: 0,
                 paddingTop: '0.8rem'
             }
-        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => {
-            var _a;
-            return trackDismissedErrorsInternally
-                ? setDismissedErrors(dismissError(dismissedErrors, error))
-                : (_a = props.onDismissError) === null || _a === void 0 ? void 0 : _a.call(props, error);
-        }, dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
+        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => { var _a; return trackDismissedErrorsInternally ? setDismissedErrors(dismissError(dismissedErrors, error)) : (_a = props.onDismissError) === null || _a === void 0 ? void 0 : _a.call(props, error); }, dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: {
+            iconName: 'ErrorBarClear'
+        } }), strings[error.type])));
 };
 //# sourceMappingURL=ErrorBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAsPjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;YAC5B,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpG,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAEjF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE;;YACd,OAAA,8BAA8B;gBAC5B,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA;SAAA,EAEnC,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control errors shown when they dismissed by the user.\n   */\n  onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Error bar string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  const trackDismissedErrorsInternally = !props.onDismissError;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedErrorsInternally &&\n      setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n  }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              alignSelf: 'center'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() =>\n            trackDismissedErrorsInternally\n              ? setDismissedErrors(dismissError(dismissedErrors, error))\n              : props.onDismissError?.(error)\n          }\n          dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAkB,YAAY,EAAE,+BAA+B,EAAE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAiP3I;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAC/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B,IAAI,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpI,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IACjF,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACzI,OAAO,oBAAC,KAAK,kBAAY,iBAAiB,IACrC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,MAAM,EAAE;YACpD,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,WAAC,OAAA,8BAA8B,CAAC,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA,EAAA,EAAE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EAAE,gBAAgB,EAAE;YAC1U,QAAQ,EAAE,eAAe;SAC1B,KACM,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CAAC,CACV,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { DismissedError, dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control errors shown when they dismissed by the user.\n   */\n  onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Error bar string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n  const trackDismissedErrorsInternally = !props.onDismissError;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedErrorsInternally && setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n  }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n  const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);\n  return <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map(error => <MessageBar {...props} styles={{\n      innerText: {\n        alignSelf: 'center'\n      },\n      icon: {\n        height: 0\n      },\n      content: {\n        lineHeight: 'inherit'\n      },\n      dismissal: {\n        height: 0,\n        paddingTop: '0.8rem'\n      }\n    }} key={error.type} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} onDismiss={() => trackDismissedErrorsInternally ? setDismissedErrors(dismissError(dismissedErrors, error)) : props.onDismissError?.(error)} dismissButtonAriaLabel={strings.dismissButtonAriaLabel} dismissIconProps={{\n      iconName: 'ErrorBarClear'\n    }}>\n          {strings[error.type]}\n        </MessageBar>)}\n    </Stack>;\n};"]}

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

@@ -63,7 +63,8 @@ export const _FileCard = (props) => {
     });
     const progressIndicatorStyles = {
         itemProgress: {
-            padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding
+            padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`,
+            // item progress height won't apply without an explicit padding
             // To make the progress indicator border curve along the bottom of file card.
             borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`
         },
@@ -71,7 +72,7 @@ export const _FileCard = (props) => {
             height: _pxToRem(progressBarThicknessPx)
         }
     };
-    return (React.createElement("div", { "data-is-focusable": true },
+    return React.createElement("div", { "data-is-focusable": true },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         React.createElement(Stack, { className: containerClassName, onClick: () => {
                 var _a;
@@ -87,6 +88,6 @@ export const _FileCard = (props) => {
                 React.createElement(Stack, { className: fileNameContainerClassName },
                     React.createElement(Text, { className: fileNameTextClassName }, fileName)),
                 React.createElement(Stack, { verticalAlign: "center", className: actionIconClassName }, actionIcon && actionIcon)),
-            showProgressIndicator && React.createElement(ProgressIndicator, { percentComplete: progress, styles: progressIndicatorStyles }))));
+            showProgressIndicator && React.createElement(ProgressIndicator, { percentComplete: progress, styles: progressIndicatorStyles })));
 };
 //# sourceMappingURL=FileCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  // eslint-disable-next-line no-restricted-imports\n  Icon,\n  IProgressIndicatorStyleProps,\n  IProgressIndicatorStyles,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  ProgressIndicator,\n  Stack,\n  Text,\n  useTheme\n} from '@fluentui/react';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * @internal\n * _FileCard Component Props.\n */\nexport interface _FileCardProps {\n  /**\n   * File name.\n   */\n  fileName: string;\n  /**\n   * Extension of the file used for rendering the file icon.\n   */\n  fileExtension: string;\n  /**\n   * File upload progress percentage between 0 and 1.\n   * File transfer progress indicator is only shown when the value is greater than 0 and less than 1.\n   */\n  progress?: number;\n  /**\n   * Icon to display for actions like download, upload, etc. along the file name.\n   */\n  actionIcon?: JSX.Element;\n  /**\n   * Function that runs when actionIcon is clicked\n   */\n  actionHandler?: () => void;\n  /**\n   * Optional arialabel strings for file cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\n/**\n * @internal\n * A component for displaying a file card with file icon and progress bar.\n */\nexport const _FileCard = (props: _FileCardProps): JSX.Element => {\n  const { fileName, fileExtension, progress, actionIcon } = props;\n  const theme = useTheme();\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${fileName}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${fileName} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, fileName, uploadStartedString, uploadCompletedString]);\n\n  const progressBarThicknessPx = 4;\n\n  const containerClassName = mergeStyles({\n    width: '12rem',\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,\n    cursor: 'pointer'\n  });\n\n  const fileInfoWrapperClassName = mergeStyles({\n    padding: _pxToRem(12),\n    // To make space for the progress indicator.\n    paddingBottom: showProgressIndicator ? _pxToRem(12 - progressBarThicknessPx * 2) : _pxToRem(12)\n  });\n\n  const fileNameContainerClassName = mergeStyles({\n    paddingLeft: _pxToRem(4),\n    minWidth: '75%',\n    maxWidth: '75%'\n  });\n\n  const fileNameTextClassName = mergeStyles({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    lineHeight: 'normal',\n    whiteSpace: 'nowrap',\n    paddingRight: _pxToRem(4)\n  });\n\n  const actionIconClassName = mergeStyles({\n    cursor: 'pointer'\n  });\n\n  const progressIndicatorStyles: IStyleFunctionOrObject<IProgressIndicatorStyleProps, IProgressIndicatorStyles> = {\n    itemProgress: {\n      padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding\n      // To make the progress indicator border curve along the bottom of file card.\n      borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`\n    },\n    progressBar: {\n      height: _pxToRem(progressBarThicknessPx)\n    }\n  };\n\n  return (\n    <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Stack\n        className={containerClassName}\n        onClick={() => {\n          props.actionHandler?.();\n        }}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={fileInfoWrapperClassName}>\n          <Stack>\n            {/* We are not using <ChatCompositeIcon /> here as we currently do not support customizing these filetype icons. */}\n            <Icon\n              data-ui-id={'filetype-icon'}\n              iconName={\n                getFileTypeIconProps({\n                  extension: fileExtension,\n                  size: 24,\n                  imageFileType: 'svg'\n                }).iconName\n              }\n            />\n          </Stack>\n          <Stack className={fileNameContainerClassName}>\n            <Text className={fileNameTextClassName}>{fileName}</Text>\n          </Stack>\n          <Stack verticalAlign=\"center\" className={actionIconClassName}>\n            {actionIcon && actionIcon}\n          </Stack>\n        </Stack>\n        {showProgressIndicator && <ProgressIndicator percentComplete={progress} styles={progressIndicatorStyles} />}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n// eslint-disable-next-line no-restricted-imports\nIcon, IProgressIndicatorStyleProps, IProgressIndicatorStyles, IStyleFunctionOrObject, mergeStyles, ProgressIndicator, Stack, Text, useTheme } from '@fluentui/react';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from './Announcer';\nimport { useEffect, useState } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { useLocaleFileCardStringsTrampoline } from './utils/common';\n\n/**\n * @internal\n * _FileCard Component Props.\n */\nexport interface _FileCardProps {\n  /**\n   * File name.\n   */\n  fileName: string;\n  /**\n   * Extension of the file used for rendering the file icon.\n   */\n  fileExtension: string;\n  /**\n   * File upload progress percentage between 0 and 1.\n   * File transfer progress indicator is only shown when the value is greater than 0 and less than 1.\n   */\n  progress?: number;\n  /**\n   * Icon to display for actions like download, upload, etc. along the file name.\n   */\n  actionIcon?: JSX.Element;\n  /**\n   * Function that runs when actionIcon is clicked\n   */\n  actionHandler?: () => void;\n  /**\n   * Optional arialabel strings for file cards\n   */\n  strings?: _FileUploadCardsStrings;\n}\n\n/**\n * @internal\n * A component for displaying a file card with file icon and progress bar.\n */\nexport const _FileCard = (props: _FileCardProps): JSX.Element => {\n  const {\n    fileName,\n    fileExtension,\n    progress,\n    actionIcon\n  } = props;\n  const theme = useTheme();\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const localeStrings = useLocaleFileCardStringsTrampoline();\n  const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n  const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n  const showProgressIndicator = progress !== undefined && progress > 0 && progress < 1;\n  useEffect(() => {\n    if (showProgressIndicator) {\n      setAnnouncerString(`${uploadStartedString} ${fileName}`);\n    } else if (progress === 1) {\n      setAnnouncerString(`${fileName} ${uploadCompletedString}`);\n    } else {\n      setAnnouncerString(undefined);\n    }\n  }, [progress, showProgressIndicator, fileName, uploadStartedString, uploadCompletedString]);\n  const progressBarThicknessPx = 4;\n  const containerClassName = mergeStyles({\n    width: '12rem',\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${_pxToRem(1)} solid ${theme.palette.neutralQuaternary}`,\n    cursor: 'pointer'\n  });\n  const fileInfoWrapperClassName = mergeStyles({\n    padding: _pxToRem(12),\n    // To make space for the progress indicator.\n    paddingBottom: showProgressIndicator ? _pxToRem(12 - progressBarThicknessPx * 2) : _pxToRem(12)\n  });\n  const fileNameContainerClassName = mergeStyles({\n    paddingLeft: _pxToRem(4),\n    minWidth: '75%',\n    maxWidth: '75%'\n  });\n  const fileNameTextClassName = mergeStyles({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    lineHeight: 'normal',\n    whiteSpace: 'nowrap',\n    paddingRight: _pxToRem(4)\n  });\n  const actionIconClassName = mergeStyles({\n    cursor: 'pointer'\n  });\n  const progressIndicatorStyles: IStyleFunctionOrObject<IProgressIndicatorStyleProps, IProgressIndicatorStyles> = {\n    itemProgress: {\n      padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`,\n      // item progress height won't apply without an explicit padding\n      // To make the progress indicator border curve along the bottom of file card.\n      borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`\n    },\n    progressBar: {\n      height: _pxToRem(progressBarThicknessPx)\n    }\n  };\n  return <div data-is-focusable={true}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <Stack className={containerClassName} onClick={() => {\n      props.actionHandler?.();\n    }}>\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={fileInfoWrapperClassName}>\n          <Stack>\n            {/* We are not using <ChatCompositeIcon /> here as we currently do not support customizing these filetype icons. */}\n            <Icon data-ui-id={'filetype-icon'} iconName={getFileTypeIconProps({\n            extension: fileExtension,\n            size: 24,\n            imageFileType: 'svg'\n          }).iconName} />\n          </Stack>\n          <Stack className={fileNameContainerClassName}>\n            <Text className={fileNameTextClassName}>{fileName}</Text>\n          </Stack>\n          <Stack verticalAlign=\"center\" className={actionIconClassName}>\n            {actionIcon && actionIcon}\n          </Stack>\n        </Stack>\n        {showProgressIndicator && <ProgressIndicator percentComplete={progress} styles={progressIndicatorStyles} />}\n      </Stack>\n    </div>;\n};"]}

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

@@ -30,6 +30,6 @@ export const _FileCardGroup = (props) => {
     if (!children) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: fileCardGroupClassName, "aria-label": ariaLabel }, children));
+    return React.createElement(Stack, { horizontal: true, className: fileCardGroupClassName, "aria-label": ariaLabel }, children);
 };
 //# sourceMappingURL=FileCardGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileCardGroup.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;GAIG;AAEH,MAAM,sBAAsB,GAAG,WAAW,CAAC;IACzC,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;KACpB;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,gBAAc,SAAS,IACvE,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n\n/**\n * @internal\n * Props for `_FileCardGroup` component.\n */\nexport interface _FileCardGroupProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n}\n\n/**\n * Note: If we use stack tokens.childrenGap, when child elements are wrapped and moved to the next line,\n * an extra margin is added to the left of each line.\n * This is a workaround to avoid this issue.\n */\n\nconst fileCardGroupClassName = mergeStyles({\n  flexFlow: 'row wrap',\n  '& > *': {\n    margin: _pxToRem(2)\n  },\n  /**\n   * margin for children is overriden by parent stack, so adding left margin for each child\n   */\n  '& > *:not(:first-child)': {\n    marginLeft: _pxToRem(2)\n  }\n});\n\n/**\n * @internal\n * Used with `_FileCard` component where `_FileCard` components are passed as children.\n * Renders the children equally spaced in multiple rows.\n */\nexport const _FileCardGroup = (props: _FileCardGroupProps): JSX.Element => {\n  const { children, ariaLabel } = props;\n  if (!children) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={fileCardGroupClassName} aria-label={ariaLabel}>\n      {children}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"FileCardGroup.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileCardGroup.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;GAIG;AAEH,MAAM,sBAAsB,GAAG,WAAW,CAAC;IACzC,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;KACpB;IACD;;OAEG;IACH,yBAAyB,EAAE;QACzB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;KACxB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,QAAQ,EACR,SAAS,EACV,GAAG,KAAK,CAAC;IACV,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,gBAAc,SAAS,IAC5E,QAAQ,CACH,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n\n/**\n * @internal\n * Props for `_FileCardGroup` component.\n */\nexport interface _FileCardGroupProps {\n  children: React.ReactNode;\n  ariaLabel?: string;\n}\n\n/**\n * Note: If we use stack tokens.childrenGap, when child elements are wrapped and moved to the next line,\n * an extra margin is added to the left of each line.\n * This is a workaround to avoid this issue.\n */\n\nconst fileCardGroupClassName = mergeStyles({\n  flexFlow: 'row wrap',\n  '& > *': {\n    margin: _pxToRem(2)\n  },\n  /**\n   * margin for children is overriden by parent stack, so adding left margin for each child\n   */\n  '& > *:not(:first-child)': {\n    marginLeft: _pxToRem(2)\n  }\n});\n\n/**\n * @internal\n * Used with `_FileCard` component where `_FileCard` components are passed as children.\n * Renders the children equally spaced in multiple rows.\n */\nexport const _FileCardGroup = (props: _FileCardGroupProps): JSX.Element => {\n  const {\n    children,\n    ariaLabel\n  } = props;\n  if (!children) {\n    return <></>;\n  }\n  return <Stack horizontal className={fileCardGroupClassName} aria-label={ariaLabel}>\n      {children}\n    </Stack>;\n};"]}

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

@@ -31,11 +31,32 @@ export interface FileMetadata {
     url: string;
     payload?: Record<string, string>;
 }
+/**
+ * Metadata for rendering images inline with a message.
+ * This does not include images attached as files.
+ * @beta
+ */
+export interface InlineImageMetadata {
+    attachmentType: 'inlineImage';
+    /**
+     * Unique ID of the attachment.
+     */
+    id: string;
+    previewUrl?: string;
+    /**
+     * Download URL for the full resolution version.
+     */
+    url: string;
+    /**
+     * Optional fetched Image source fot the full resolution version.
+     */
+    fullSizeImageSrc?: string;
+}
 /**
  * Metadata containing information about the uploaded file.
  * @beta
  */
-export type AttachmentMetadata = FileMetadata;
+export type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;
 /**
  * Strings of _FileDownloadCards that can be overridden.
  *

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

@@ -21,7 +21,9 @@ import { _formatString } from "../../../acs-ui-common/src";
 const fileDownloadCardsStyle = {
     marginTop: '0.25rem'
 };
-const actionIconStyle = { height: '1rem' };
+const actionIconStyle = {
+    height: '1rem'
+};
 /**
  * @internal
  */
@@ -78,24 +80,17 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata ||
-        fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
+    if (!fileMetadata || fileMetadata.length === 0 || /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
-            fileMetadata
-                .filter((attachment) => {
-                /* @conditional-compile-remove(file-sharing) */
-                return isFileSharingAttachment(attachment);
-                return true;
-            })
-                .map((file) => file)
-                .map((file) => (React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
-                React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : true &&
-                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(file) ? (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
-                        React.createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));
+    return React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
+        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata && fileMetadata.filter(attachment => {
+            /* @conditional-compile-remove(file-sharing) */
+            return isFileSharingAttachment(attachment);
+            return true;
+        }).map(file => file).map(file => React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
+            React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' }) : true && /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(file) ? React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                    React.createElement(DownloadIconTrampoline, null)) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))));
 };
 /**
  * @private
@@ -107,8 +102,11 @@ const DownloadIconTrampoline = () => {
     return React.createElement(Icon, { iconName: "EditBoxCancel", style: actionIconStyle });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
     return useLocale().strings.messageThread;
-    return { downloadFile: '', fileCardGroupMessage: '' };
+    return {
+        downloadFile: '',
+        fileCardGroupMessage: ''
+    };
 };
 //# sourceMappingURL=FileDownloadCards.js.map