@azure/communication-react 1.25.0-alpha-202502270016 → 1.25.0-beta.1

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/ReactionDrawerMenuItem.js

@@ -14,13 +14,7 @@ export const _ReactionDrawerMenuItem = (props) => {
     var _a, _b, _c, _d, _e;
     const theme = useTheme();
     const resources = props.reactionResources;
-    const emojiResource = new Map([
-        ['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
-        ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
-        ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
-        ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
-        ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
-    ]);
+    const emojiResource = new Map([['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url], ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url], ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url], ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url], ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]]);
     const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
     const borderRadius = useTheme().effects.roundedCorner4;
     const modifiedFirstItemStyle = {
@@ -30,14 +24,14 @@ export const _ReactionDrawerMenuItem = (props) => {
             marginTop: '12px'
         }
     };
-    return (React.createElement(Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
+    return React.createElement(Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
         React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
             const resourceUrl = emojiResource.get(emoji.toString());
-            return (React.createElement(IconButton, { key: index, onClick: () => {
+            return React.createElement(IconButton, { key: index, onClick: () => {
                     var _a;
                     (_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
-                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') }));
-        }))));
+                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') });
+        })));
 };
 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/ReactionDrawerMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';\nimport { IconButton } from '@fluentui/react';\nimport { _DrawerMenuItemProps, ReactionResources } from '../..';\n\n/**\n * Props for the ReactionMenuItem\n *\n * @internal\n */\nexport interface _ReactionMenuItemProps {\n  /**\n   * Reaction resources to render for mobile button menus for reaction\n   */\n  reactionResources?: ReactionResources;\n  /**\n   * reaction click event from the call adapter.\n   */\n  onReactionClick?: (reaction: string) => Promise<void>;\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @internal\n */\nexport const _ReactionDrawerMenuItem = (props: _ReactionMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const resources = props.reactionResources;\n  const emojiResource: Map<string, string | undefined> = new Map([\n    ['like', resources?.likeReaction?.url],\n    ['heart', resources?.heartReaction?.url],\n    ['laugh', resources?.laughReaction?.url],\n    ['applause', resources?.applauseReaction?.url],\n    ['surprised', resources?.surprisedReaction?.url]\n  ]);\n  const emojis: string[] = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const modifiedFirstItemStyle = {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius,\n      marginTop: '12px'\n    }\n  };\n\n  return (\n    <Stack\n      data-ui-id=\"reaction-mobile-drawer-menu-item\"\n      id=\"reaction\"\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        modifiedFirstItemStyle.root\n      )}\n    >\n      <div style={mobileViewMenuItemStyle()}>\n        {emojis.map((emoji, index) => {\n          const resourceUrl = emojiResource.get(emoji.toString());\n\n          return (\n            <IconButton\n              key={index}\n              onClick={() => {\n                props.onReactionClick?.(emoji);\n              }}\n              style={mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running')}\n            />\n          );\n        })}\n      </div>\n    </Stack>\n  );\n};\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"]}
+{"version":3,"file":"ReactionDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';\nimport { IconButton } from '@fluentui/react';\nimport { _DrawerMenuItemProps, ReactionResources } from '../..';\n\n/**\n * Props for the ReactionMenuItem\n *\n * @internal\n */\nexport interface _ReactionMenuItemProps {\n  /**\n   * Reaction resources to render for mobile button menus for reaction\n   */\n  reactionResources?: ReactionResources;\n  /**\n   * reaction click event from the call adapter.\n   */\n  onReactionClick?: (reaction: string) => Promise<void>;\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @internal\n */\nexport const _ReactionDrawerMenuItem = (props: _ReactionMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const resources = props.reactionResources;\n  const emojiResource: Map<string, string | undefined> = new Map([['like', resources?.likeReaction?.url], ['heart', resources?.heartReaction?.url], ['laugh', resources?.laughReaction?.url], ['applause', resources?.applauseReaction?.url], ['surprised', resources?.surprisedReaction?.url]]);\n  const emojis: string[] = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const modifiedFirstItemStyle = {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius,\n      marginTop: '12px'\n    }\n  };\n  return <Stack data-ui-id=\"reaction-mobile-drawer-menu-item\" id=\"reaction\" role=\"menuitem\" horizontal className={mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root)}>\n      <div style={mobileViewMenuItemStyle()}>\n        {emojis.map((emoji, index) => {\n        const resourceUrl = emojiResource.get(emoji.toString());\n        return <IconButton key={index} onClick={() => {\n          props.onReactionClick?.(emoji);\n        }} style={mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running')} />;\n      })}\n      </div>\n    </Stack>;\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});"]}

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;AAEjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,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';\nexport { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';\nexport type { _ReactionMenuItemProps } from './ReactionDrawerMenuItem';\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;AAEjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,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';\nexport { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';\nexport type { _ReactionMenuItemProps } from './ReactionDrawerMenuItem';"]}

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

@@ -27,28 +27,25 @@ export const EndCallButton = (props) => {
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
     const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
-    const onRenderEndCallIcon = useCallback(() => (React.createElement(React.Fragment, null,
+    const onRenderEndCallIcon = useCallback(() => React.createElement(React.Fragment, null,
         React.createElement(Icon, { iconName: "ControlButtonEndCall" }),
-        enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [enableEndCallMenu]);
+        enableEndCallMenu && React.createElement("span", { className: spacerClass })), [enableEndCallMenu]);
     const defaultMenuProps = {
-        items: [
-            {
+        items: [{
                 key: 'endForSelf',
                 text: localeStrings.leaveOption,
                 title: localeStrings.leaveOption,
                 onClick: () => {
                     onHangUp && onHangUp(false);
                 }
-            },
-            {
+            }, {
                 key: 'endForEveryone',
                 text: localeStrings.endCallOption,
                 title: localeStrings.endCallOption,
                 onClick: () => {
                     onHangUp && onHangUp(true);
                 }
-            }
-        ],
+            }],
         styles: props.styles,
         calloutProps: {
             styles: {
@@ -59,8 +56,8 @@ export const EndCallButton = (props) => {
             preventDismissOnEvent
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' }))));
+    return React.createElement(React.Fragment, null,
+        React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' })));
 };
 const getButtonStyles = (theme) => {
     var _a;
@@ -75,7 +72,9 @@ const getButtonStyles = (theme) => {
             ' i': {
                 color: theme.callingPalette.iconWhite
             },
-            ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
+            ':focus::after': {
+                outlineColor: `${theme.callingPalette.iconWhite} !important`
+            } // added !important to avoid override by FluentUI button styles
         },
         pressed: {
             color: theme.callingPalette.iconWhite,
@@ -128,6 +127,8 @@ const lightThemeCallButtonStyles = {
     }
 };
 const menupButtonPadding = {
-    root: { padding: '0 0.75rem' }
+    root: {
+        padding: '0 0.75rem'
+    }
 };
 //# sourceMappingURL=EndCallButton.js.map

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

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

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": "notifications-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: {
+    return React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map(error => React.createElement(MessageBar, Object.assign({}, props, { styles: {
             innerText: {
                 alignSelf: 'center'
             },
@@ -48,11 +47,8 @@ export const ErrorBar = (props) => {
                 height: '2rem',
                 paddingBottom: '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[error.type]}, ${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[error.type]}, ${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;AA+PjB;;;;;;;;;;;;;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,qBAAqB,IACpC,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,MAAM;gBACd,aAAa,EAAE,QAAQ;aACxB;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,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EACnF,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 when poor network quality is detected during a call.\n   */\n  teamsMeetingCallNetworkQualityLow: string;\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\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n\n  /**\n   * An error message when local user is muted by a remote participant\n   */\n  mutedByRemoteParticipant: 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=\"notifications-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: '2rem',\n              paddingBottom: '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[error.type]}, ${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;AA+P3I;;;;;;;;;;;;;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,qBAAqB,IACzC,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,MAAM;gBACd,aAAa,EAAE,QAAQ;aACxB;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,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EAAE,gBAAgB,EAAE;YACvW,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 when poor network quality is detected during a call.\n   */\n  teamsMeetingCallNetworkQualityLow: string;\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\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: string;\n\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n\n  /**\n   * An error message when local user is muted by a remote participant\n   */\n  mutedByRemoteParticipant: 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=\"notifications-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: '2rem',\n        paddingBottom: '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[error.type]}, ${strings.dismissButtonAriaLabel}`} dismissIconProps={{\n      iconName: 'ErrorBarClear'\n    }}>\n          {strings[error.type]}\n        </MessageBar>)}\n    </Stack>;\n};"]}

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

@@ -8,11 +8,15 @@ import React from 'react';
 export class _ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { hasError: false };
+        this.state = {
+            hasError: false
+        };
     }
     static getDerivedStateFromError() {
         // Update state so the next render will show the fallback UI.
-        return { hasError: true };
+        return {
+            hasError: true
+        };
     }
     componentDidCatch(error) {
         console.error(error);

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAWzC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,eAAe;YACf,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;QACD,4BAA4B;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode } from 'react';\n\ninterface ErrorBoundaryProps {\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n}\n\n/**\n * @internal\n * ErrorBoundary component to handle errors in React components.\n */\nexport class _ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(): ErrorBoundaryState {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error): void {\n    console.error(error);\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      // handle error\n      return this.props.fallback;\n    }\n    // otherwise render children\n    return this.props.children;\n  }\n}\n"]}
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAoB,MAAM,OAAO,CAAC;AASzC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;SAChB,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,wBAAwB;QAC7B,6DAA6D;QAC7D,OAAO;YACL,QAAQ,EAAE,IAAI;SACf,CAAC;IACJ,CAAC;IACD,iBAAiB,CAAC,KAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,eAAe;YACf,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;QACD,4BAA4B;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode } from 'react';\ninterface ErrorBoundaryProps {\n  fallback: ReactNode;\n  children: ReactNode;\n}\ninterface ErrorBoundaryState {\n  hasError: boolean;\n}\n\n/**\n * @internal\n * ErrorBoundary component to handle errors in React components.\n */\nexport class _ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {\n      hasError: false\n    };\n  }\n  static getDerivedStateFromError(): ErrorBoundaryState {\n    // Update state so the next render will show the fallback UI.\n    return {\n      hasError: true\n    };\n  }\n  componentDidCatch(error: Error): void {\n    console.error(error);\n  }\n  render(): ReactNode {\n    if (this.state.hasError) {\n      // handle error\n      return this.props.fallback;\n    }\n    // otherwise render children\n    return this.props.children;\n  }\n}"]}

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

@@ -33,7 +33,7 @@ export const GridLayout = (props) => {
         return calculateGridProps(numberOfChildren, currentWidth, currentHeight);
     }, [numberOfChildren, currentWidth, currentHeight]);
     const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children));
+    return React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children);
 };
 /**
  * The cell aspect ratio we aim for in a grid
@@ -55,7 +55,11 @@ const isCloserThan = (a, b, target) => {
  */
 export const calculateGridProps = (numberOfItems, width, height) => {
     if (numberOfItems <= 0) {
-        return { fillDirection: 'horizontal', rows: 0, columns: 0 };
+        return {
+            fillDirection: 'horizontal',
+            rows: 0,
+            columns: 0
+        };
     }
     // If width or height are 0 then we return rows and column evenly
     if (width <= 0 || height <= 0) {
@@ -67,7 +71,7 @@ export const calculateGridProps = (numberOfItems, width, height) => {
     }
     const aspectRatio = width / height;
     // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO
-    let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) * numberOfItems)) || 1;
+    let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;
     // Make sure rows do not exceed numberOfItems
     rows = Math.min(rows, numberOfItems);
     // Given the rows, get the minimum columns needed to create enough cells for the number of items
@@ -76,7 +80,7 @@ export const calculateGridProps = (numberOfItems, width, height) => {
     let fillDirection = 'horizontal';
     while (rows < numberOfItems) {
         // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows
-        if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
+        if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
             rows += 1;
             columns = Math.ceil(numberOfItems / rows);
             continue;
@@ -115,9 +119,9 @@ export const calculateGridProps = (numberOfItems, width, height) => {
             // |           |          |             |       |       |       |
             // |___________|__________|             |_______|_______|_______|
             // Calculate the aspect ratio of big cells stretched horizontally
-            const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;
+            const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;
             // Calculate the aspect ratio of big cells stretched vertically
-            const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;
+            const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;
             // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells
             // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.
             if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
@@ -129,7 +133,11 @@ export const calculateGridProps = (numberOfItems, width, height) => {
         }
         break;
     }
-    return { fillDirection, rows, columns };
+    return {
+        fillDirection,
+        rows,
+        columns
+    };
 };
 /**
  * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
@@ -147,41 +155,33 @@ export const createGridStyles = (numberOfItems, gridProps) => {
     // Get grid units
     // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block
     const units = smallCellsPerBlock * bigCellsPerBlock;
-    const gridStyles = isHorizontal
-        ? {
-            gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,
-            gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,
-            gridAutoFlow: 'row'
+    const gridStyles = isHorizontal ? {
+        gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,
+        gridAutoFlow: 'row'
+    } : {
+        gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,
+        gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,
+        gridAutoFlow: 'column'
+    };
+    const smallCellStyle = isHorizontal ? {
+        '> *': {
+            gridColumn: `auto / span ${units / smallCellsPerBlock}`
         }
-        : {
-            gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,
-            gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,
-            gridAutoFlow: 'column'
-        };
-    const smallCellStyle = isHorizontal
-        ? {
-            '> *': {
-                gridColumn: `auto / span ${units / smallCellsPerBlock}`
-            }
+    } : {
+        '> *': {
+            gridRow: `auto / span ${units / smallCellsPerBlock}`
         }
-        : {
-            '> *': {
-                gridRow: `auto / span ${units / smallCellsPerBlock}`
-            }
-        };
+    };
     // If there are big cells, we are choosing to place the latest children into the big cells.
     // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below
-    const bigCellStyle = numBigCells
-        ? {
-            [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal
-                ? {
-                    gridColumn: `auto / span ${units / bigCellsPerBlock}`
-                }
-                : {
-                    gridRow: `auto / span ${units / bigCellsPerBlock}`
-                }
+    const bigCellStyle = numBigCells ? {
+        [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {
+            gridColumn: `auto / span ${units / bigCellsPerBlock}`
+        } : {
+            gridRow: `auto / span ${units / bigCellsPerBlock}`
         }
-        : {};
+    } : {};
     return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);
 };
 //# sourceMappingURL=GridLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n  children: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <GridLayout styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link GridLayout} */\n  children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n  const { children, styles } = props;\n  const numberOfChildren = React.Children.count(children);\n\n  const [currentWidth, setCurrentWidth] = useState(0);\n  const [currentHeight, setCurrentHeight] = useState(0);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      if (!entries[0]) {\n        return;\n      }\n      const { width, height } = entries[0].contentRect;\n      setCurrentWidth(width);\n      setCurrentHeight(height);\n    })\n  );\n\n  useEffect(() => {\n    if (containerRef.current) {\n      observer.current.observe(containerRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, containerRef]);\n\n  const gridProps = useMemo(() => {\n    return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n  }, [numberOfChildren, currentWidth, currentHeight]);\n\n  const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)}\n      data-ui-id=\"grid-layout\"\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\n\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n  return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n *  ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n *  ______________\n * |    |    |    |\n * |____|____|    |\n * |    |    |    |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n *  _______________\n * |       |       |\n * |_______|_______|\n * |       |       | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n  fillDirection: FillDirection;\n  rows: number;\n  columns: number;\n};\n\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n  if (numberOfItems <= 0) {\n    return { fillDirection: 'horizontal', rows: 0, columns: 0 };\n  }\n  // If width or height are 0 then we return rows and column evenly\n  if (width <= 0 || height <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: Math.ceil(Math.sqrt(numberOfItems)),\n      columns: Math.ceil(Math.sqrt(numberOfItems))\n    };\n  }\n  const aspectRatio = width / height;\n  // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n  let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) * numberOfItems)) || 1;\n  // Make sure rows do not exceed numberOfItems\n  rows = Math.min(rows, numberOfItems);\n  // Given the rows, get the minimum columns needed to create enough cells for the number of items\n  let columns = Math.ceil(numberOfItems / rows);\n\n  // Default fill direction to horizontal\n  let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n\n  while (rows < numberOfItems) {\n    // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n    if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n      rows += 1;\n      columns = Math.ceil(numberOfItems / rows);\n      continue;\n    }\n    if (numberOfItems < rows * columns) {\n      // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n      // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n      // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n      // column of 2 cells which is less by more than 1 compared to the unstretched column.\n      //  _________\n      // |____|    |\n      // |____|____|\n      // |____|    |\n      // |____|____|\n\n      const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n      const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n      if (!canStretchVertically && !canStretchHorizontally) {\n        rows += 1;\n        columns = Math.ceil(numberOfItems / rows);\n        continue;\n      } else if (!canStretchVertically) {\n        break;\n      } else if (!canStretchHorizontally) {\n        fillDirection = 'vertical';\n        break;\n      }\n\n      // We need to figure out whether the big cells should stretch horizontally or vertically\n      // to fill in the empty spaces\n      // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n      //       horizontally            or           vertically\n      //  ______________________               _______________________\n      // |       |       |      |             |       |       |       |\n      // |_______|_______|______|             |_______|_______|       |\n      // |           |          |             |       |       |       |\n      // |___________|__________|             |_______|_______|_______|\n\n      // Calculate the aspect ratio of big cells stretched horizontally\n      const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;\n      // Calculate the aspect ratio of big cells stretched vertically\n      const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;\n      // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n      // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n      if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n        // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n        if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n          fillDirection = 'vertical';\n        }\n      }\n    }\n    break;\n  }\n\n  return { fillDirection, rows, columns };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n  const isHorizontal = gridProps.fillDirection === 'horizontal';\n  // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n  const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n  const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n  const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n  const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n  // Get grid units\n  // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n  const units = smallCellsPerBlock * bigCellsPerBlock;\n\n  const gridStyles = isHorizontal\n    ? {\n        gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n        gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n        gridAutoFlow: 'row'\n      }\n    : {\n        gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n        gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n        gridAutoFlow: 'column'\n      };\n\n  const smallCellStyle = isHorizontal\n    ? {\n        '> *': {\n          gridColumn: `auto / span ${units / smallCellsPerBlock}`\n        }\n      }\n    : {\n        '> *': {\n          gridRow: `auto / span ${units / smallCellsPerBlock}`\n        }\n      };\n\n  // If there are big cells, we are choosing to place the latest children into the big cells.\n  // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n  const bigCellStyle = numBigCells\n    ? {\n        [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal\n          ? {\n              gridColumn: `auto / span ${units / bigCellsPerBlock}`\n            }\n          : {\n              gridRow: `auto / span ${units / bigCellsPerBlock}`\n            }\n      }\n    : {};\n\n  return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};\n"]}
+{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n  children: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <GridLayout styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link GridLayout} */\n  children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n  const {\n    children,\n    styles\n  } = props;\n  const numberOfChildren = React.Children.count(children);\n  const [currentWidth, setCurrentWidth] = useState(0);\n  const [currentHeight, setCurrentHeight] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const observer = useRef(new ResizeObserver((entries): void => {\n    if (!entries[0]) {\n      return;\n    }\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    setCurrentWidth(width);\n    setCurrentHeight(height);\n  }));\n  useEffect(() => {\n    if (containerRef.current) {\n      observer.current.observe(containerRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [observer, containerRef]);\n  const gridProps = useMemo(() => {\n    return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n  }, [numberOfChildren, currentWidth, currentHeight]);\n  const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n  return <div ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)} data-ui-id=\"grid-layout\">\n      {children}\n    </div>;\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n  return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n *  ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n *  ______________\n * |    |    |    |\n * |____|____|    |\n * |    |    |    |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n *  _______________\n * |       |       |\n * |_______|_______|\n * |       |       | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n  fillDirection: FillDirection;\n  rows: number;\n  columns: number;\n};\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n  if (numberOfItems <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: 0,\n      columns: 0\n    };\n  }\n  // If width or height are 0 then we return rows and column evenly\n  if (width <= 0 || height <= 0) {\n    return {\n      fillDirection: 'horizontal',\n      rows: Math.ceil(Math.sqrt(numberOfItems)),\n      columns: Math.ceil(Math.sqrt(numberOfItems))\n    };\n  }\n  const aspectRatio = width / height;\n  // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n  let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;\n  // Make sure rows do not exceed numberOfItems\n  rows = Math.min(rows, numberOfItems);\n  // Given the rows, get the minimum columns needed to create enough cells for the number of items\n  let columns = Math.ceil(numberOfItems / rows);\n\n  // Default fill direction to horizontal\n  let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n  while (rows < numberOfItems) {\n    // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n    if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n      rows += 1;\n      columns = Math.ceil(numberOfItems / rows);\n      continue;\n    }\n    if (numberOfItems < rows * columns) {\n      // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n      // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n      // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n      // column of 2 cells which is less by more than 1 compared to the unstretched column.\n      //  _________\n      // |____|    |\n      // |____|____|\n      // |____|    |\n      // |____|____|\n\n      const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n      const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n      if (!canStretchVertically && !canStretchHorizontally) {\n        rows += 1;\n        columns = Math.ceil(numberOfItems / rows);\n        continue;\n      } else if (!canStretchVertically) {\n        break;\n      } else if (!canStretchHorizontally) {\n        fillDirection = 'vertical';\n        break;\n      }\n\n      // We need to figure out whether the big cells should stretch horizontally or vertically\n      // to fill in the empty spaces\n      // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n      //       horizontally            or           vertically\n      //  ______________________               _______________________\n      // |       |       |      |             |       |       |       |\n      // |_______|_______|______|             |_______|_______|       |\n      // |           |          |             |       |       |       |\n      // |___________|__________|             |_______|_______|_______|\n\n      // Calculate the aspect ratio of big cells stretched horizontally\n      const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;\n      // Calculate the aspect ratio of big cells stretched vertically\n      const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;\n      // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n      // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n      if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n        // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n        if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n          fillDirection = 'vertical';\n        }\n      }\n    }\n    break;\n  }\n  return {\n    fillDirection,\n    rows,\n    columns\n  };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n  const isHorizontal = gridProps.fillDirection === 'horizontal';\n  // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n  const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n  const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n  const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n  const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n  // Get grid units\n  // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n  const units = smallCellsPerBlock * bigCellsPerBlock;\n  const gridStyles = isHorizontal ? {\n    gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n    gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n    gridAutoFlow: 'row'\n  } : {\n    gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n    gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n    gridAutoFlow: 'column'\n  };\n  const smallCellStyle = isHorizontal ? {\n    '> *': {\n      gridColumn: `auto / span ${units / smallCellsPerBlock}`\n    }\n  } : {\n    '> *': {\n      gridRow: `auto / span ${units / smallCellsPerBlock}`\n    }\n  };\n\n  // If there are big cells, we are choosing to place the latest children into the big cells.\n  // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n  const bigCellStyle = numBigCells ? {\n    [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {\n      gridColumn: `auto / span ${units / bigCellsPerBlock}`\n    } : {\n      gridRow: `auto / span ${units / bigCellsPerBlock}`\n    }\n  } : {};\n  return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};"]}

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

@@ -13,13 +13,13 @@ export const _HighContrastAwareIcon = (props) => {
     const theme = useTheme();
     // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors
     // the media query is for when in specific window accessibility mode, change the svg colors
-    return (React.createElement(Icon, { iconName: iconName, className: mergeStyles({
+    return React.createElement(Icon, { iconName: iconName, className: mergeStyles({
             svg: {
                 fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,
                 '@media (forced-colors: active) and (prefers-color-scheme: dark)': {
                     fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary
                 }
             }
-        }) }));
+        }) });
 };
 //# sourceMappingURL=HighContrastAwareIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HighContrastAwareIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HighContrastAwareIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,2IAA2I;IAC3I,2FAA2F;IAC3F,OAAO,CACL,oBAAC,IAAI,IACH,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC;YACrB,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;gBAEhF,iEAAiE,EAAE;oBACjE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;iBACjF;aACF;SACF,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../theming';\n\n/**\n * @internal\n */\nexport interface _HighContrastAwareIconProps {\n  /** Icon name */\n  iconName: string;\n  /** Whether button is disabled */\n  disabled?: boolean | undefined;\n}\n\n/**\n * This is a helper component to define and unify icon colors\n *\n * @internal\n */\nexport const _HighContrastAwareIcon = (props: _HighContrastAwareIconProps): JSX.Element => {\n  const { iconName, disabled } = props;\n  const theme = useTheme();\n  // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors\n  // the media query is for when in specific window accessibility mode, change the svg colors\n  return (\n    <Icon\n      iconName={iconName}\n      className={mergeStyles({\n        svg: {\n          fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,\n\n          '@media (forced-colors: active) and (prefers-color-scheme: dark)': {\n            fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary\n          }\n        }\n      })}\n    />\n  );\n};\n"]}
+{"version":3,"file":"HighContrastAwareIcon.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HighContrastAwareIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EACJ,QAAQ,EACR,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,2IAA2I;IAC3I,2FAA2F;IAC3F,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;YACtD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB;gBAChF,iEAAiE,EAAE;oBACjE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;iBACjF;aACF;SACF,CAAC,GAAI,CAAC;AACT,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../theming';\n\n/**\n * @internal\n */\nexport interface _HighContrastAwareIconProps {\n  /** Icon name */\n  iconName: string;\n  /** Whether button is disabled */\n  disabled?: boolean | undefined;\n}\n\n/**\n * This is a helper component to define and unify icon colors\n *\n * @internal\n */\nexport const _HighContrastAwareIcon = (props: _HighContrastAwareIconProps): JSX.Element => {\n  const {\n    iconName,\n    disabled\n  } = props;\n  const theme = useTheme();\n  // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors\n  // the media query is for when in specific window accessibility mode, change the svg colors\n  return <Icon iconName={iconName} className={mergeStyles({\n    svg: {\n      fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,\n      '@media (forced-colors: active) and (prefers-color-scheme: dark)': {\n        fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary\n      }\n    }\n  })} />;\n};"]}

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

@@ -20,6 +20,6 @@ export const HoldButton = (props) => {
     const onRenderResumeIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
     };
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon })));
+    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon }));
 };
 //# sourceMappingURL=HoldButton.js.map