@azure/communication-react 1.15.0-beta.2 → 1.16.0-alpha-202404160012

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\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 menu\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  styles?: _DrawerMenuStyles;\n}\nconst isDrawerMenuItem = (item: _DrawerMenuItemProps): boolean => {\n  return item.onRendererContent === undefined;\n};\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find(item => isDrawerMenuItem(item) && item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback((item: _DrawerMenuItemProps, ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined, itemKey?: string | undefined): void => {\n    if (item.subMenuProps) {\n      setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n    }\n    item.onItemClick?.(ev, itemKey);\n  }, [selectedKeyPath]);\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender?.[0] && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle ?? {}, {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius\n    }\n  }), [firstItemStyle, borderRadius]);\n  return <_DrawerSurface disableMaxHeight={props.disableMaxHeight} styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading}>\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map(item => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + '0'} shouldFocusOnMount={item.itemKey === 'reactions' ? false : true} styles={modifiedFirstItemStyle} onItemClick={item.itemKey === 'reactions' ? undefined : (ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n        {menuItemsToRender?.slice(1).map((item, i) => isDrawerMenuItem(item) ? <DrawerMenuItem {...item} key={`${item.itemKey}` + `${i + 1}`} onItemClick={(ev, itemKey) => {\n        onItemClick(item, ev, itemKey);\n      }} /> : item.onRendererContent?.())}\n      </Stack>\n    </_DrawerSurface>;\n};"]}
+{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\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 menu\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?: _DrawerMenuStyles;\n}\n\nconst isDrawerMenuItem = (item: _DrawerMenuItemProps): boolean => {\n  return item.onRendererContent === undefined;\n};\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => isDrawerMenuItem(item) && item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender?.[0] && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface\n      disableMaxHeight={props.disableMaxHeight}\n      styles={props.styles?.drawerSurfaceStyles}\n      onLightDismiss={props.onLightDismiss}\n      heading={props.heading}\n    >\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) =>\n          isDrawerMenuItem(item) ? (\n            <DrawerMenuItem\n              {...item}\n              key={`${item.itemKey}` + '0'}\n              shouldFocusOnMount={item.itemKey === 'reactions' ? false : true}\n              styles={modifiedFirstItemStyle}\n              onItemClick={\n                item.itemKey === 'reactions'\n                  ? undefined\n                  : (ev, itemKey) => {\n                      onItemClick(item, ev, itemKey);\n                    }\n              }\n            />\n          ) : (\n            item.onRendererContent?.()\n          )\n        )}\n        {menuItemsToRender?.slice(1).map((item, i) =>\n          isDrawerMenuItem(item) ? (\n            <DrawerMenuItem\n              {...item}\n              key={`${item.itemKey}` + `${i + 1}`}\n              onItemClick={(ev, itemKey) => {\n                onItemClick(item, ev, itemKey);\n              }}\n            />\n          ) : (\n            item.onRendererContent?.()\n          )\n        )}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../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};"]}
+{"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"]}

package/dist/dist-esm/react-components/src/components/Drawer/ReactionDrawerMenuItem.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ReactionResources } from '../..';
+/**
+ * Props for the ReactionMenuItem
+ *
+ * @internal
+ */
+export interface _ReactionMenuItemProps {
+    /**
+     * Reaction resources to render for mobile button menus for reaction
+     */
+    reactionResources?: ReactionResources;
+    /**
+     * reaction click event from the call adapter.
+     */
+    onReactionClick?: (reaction: string) => Promise<void>;
+    /**
+     * Whether the menu item is disabled
+     * @defaultvalue false
+     */
+    disabled?: boolean;
+}
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @internal
+ */
+export declare const _ReactionDrawerMenuItem: (props: _ReactionMenuItemProps) => JSX.Element;
+//# sourceMappingURL=ReactionDrawerMenuItem.d.ts.map

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

@@ -0,0 +1,60 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import React from 'react';
+/* @conditional-compile-remove(reaction) */
+import { useTheme } from '../../theming/FluentThemeProvider';
+/* @conditional-compile-remove(reaction) */
+import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
+/* @conditional-compile-remove(reaction) */
+import { IconButton } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @internal
+ */
+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 emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const borderRadius = useTheme().effects.roundedCorner4;
+    const modifiedFirstItemStyle = {
+        root: {
+            borderTopRightRadius: borderRadius,
+            borderTopLeftRadius: borderRadius,
+            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) },
+        React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
+            const resourceUrl = emojiResource.get(emoji.toString());
+            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') }));
+        }))));
+};
+/* @conditional-compile-remove(reaction) */
+const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
+        background: hoverBackground
+    } }));
+/* @conditional-compile-remove(reaction) */
+const disabledDrawerMenuItemRootStyles = (background) => ({
+    pointerEvents: 'none',
+    background: background,
+    ':hover, :focus': {
+        background: background
+    }
+});
+//# sourceMappingURL=ReactionDrawerMenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAAqB,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxE,2CAA2C;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,2CAA2C;AAC3C,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AACjG,2CAA2C;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA0B7C,2CAA2C;AAC3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IACpF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C,MAAM,aAAa,GAAoC,IAAI,GAAG,CAAC;QAC7D,CAAC,MAAM,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,0CAAE,GAAG,CAAC;QACtC,CAAC,OAAO,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,0CAAE,GAAG,CAAC;QACxC,CAAC,OAAO,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,0CAAE,GAAG,CAAC;QACxC,CAAC,UAAU,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,0CAAE,GAAG,CAAC;QAC9C,CAAC,WAAW,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,iBAAiB,0CAAE,GAAG,CAAC;KACjD,CAAC,CAAC;IACH,MAAM,MAAM,GAAa,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACvD,MAAM,sBAAsB,GAAG;QAC7B,IAAI,EAAE;YACJ,oBAAoB,EAAE,YAAY;YAClC,mBAAmB,EAAE,YAAY;YACjC,SAAS,EAAE,MAAM;SAClB;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,kCAAkC,EAC7C,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,UAAU,EACf,UAAU,QACV,SAAS,EAAE,WAAW,CACpB,wBAAwB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EACvE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SAAS,EACjG,sBAAsB,CAAC,IAAI,CAC5B;QAED,6BAAK,KAAK,EAAE,uBAAuB,EAAE,IAClC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3B,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAExD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE;;oBACZ,MAAA,KAAK,CAAC,eAAe,sDAAG,KAAK,CAAC,CAAC;gBACjC,CAAC,EACD,KAAK,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,GACvE,CACH,CAAC;QACJ,CAAC,CAAC,CACE,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C,MAAM,wBAAwB,GAAG,CAAC,eAAuB,EAAE,QAAmB,EAAU,EAAE,CAAC,iCACtF,QAAQ,KACX,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,SAAS,EACjB,gBAAgB,EAAE;QAChB,UAAU,EAAE,eAAe;KAC5B,IACD,CAAC;AAEH,2CAA2C;AAC3C,MAAM,gCAAgC,GAAG,CAAC,UAAkB,EAAU,EAAE,CAAC,CAAC;IACxE,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,UAAU;IACtB,gBAAgB,EAAE;QAChB,UAAU,EAAE,UAAU;KACvB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { IRawStyle, IStyle, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { useTheme } from '../../theming/FluentThemeProvider';\n/* @conditional-compile-remove(reaction) */\nimport { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';\n/* @conditional-compile-remove(reaction) */\nimport { IconButton } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { _DrawerMenuItemProps, ReactionResources } from '../..';\n\n/* @conditional-compile-remove(reaction) */\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/* @conditional-compile-remove(reaction) */\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\n/* @conditional-compile-remove(reaction) */\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\n/* @conditional-compile-remove(reaction) */\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n"]}

package/dist/dist-esm/react-components/src/components/Drawer/index.d.ts

@@ -3,4 +3,6 @@ export type { _DrawerMenuProps, _DrawerMenuStyles } from './DrawerMenu';
 export type { _DrawerMenuItemProps } from './DrawerMenuItem';
 export { _DrawerSurface } from './DrawerSurface';
 export type { _DrawerSurfaceProps, _DrawerSurfaceStyles } from './DrawerSurface';
+export { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';
+export type { _ReactionMenuItemProps } from './ReactionDrawerMenuItem';
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,4 +2,6 @@
 // Licensed under the MIT License.
 export { _DrawerMenu } from './DrawerMenu';
 export { _DrawerSurface } from './DrawerSurface';
+/* @conditional-compile-remove(reaction) */
+export { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _DrawerMenu } from './DrawerMenu';\nexport type { _DrawerMenuProps, _DrawerMenuStyles } from './DrawerMenu';\nexport type { _DrawerMenuItemProps } from './DrawerMenuItem';\nexport { _DrawerSurface } from './DrawerSurface';\nexport type { _DrawerSurfaceProps, _DrawerSurfaceStyles } from './DrawerSurface';"]}
+{"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,2CAA2C;AAC3C,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';\n/* @conditional-compile-remove(reaction) */\nexport { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';\n/* @conditional-compile-remove(reaction) */\nexport type { _ReactionMenuItemProps } from './ReactionDrawerMenuItem';\n"]}

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

@@ -12,6 +12,10 @@ export interface EndCallButtonStrings {
     label: string;
     /** Tooltip content. */
     tooltipContent?: string;
+    /** Label for leave option when ending call */
+    leaveOption?: string;
+    /** Label for end the whole call option when ending call */
+    endCallOption?: string;
 }
 /**
  * Props for {@link EndCallButton}.
@@ -23,7 +27,12 @@ export interface EndCallButtonProps extends ControlBarButtonProps {
      * Utility property for using this component with `communication react eventHandlers`.
      * Maps directly to the `onClick` property.
      */
-    onHangUp?: () => Promise<void>;
+    onHangUp?: (forEveryone?: boolean) => Promise<void>;
+    /**
+     * Set this to true to make it a split button.
+     * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.
+     */
+    enableEndCallMenu?: boolean;
     /**
      * Optional strings to override in component
      */

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

@@ -1,14 +1,20 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var _a, _b;
 import { concatStyleSets, Icon } from '@fluentui/react';
-import React from 'react';
+/* @conditional-compile-remove(end-call-options) */
+import { mergeStyles } from '@fluentui/react';
+import React, { useCallback } from 'react';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
 import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
-const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "ControlButtonEndCall" });
+/* @conditional-compile-remove(end-call-options) */
+import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
+/* @conditional-compile-remove(end-call-options) */
+const spacerClass = mergeStyles({
+    width: 4
+});
 /**
  * A button to end an ongoing call.
  *
@@ -17,74 +23,119 @@ const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "Control
  * @public
  */
 export const EndCallButton = (props) => {
-    var _a, _b, _c;
-    const { styles } = props;
+    var _a, _b;
+    const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;
     const localeStrings = useLocale().strings.endCallButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
-    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
-    return React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' }));
+    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, 
+    /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
+    const onRenderEndCallIcon = useCallback(() => (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { iconName: "ControlButtonEndCall" }), /* @conditional-compile-remove(end-call-options) */
+        enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu]);
+    /* @conditional-compile-remove(end-call-options) */
+    const defaultMenuProps = {
+        items: [
+            {
+                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: {
+                root: {
+                    maxWidth: '95%'
+                }
+            },
+            preventDismissOnEvent
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ControlBarButton, Object.assign({}, props, { 
+            /* @conditional-compile-remove(end-call-options) */
+            menuProps: enableEndCallMenu ? defaultMenuProps : undefined, 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' }))));
 };
-// using media query to prevent windows from overwriting the button color
-const darkThemeCallButtonStyles = {
-    root: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+const getButtonStyles = (theme) => {
+    var _a;
+    return ({
+        regular: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRed,
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto',
+                border: `1px ${(_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+            },
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
         },
-        ':focus::after': {
-            outlineColor: `${darkTheme.callingPalette.iconWhite} !important`
-        } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
+        pressed: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDarker,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
+        },
+        hovered: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDark,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
         }
-    },
+    });
+};
+const darkThemeButtonStyles = getButtonStyles(darkTheme);
+const lightThemeButtonStyles = getButtonStyles(lightTheme);
+// using media query to prevent windows from overwriting the button color
+const darkThemeCallButtonStyles = {
+    root: darkThemeButtonStyles.regular,
+    rootHovered: darkThemeButtonStyles.hovered,
+    rootPressed: darkThemeButtonStyles.pressed,
     label: {
         color: darkTheme.callingPalette.iconWhite
-    }
+    },
+    splitButtonMenuButton: Object.assign(Object.assign({}, darkThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': darkThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed
 };
 const lightThemeCallButtonStyles = {
-    root: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralQuaternaryAlt} solid`
-        },
-        ':focus::after': {
-            outlineColor: `${lightTheme.callingPalette.iconWhite} !important`
-        } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
+    root: lightThemeButtonStyles.regular,
+    rootHovered: lightThemeButtonStyles.hovered,
+    rootPressed: lightThemeButtonStyles.pressed,
+    splitButtonMenuButton: Object.assign(Object.assign({}, lightThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': lightThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,
+    splitButtonMenuFocused: lightThemeButtonStyles.pressed,
     label: {
         color: lightTheme.callingPalette.iconWhite
     }
 };
+/* @conditional-compile-remove(end-call-options) */
+const menupButtonPadding = {
+    root: { padding: '0 0.75rem' }
+};
 //# sourceMappingURL=EndCallButton.js.map

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

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