@azure/communication-react 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202209010016.0

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.3.3-alpha-202208280018.0';
+module.exports = '1.3.3-alpha-202209010016.0';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-202208280018.0';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-202209010016.0';\n"]}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /**
- * @private
+ * @internal
  *  aria props for this hidden component.
  */
 export declare type AnnouncerProps = {
@@ -8,7 +8,7 @@ export declare type AnnouncerProps = {
     ariaLive: 'off' | 'polite' | 'assertive' | undefined;
 };
 /**
- * @private
+ * @internal
  * Announcer component to maker aria announcements on actions
  */
 export declare const Announcer: (props: AnnouncerProps) => JSX.Element;

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

@@ -3,7 +3,7 @@
 import { Stack } from '@fluentui/react';
 import React from 'react';
 /**
- * @private
+ * @internal
  * Announcer component to maker aria announcements on actions
  */
 export const Announcer = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Announcer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,oBAAC,KAAK,kBAAa,kBAAkB,eAAa,QAAQ,EAAE,MAAM,EAAE,eAAe,GAAU,CAAC;AACvG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAiB;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n *  aria props for this hidden component.\n */\nexport type AnnouncerProps = {\n  announcementString?: string;\n  ariaLive: 'off' | 'polite' | 'assertive' | undefined;\n};\n\n/**\n * @private\n * Announcer component to maker aria announcements on actions\n */\nexport const Announcer = (props: AnnouncerProps): JSX.Element => {\n  const { announcementString, ariaLive } = props;\n\n  return <Stack aria-label={announcementString} aria-live={ariaLive} styles={announcerStyles}></Stack>;\n};\n\n/**\n * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.\n */\nconst announcerStyles: IStackStyles = {\n  root: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    whiteSpace: 'nowrap',\n    border: 0\n  }\n};\n"]}
+{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Announcer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,oBAAC,KAAK,kBAAa,kBAAkB,eAAa,QAAQ,EAAE,MAAM,EAAE,eAAe,GAAU,CAAC;AACvG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAiB;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @internal\n *  aria props for this hidden component.\n */\nexport type AnnouncerProps = {\n  announcementString?: string;\n  ariaLive: 'off' | 'polite' | 'assertive' | undefined;\n};\n\n/**\n * @internal\n * Announcer component to maker aria announcements on actions\n */\nexport const Announcer = (props: AnnouncerProps): JSX.Element => {\n  const { announcementString, ariaLive } = props;\n\n  return <Stack aria-label={announcementString} aria-live={ariaLive} styles={announcerStyles}></Stack>;\n};\n\n/**\n * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.\n */\nconst announcerStyles: IStackStyles = {\n  root: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    whiteSpace: 'nowrap',\n    border: 0\n  }\n};\n"]}

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

@@ -45,6 +45,8 @@ export interface DialpadProps {
     onChange?: (input: string) => void;
     /**  boolean input to determine when to show/hide delete button, default true */
     showDeleteButton?: boolean;
+    /**  boolean input to determine if dialpad is in mobile view, default false */
+    isMobile?: boolean;
     styles?: DialpadStyles;
 }
 /**

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

@@ -49,14 +49,14 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
-    const { digit, index, onClick, onLongPress } = props;
+    const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const clickFunction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         onClick(digit, index);
     }), [digit, index, onClick]);
     const longPressFunction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
-    const { handlers } = useLongPress(clickFunction, longPressFunction);
+    const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
     return (React.createElement(DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: concatStyleSets(buttonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
         React.createElement(Stack, null,
             React.createElement(Text, { className: mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
@@ -65,7 +65,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
     const [plainTextValue, setPlainTextValue] = useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     useEffect(() => {
         if (onChange) {
@@ -136,7 +136,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })))));
         }))));
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useCallback } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n  concatStyleSets,\n  DefaultButton,\n  FocusZone,\n  mergeStyles,\n  Stack,\n  Text,\n  TextField,\n  useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n  buttonStyles,\n  containerStyles,\n  iconButtonStyles,\n  digitStyles,\n  letterStyles,\n  textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n  | 'A'\n  | 'B'\n  | 'C'\n  | 'D'\n  | 'Flash'\n  | 'Num0'\n  | 'Num1'\n  | 'Num2'\n  | 'Num3'\n  | 'Num4'\n  | 'Num5'\n  | 'Num6'\n  | 'Num7'\n  | 'Num8'\n  | 'Num9'\n  | 'Pound'\n  | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**  function to send dtmf tones on button click */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior*/\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** set dialpad textfield content */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text*/\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: string;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n  [\n    { digit: '4', letter: 'GHI' },\n    { digit: '5', letter: 'JKL' },\n    { digit: '6', letter: 'MNO' }\n  ],\n  [\n    { digit: '7', letter: 'PQRS' },\n    { digit: '8', letter: 'TUV' },\n    { digit: '9', letter: 'WXYZ' }\n  ],\n  [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n  'Num1',\n  'Num2',\n  'Num3',\n  'Num4',\n  'Num5',\n  'Num6',\n  'Num7',\n  'Num8',\n  'Num9',\n  'Star',\n  'Num0',\n  'Pound'\n];\n\nconst DialpadButton = (props: {\n  digit: string;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { digit, index, onClick, onLongPress } = props;\n\n  const clickFunction = useCallback(async () => {\n    onClick(digit, index);\n  }, [digit, index, onClick]);\n\n  const longPressFunction = useCallback(async () => {\n    onLongPress(digit, index);\n  }, [digit, index, onLongPress]);\n\n  const { handlers } = useLongPress(clickFunction, longPressFunction);\n  return (\n    <DefaultButton\n      data-test-id={`dialpad-button-${props.index}`}\n      styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n      {...handlers}\n    >\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>\n  );\n};\n\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  styles?: DialpadStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true } = props;\n\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(plainTextValue);\n    }\n  }, [plainTextValue, onChange]);\n\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n\n  return (\n    <div\n      className={mergeStyles(containerStyles(theme), props.styles?.root)}\n      data-test-id=\"dialpadContainer\"\n      data-ui-id=\"dialpadContainer\"\n    >\n      <TextField\n        styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n        value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onChange={(e: any) => {\n          setText(e.target.value);\n        }}\n        placeholder={props.strings.placeholderText}\n        data-test-id=\"dialpad-input\"\n        onRenderSuffix={(): JSX.Element => (\n          <>\n            {showDeleteButton && plainTextValue.length !== 0 && (\n              <IconButton\n                ariaLabel={props.strings.deleteButtonAriaLabel}\n                onClick={deleteNumbers}\n                styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n                iconProps={{ iconName: 'BackSpace' }}\n              />\n            )}\n          </>\n        )}\n      />\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n          return (\n            <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n              {rows.map((button, columnIndex) => (\n                <DialpadButton\n                  key={`button_${columnIndex}`}\n                  /* row index = 0\n                  columnIndex: (0,1,2) => (0,1,2)\n                  row index = 1\n                  columnIndex: (0,1,2)=> (3,4,5)\n                  row index = 2\n                  columnIndex: (0,1,2)=> (6,7,8)\n                  row index = 3\n                  columnIndex: (0,1,2)=> (9,10,11)\n                  columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n                  dialpad index:\n                  0 1 2\n                  3 4 5\n                  6 7 8\n                  9 10 11\n                  then use this index to locate the corresponding dtmf tones\n                  DtmfTones[index]\n                  */\n                  index={columnIndex + rowIndex * rows.length}\n                  digit={button.digit}\n                  letter={button.letter}\n                  styles={props.styles}\n                  onClick={onClickDialpad}\n                  onLongPress={onLongPressDialpad}\n                />\n              ))}\n            </Stack>\n          );\n        })}\n      </FocusZone>\n    </div>\n  );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale().strings.dialpad;\n\n  const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n    return localeStrings;\n    // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n    // the string values exist. So unsafe cast for stable build.\n    return '' as unknown as DialpadStrings;\n  };\n  const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n\n  return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useCallback } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n  concatStyleSets,\n  DefaultButton,\n  FocusZone,\n  mergeStyles,\n  Stack,\n  Text,\n  TextField,\n  useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n  buttonStyles,\n  containerStyles,\n  iconButtonStyles,\n  digitStyles,\n  letterStyles,\n  textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n  | 'A'\n  | 'B'\n  | 'C'\n  | 'D'\n  | 'Flash'\n  | 'Num0'\n  | 'Num1'\n  | 'Num2'\n  | 'Num3'\n  | 'Num4'\n  | 'Num5'\n  | 'Num6'\n  | 'Num7'\n  | 'Num8'\n  | 'Num9'\n  | 'Pound'\n  | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**  function to send dtmf tones on button click */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior*/\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** set dialpad textfield content */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text*/\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: string;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n  [\n    { digit: '4', letter: 'GHI' },\n    { digit: '5', letter: 'JKL' },\n    { digit: '6', letter: 'MNO' }\n  ],\n  [\n    { digit: '7', letter: 'PQRS' },\n    { digit: '8', letter: 'TUV' },\n    { digit: '9', letter: 'WXYZ' }\n  ],\n  [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n  'Num1',\n  'Num2',\n  'Num3',\n  'Num4',\n  'Num5',\n  'Num6',\n  'Num7',\n  'Num8',\n  'Num9',\n  'Star',\n  'Num0',\n  'Pound'\n];\n\nconst DialpadButton = (props: {\n  digit: string;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  isMobile?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n  const clickFunction = useCallback(async () => {\n    onClick(digit, index);\n  }, [digit, index, onClick]);\n\n  const longPressFunction = useCallback(async () => {\n    onLongPress(digit, index);\n  }, [digit, index, onLongPress]);\n\n  const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);\n  return (\n    <DefaultButton\n      data-test-id={`dialpad-button-${props.index}`}\n      styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n      {...handlers}\n    >\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>\n  );\n};\n\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    isMobile = false\n  } = props;\n\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(plainTextValue);\n    }\n  }, [plainTextValue, onChange]);\n\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n\n  return (\n    <div\n      className={mergeStyles(containerStyles(theme), props.styles?.root)}\n      data-test-id=\"dialpadContainer\"\n      data-ui-id=\"dialpadContainer\"\n    >\n      <TextField\n        styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n        value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onChange={(e: any) => {\n          setText(e.target.value);\n        }}\n        placeholder={props.strings.placeholderText}\n        data-test-id=\"dialpad-input\"\n        onRenderSuffix={(): JSX.Element => (\n          <>\n            {showDeleteButton && plainTextValue.length !== 0 && (\n              <IconButton\n                ariaLabel={props.strings.deleteButtonAriaLabel}\n                onClick={deleteNumbers}\n                styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n                iconProps={{ iconName: 'BackSpace' }}\n              />\n            )}\n          </>\n        )}\n      />\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n          return (\n            <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n              {rows.map((button, columnIndex) => (\n                <DialpadButton\n                  key={`button_${columnIndex}`}\n                  /* row index = 0\n                  columnIndex: (0,1,2) => (0,1,2)\n                  row index = 1\n                  columnIndex: (0,1,2)=> (3,4,5)\n                  row index = 2\n                  columnIndex: (0,1,2)=> (6,7,8)\n                  row index = 3\n                  columnIndex: (0,1,2)=> (9,10,11)\n                  columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n                  dialpad index:\n                  0 1 2\n                  3 4 5\n                  6 7 8\n                  9 10 11\n                  then use this index to locate the corresponding dtmf tones\n                  DtmfTones[index]\n                  */\n                  index={columnIndex + rowIndex * rows.length}\n                  digit={button.digit}\n                  letter={button.letter}\n                  styles={props.styles}\n                  onClick={onClickDialpad}\n                  onLongPress={onLongPressDialpad}\n                  isMobile={isMobile}\n                />\n              ))}\n            </Stack>\n          );\n        })}\n      </FocusZone>\n    </div>\n  );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale().strings.dialpad;\n\n  const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n    return localeStrings;\n    // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n    // the string values exist. So unsafe cast for stable build.\n    return '' as unknown as DialpadStrings;\n  };\n  const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n  return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -15,7 +15,7 @@ export const DrawerMenuItem = (props) => {
     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(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: onKeyPress, onClick: onClick, tokens: menuItemChildrenGap },
+    return (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 },
         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 },

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  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  /** 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\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    <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={onKeyPress}\n      onClick={onClick}\n      tokens={menuItemChildrenGap}\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      {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n    </Stack>\n  );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n  <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n\n/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n  root: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap'\n  }\n};\n\nconst iconStyles: IStyle = {\n  // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n\n  // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n  ' span': {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%'\n  }\n};\n\nconst secondaryTextStyles: IStyle = {\n  // limit width for secondaryText in the menu item so it does not overlap with text on left.\n  maxWidth: '50%'\n};\n"]}
+{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../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  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  /** 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\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    <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    >\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      {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n    </Stack>\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/index.d.ts

@@ -18,6 +18,8 @@ export { ParticipantItem } from './ParticipantItem';
 export type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 export { ParticipantList } from './ParticipantList';
 export type { ParticipantListItemStyles, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';
+export { Announcer } from './Announcer';
+export type { AnnouncerProps } from './Announcer';
 export { VideoGallery } from './VideoGallery';
 export type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout } from './VideoGallery';
 export type { HorizontalGalleryStyles } from './HorizontalGallery';

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

@@ -9,6 +9,7 @@ export { MessageThread } from './MessageThread';
 export { StreamMedia } from './StreamMedia';
 export { ParticipantItem } from './ParticipantItem';
 export { ParticipantList } from './ParticipantList';
+export { Announcer } from './Announcer';
 export { VideoGallery } from './VideoGallery';
 export { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';
 export { CameraButton } from './CameraButton';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAWhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAQtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,uDAAuD,CAAC;AAUnG,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\n\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\n\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\n\nexport { SendBox } from './SendBox';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';\n/* @conditional-compile-remove(file-sharing) */\nexport type { ActiveFileUpload } from './SendBox';\n\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\n\nexport { MessageThread } from './MessageThread';\nexport type {\n  MessageProps,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  JumpToNewMessageButtonProps,\n  MessageRenderer,\n  UpdateMessageCallback\n} from './MessageThread';\n\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\n\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\n\nexport { ParticipantList } from './ParticipantList';\nexport type {\n  ParticipantListItemStyles,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\n\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\n\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\n\nexport { CameraButton } from './CameraButton';\nexport type {\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles\n} from './CameraButton';\n\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\n\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\n\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\n\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type {\n  MicrophoneButtonStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings\n} from './MicrophoneButton';\n\nexport { DevicesButton } from './DevicesButton';\nexport type {\n  OptionsDevice,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  DevicesButtonContextualMenuStyles\n} from './DevicesButton';\n\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type {\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles\n} from './ParticipantsButton';\n\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\n\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { VideoTileStrings } from './VideoTile';\n\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n  _PictureInPictureInPictureProps,\n  _PictureInPictureInPictureStrings\n} from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n  _PictureInPictureInPictureTileProps,\n  _TileOrientation\n} from './PictureInPictureInPicture/PictureInPictureInPictureTile';\n\nexport * from './Drawer';\n/* @conditional-compile-remove(file-sharing) */\nexport type { SendBoxErrorBarError } from './SendBoxErrorBar';\nexport * from './FileCard';\nexport * from './FileCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './FileDownloadCards';\nexport type { _FileUploadCardsStrings } from './FileUploadCards';\n\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\n\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from './HoldButton';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings } from './HoldButton';\n\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAWhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAQtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,uDAAuD,CAAC;AAUnG,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { TypingIndicator } from './TypingIndicator';\nexport type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';\n\nexport { ErrorBar } from './ErrorBar';\nexport type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';\n\nexport { GridLayout } from './GridLayout';\nexport type { GridLayoutProps, GridLayoutStyles } from './GridLayout';\n\nexport { SendBox } from './SendBox';\nexport type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';\n/* @conditional-compile-remove(file-sharing) */\nexport type { ActiveFileUpload } from './SendBox';\n\nexport { MessageStatusIndicator } from './MessageStatusIndicator';\nexport type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';\n\nexport { MessageThread } from './MessageThread';\nexport type {\n  MessageProps,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  JumpToNewMessageButtonProps,\n  MessageRenderer,\n  UpdateMessageCallback\n} from './MessageThread';\n\nexport { StreamMedia } from './StreamMedia';\nexport type { StreamMediaProps } from './StreamMedia';\nexport type { LoadingState } from './StreamMedia';\n\nexport { ParticipantItem } from './ParticipantItem';\nexport type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\n\nexport { ParticipantList } from './ParticipantList';\nexport type {\n  ParticipantListItemStyles,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\n\nexport { Announcer } from './Announcer';\nexport type { AnnouncerProps } from './Announcer';\n\nexport { VideoGallery } from './VideoGallery';\nexport type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles, VideoGalleryLayout } from './VideoGallery';\nexport type { HorizontalGalleryStyles } from './HorizontalGallery';\n\nexport { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';\nexport type { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\n\nexport { CameraButton } from './CameraButton';\nexport type {\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles\n} from './CameraButton';\n\nexport { ControlBar } from './ControlBar';\nexport type { ControlBarProps, ControlBarLayout } from './ControlBar';\n\nexport { ControlBarButton } from './ControlBarButton';\nexport type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';\n\nexport { EndCallButton } from './EndCallButton';\nexport type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';\n\nexport { MicrophoneButton } from './MicrophoneButton';\nexport type {\n  MicrophoneButtonStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings\n} from './MicrophoneButton';\n\nexport { DevicesButton } from './DevicesButton';\nexport type {\n  OptionsDevice,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  DevicesButtonContextualMenuStyles\n} from './DevicesButton';\n\nexport { ParticipantsButton } from './ParticipantsButton';\nexport type {\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles\n} from './ParticipantsButton';\n\nexport { ScreenShareButton } from './ScreenShareButton';\nexport type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';\n\nexport { VideoTile } from './VideoTile';\nexport type { VideoTileProps, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { VideoTileStrings } from './VideoTile';\n\nexport { _PictureInPictureInPicture } from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n  _PictureInPictureInPictureProps,\n  _PictureInPictureInPictureStrings\n} from './PictureInPictureInPicture/PictureInPictureInPicture';\nexport type {\n  _PictureInPictureInPictureTileProps,\n  _TileOrientation\n} from './PictureInPictureInPicture/PictureInPictureInPictureTile';\n\nexport * from './Drawer';\n/* @conditional-compile-remove(file-sharing) */\nexport type { SendBoxErrorBarError } from './SendBoxErrorBar';\nexport * from './FileCard';\nexport * from './FileCardGroup';\nexport * from './ModalClone/ModalClone';\nexport * from './FileDownloadCards';\nexport type { _FileUploadCardsStrings } from './FileUploadCards';\n\nexport { _useContainerHeight, _useContainerWidth } from './utils/responsive';\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './ComplianceBanner';\nexport { Dialpad } from './Dialpad/Dialpad';\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from './Dialpad/Dialpad';\n\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from './HoldButton';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings } from './HoldButton';\n\nexport { _LocalVideoTile } from './LocalVideoTile';\nexport { _RemoteVideoTile } from './RemoteVideoTile';\n"]}

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

@@ -82,6 +82,9 @@ export const iconButtonStyles = (theme) => {
     return {
         root: {
             color: `${theme.palette.black}`
+        },
+        icon: {
+            height: 'auto'
         }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Dialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE;IACtD,OAAO;QACL,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;QACpC,YAAY,EAAE,SAAS;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC5D,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAY,EAAU,EAAE;IAClD,OAAO;QACL,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;KACzC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAA6B,EAAE,CAAC,CAAC;IAC3E,KAAK,EAAE;QACL,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,QAAQ;KACtB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;QAClD,YAAY,EAAE,UAAU;QACxB,YAAY,EAAE,UAAU;KACzB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;KACnD;IAED,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;KACtC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAAU,EAAE;IACnD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;QAC1C,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;SAChC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport { IButtonStyles, IStyle, ITextFieldStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const containerStyles = (theme: Theme): IStyle => {\n  return {\n    maxWidth: '16rem',\n    padding: '1.25rem',\n    margin: '1.5rem',\n    textAlign: 'center',\n    background: `${theme.palette.white}`,\n    borderRadius: '0.75rem'\n  };\n};\n\n/**\n * @private\n */\nexport const buttonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    background: 'none',\n    border: 'none',\n    borderRadius: 0,\n    width: '100%',\n    padding: '1.875rem',\n    minWidth: 0,\n    minHeight: 0\n  }\n});\n\n/**\n * @private\n */\nexport const digitStyles = (theme: Theme): IStyle => {\n  return {\n    fontSize: '1.25rem',\n    fontWeight: theme.fonts.medium.fontWeight,\n    color: `${theme.palette.neutralPrimary}`\n  };\n};\n\n/**\n * @private\n */\nexport const textFieldStyles = (theme: Theme): Partial<ITextFieldStyles> => ({\n  field: {\n    padding: 0,\n    textAlign: 'left',\n    fontSize: '0.875rem',\n    paddingLeft: '0.5rem'\n  },\n  root: {\n    backgroundColor: `${theme.palette.neutralLighter}`,\n    borderRadius: '0.125rem',\n    marginBottom: '0.625rem'\n  },\n  fieldGroup: {\n    border: 'none',\n    backgroundColor: `${theme.palette.neutralLighter}`\n  },\n\n  errorMessage: {\n    color: theme.semanticColors.errorText\n  },\n  suffix: {\n    padding: 0\n  }\n});\n\n/**\n * @private\n */\nexport const letterStyles = (theme: Theme): IStyle => {\n  return {\n    fontSize: '0.625rem',\n    color: `${theme.palette.neutralSecondary}`,\n    fontWeight: 400,\n    margin: '0.125rem',\n    minHeight: '0.75rem'\n  };\n};\n\n/**\n * @private\n */\nexport const iconButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: `${theme.palette.black}`\n    }\n  };\n};\n"]}
+{"version":3,"file":"Dialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Dialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE;IACtD,OAAO;QACL,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;QACpC,YAAY,EAAE,SAAS;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC5D,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAY,EAAU,EAAE;IAClD,OAAO;QACL,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;KACzC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAA6B,EAAE,CAAC,CAAC;IAC3E,KAAK,EAAE;QACL,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,QAAQ;KACtB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;QAClD,YAAY,EAAE,UAAU;QACxB,YAAY,EAAE,UAAU;KACzB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;KACnD;IAED,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;KACtC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAAU,EAAE;IACnD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;QAC1C,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;SAChC;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;SACf;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport { IButtonStyles, IStyle, ITextFieldStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const containerStyles = (theme: Theme): IStyle => {\n  return {\n    maxWidth: '16rem',\n    padding: '1.25rem',\n    margin: '1.5rem',\n    textAlign: 'center',\n    background: `${theme.palette.white}`,\n    borderRadius: '0.75rem'\n  };\n};\n\n/**\n * @private\n */\nexport const buttonStyles = (theme: Theme): IButtonStyles => ({\n  root: {\n    background: 'none',\n    border: 'none',\n    borderRadius: 0,\n    width: '100%',\n    padding: '1.875rem',\n    minWidth: 0,\n    minHeight: 0\n  }\n});\n\n/**\n * @private\n */\nexport const digitStyles = (theme: Theme): IStyle => {\n  return {\n    fontSize: '1.25rem',\n    fontWeight: theme.fonts.medium.fontWeight,\n    color: `${theme.palette.neutralPrimary}`\n  };\n};\n\n/**\n * @private\n */\nexport const textFieldStyles = (theme: Theme): Partial<ITextFieldStyles> => ({\n  field: {\n    padding: 0,\n    textAlign: 'left',\n    fontSize: '0.875rem',\n    paddingLeft: '0.5rem'\n  },\n  root: {\n    backgroundColor: `${theme.palette.neutralLighter}`,\n    borderRadius: '0.125rem',\n    marginBottom: '0.625rem'\n  },\n  fieldGroup: {\n    border: 'none',\n    backgroundColor: `${theme.palette.neutralLighter}`\n  },\n\n  errorMessage: {\n    color: theme.semanticColors.errorText\n  },\n  suffix: {\n    padding: 0\n  }\n});\n\n/**\n * @private\n */\nexport const letterStyles = (theme: Theme): IStyle => {\n  return {\n    fontSize: '0.625rem',\n    color: `${theme.palette.neutralSecondary}`,\n    fontWeight: 400,\n    margin: '0.125rem',\n    minHeight: '0.75rem'\n  };\n};\n\n/**\n * @private\n */\nexport const iconButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: `${theme.palette.black}`\n    },\n    icon: {\n      height: 'auto'\n    }\n  };\n};\n"]}

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

@@ -1,7 +1,7 @@
 /**
  * @private
  */
-export default function useLongPress(onClick: () => void, onLongPress: () => void): {
+export default function useLongPress(onClick: () => void, onLongPress: () => void, isMobile: boolean): {
     handlers: {
         onClick: () => void;
         onMouseDown: () => void;

package/dist/dist-esm/react-components/src/components/utils/useLongPress.js

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react';
 /**
  * @private
  */
-export default function useLongPress(onClick, onLongPress) {
+export default function useLongPress(onClick, onLongPress, isMobile) {
     const timerRef = useRef();
     const [isLongPress, setIsLongPress] = useState(false);
     const [action, setAction] = useState(false);
@@ -15,6 +15,10 @@ export default function useLongPress(onClick, onLongPress) {
         }, 500);
     }
     function handleOnClick() {
+        // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event
+        if (isMobile) {
+            return;
+        }
         onClick();
         if (isLongPress) {
             onLongPress();
@@ -41,6 +45,9 @@ export default function useLongPress(onClick, onLongPress) {
         startPressTimer();
     }
     function handleOnTouchEnd() {
+        if (isMobile) {
+            isLongPress ? onLongPress() : onClick();
+        }
         timerRef.current && clearTimeout(timerRef.current);
     }
     return {

package/dist/dist-esm/react-components/src/components/utils/useLongPress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/useLongPress.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,OAAmB,EACnB,WAAuB;IAYvB,MAAM,QAAQ,GAAG,MAAM,EAAiC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,eAAe;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,SAAS,aAAa;QACpB,OAAO,EAAE,CAAC;QACV,IAAI,WAAW,EAAE;YACf,WAAW,EAAE,CAAC;YACd,OAAO;SACR;IACH,CAAC;IAED,SAAS,eAAe;QACtB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,eAAe,EAAE,CAAC;SACnB;IACH,CAAC;IAED,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,SAAS,iBAAiB;QACxB,eAAe,EAAE,CAAC;IACpB,CAAC;IAED,SAAS,eAAe;QACtB,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,SAAS,kBAAkB;QACzB,eAAe,EAAE,CAAC;IACpB,CAAC;IAED,SAAS,gBAAgB;QACvB,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR,OAAO,EAAE,aAAa;YACtB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,eAAe;YAC1B,YAAY,EAAE,kBAAkB;YAChC,UAAU,EAAE,gBAAgB;YAC5B,SAAS,EAAE,eAAe;YAC1B,OAAO,EAAE,aAAa;SACvB;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useRef, useState } from 'react';\n\n/**\n * @private\n */\nexport default function useLongPress(\n  onClick: () => void,\n  onLongPress: () => void\n): {\n  handlers: {\n    onClick: () => void;\n    onMouseDown: () => void;\n    onMouseUp: () => void;\n    onTouchStart: () => void;\n    onTouchEnd: () => void;\n    onKeyDown: () => void;\n    onKeyUp: () => void;\n  };\n} {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [isLongPress, setIsLongPress] = useState(false);\n  const [action, setAction] = useState(false);\n\n  function startPressTimer(): void {\n    setIsLongPress(false);\n    timerRef.current = setTimeout(() => {\n      setIsLongPress(true);\n    }, 500);\n  }\n\n  function handleOnClick(): void {\n    onClick();\n    if (isLongPress) {\n      onLongPress();\n      return;\n    }\n  }\n\n  function handleOnKeyDown(): void {\n    if (action) {\n      setAction(false);\n      startPressTimer();\n    }\n  }\n\n  function handleOnKeyUp(): void {\n    setAction(true);\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  function handleOnMouseDown(): void {\n    startPressTimer();\n  }\n\n  function handleOnMouseUp(): void {\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  function handleOnTouchStart(): void {\n    startPressTimer();\n  }\n\n  function handleOnTouchEnd(): void {\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  return {\n    handlers: {\n      onClick: handleOnClick,\n      onMouseDown: handleOnMouseDown,\n      onMouseUp: handleOnMouseUp,\n      onTouchStart: handleOnTouchStart,\n      onTouchEnd: handleOnTouchEnd,\n      onKeyDown: handleOnKeyDown,\n      onKeyUp: handleOnKeyUp\n    }\n  };\n}\n"]}
+{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/useLongPress.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,OAAmB,EACnB,WAAuB,EACvB,QAAiB;IAYjB,MAAM,QAAQ,GAAG,MAAM,EAAiC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,eAAe;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,SAAS,aAAa;QACpB,yFAAyF;QACzF,IAAI,QAAQ,EAAE;YACZ,OAAO;SACR;QACD,OAAO,EAAE,CAAC;QACV,IAAI,WAAW,EAAE;YACf,WAAW,EAAE,CAAC;YACd,OAAO;SACR;IACH,CAAC;IAED,SAAS,eAAe;QACtB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,eAAe,EAAE,CAAC;SACnB;IACH,CAAC;IAED,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,SAAS,iBAAiB;QACxB,eAAe,EAAE,CAAC;IACpB,CAAC;IAED,SAAS,eAAe;QACtB,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,SAAS,kBAAkB;QACzB,eAAe,EAAE,CAAC;IACpB,CAAC;IAED,SAAS,gBAAgB;QACvB,IAAI,QAAQ,EAAE;YACZ,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;SACzC;QAED,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR,OAAO,EAAE,aAAa;YACtB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,eAAe;YAC1B,YAAY,EAAE,kBAAkB;YAChC,UAAU,EAAE,gBAAgB;YAC5B,SAAS,EAAE,eAAe;YAC1B,OAAO,EAAE,aAAa;SACvB;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useRef, useState } from 'react';\n\n/**\n * @private\n */\nexport default function useLongPress(\n  onClick: () => void,\n  onLongPress: () => void,\n  isMobile: boolean\n): {\n  handlers: {\n    onClick: () => void;\n    onMouseDown: () => void;\n    onMouseUp: () => void;\n    onTouchStart: () => void;\n    onTouchEnd: () => void;\n    onKeyDown: () => void;\n    onKeyUp: () => void;\n  };\n} {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [isLongPress, setIsLongPress] = useState(false);\n  const [action, setAction] = useState(false);\n\n  function startPressTimer(): void {\n    setIsLongPress(false);\n    timerRef.current = setTimeout(() => {\n      setIsLongPress(true);\n    }, 500);\n  }\n\n  function handleOnClick(): void {\n    // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event\n    if (isMobile) {\n      return;\n    }\n    onClick();\n    if (isLongPress) {\n      onLongPress();\n      return;\n    }\n  }\n\n  function handleOnKeyDown(): void {\n    if (action) {\n      setAction(false);\n      startPressTimer();\n    }\n  }\n\n  function handleOnKeyUp(): void {\n    setAction(true);\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  function handleOnMouseDown(): void {\n    startPressTimer();\n  }\n\n  function handleOnMouseUp(): void {\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  function handleOnTouchStart(): void {\n    startPressTimer();\n  }\n\n  function handleOnTouchEnd(): void {\n    if (isMobile) {\n      isLongPress ? onLongPress() : onClick();\n    }\n\n    timerRef.current && clearTimeout(timerRef.current);\n  }\n\n  return {\n    handlers: {\n      onClick: handleOnClick,\n      onMouseDown: handleOnMouseDown,\n      onMouseUp: handleOnMouseUp,\n      onTouchStart: handleOnTouchStart,\n      onTouchEnd: handleOnTouchEnd,\n      onKeyDown: handleOnKeyDown,\n      onKeyUp: handleOnKeyUp\n    }\n  };\n}\n"]}

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

@@ -262,5 +262,9 @@ export interface CallCompositeStrings {
      * Label for the button to open dtmf dialpad
      */
     openDtmfDialpadLabel: string;
+    /**
+     * aria label for when the invite link has been actioned
+     */
+    copyInviteLinkActionedAriaLabel: string;
 }
 //# sourceMappingURL=Strings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * Strings used by the {@link CallComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallCompositeStrings {\n  /**\n   * Title of configuration page.\n   */\n  configurationPageTitle: string;\n  /**\n   * Optional 1-2 lines on the call details used on the configuration page.\n   */\n  configurationPageCallDetails?: string;\n  /**\n   * Text in button to start call in configuration page.\n   */\n  startCallButtonLabel: string;\n  /**\n   * Text in button to rejoin an ended call.\n   */\n  rejoinCallButtonLabel: string;\n  /**\n   * Placeholder text for local device settings dropdowns.\n   */\n  defaultPlaceHolder: string;\n  /**\n   * Label for camera dropdown.\n   */\n  cameraLabel: string;\n  /**\n   * Label for sound dropdown.\n   */\n  soundLabel: string;\n  /**\n   * Error shown when camera access is blocked by the browser.\n   */\n  cameraPermissionDenied: string;\n  /**\n   * Error shown when the camera is turned off.\n   */\n  cameraTurnedOff: string;\n  /**\n   * Error shown when microphone access is blocked by the browser.\n   */\n  microphonePermissionDenied: string;\n  /**\n   * Title text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when connecting to a call.\n   */\n  lobbyScreenConnectingToCallTitle: string;\n  /**\n   * Optional addition details shown to the user on the lobby screen when connection to a call.\n   */\n  lobbyScreenConnectingToCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedTitle: string;\n  /**\n   * Optional additional details shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedMoreDetails?: string;\n  /**\n   * Message shown to the user when they are speaking while muted.\n   */\n  mutedMessage: string;\n  /**\n   * Text for link to MS privacy policy in Compliance Banner.\n   */\n  privacyPolicy: string;\n  /**\n   * Text for link to learn more about a specific subject.\n   */\n  learnMore: string;\n  /**\n   * Message to let user know the meeting is only being recorded (no transcription) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyRecording: string;\n  /**\n   * Message to let user know the meeting is only being transcripted (no recording) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyTranscription: string;\n  /**\n   * Message to let user know recording and transcription of the meeting are saved in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have started in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  /**\n   * Message to let user know recording of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerRecordingSaving: string;\n  /**\n   * Message to let user know recording of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerRecordingStarted: string;\n  /**\n   * Message to let user know recording of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingStopped: string;\n  /**\n   * Message to let user know they are giving consent to meeting being transcripted in ComplianceBanner.\n   */\n  complianceBannerTranscriptionConsent: string;\n  /**\n   * Message to let user know transcription of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerTranscriptionSaving: string;\n  /**\n   * Message to let user know transcription of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStarted: string;\n  /**\n   * Message to let user know the transcription of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStopped: string;\n  /**\n   * Text for close button.\n   */\n  close: string;\n  /**\n   * Title text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectTitle: string;\n  /**\n   * More details text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectMoreDetails: string;\n  /**\n   * Tooltip text used to inform a user that toggling microphone in lobby is not supported.\n   */\n  microphoneToggleInLobbyNotAllowed: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * control bar People button label\n   */\n  peopleButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * label for more button in the Calling composite\n   */\n  moreButtonCallingLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the resume call button on the hold pane\n   */\n  resumeCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label for the resume call button on the hold pane\n   */\n  resumeCallButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the hold pane\n   */\n  holdScreenLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceHolderText: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel: string;\n}\n"]}
+{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/**\n * Strings used by the {@link CallComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallCompositeStrings {\n  /**\n   * Title of configuration page.\n   */\n  configurationPageTitle: string;\n  /**\n   * Optional 1-2 lines on the call details used on the configuration page.\n   */\n  configurationPageCallDetails?: string;\n  /**\n   * Text in button to start call in configuration page.\n   */\n  startCallButtonLabel: string;\n  /**\n   * Text in button to rejoin an ended call.\n   */\n  rejoinCallButtonLabel: string;\n  /**\n   * Placeholder text for local device settings dropdowns.\n   */\n  defaultPlaceHolder: string;\n  /**\n   * Label for camera dropdown.\n   */\n  cameraLabel: string;\n  /**\n   * Label for sound dropdown.\n   */\n  soundLabel: string;\n  /**\n   * Error shown when camera access is blocked by the browser.\n   */\n  cameraPermissionDenied: string;\n  /**\n   * Error shown when the camera is turned off.\n   */\n  cameraTurnedOff: string;\n  /**\n   * Error shown when microphone access is blocked by the browser.\n   */\n  microphonePermissionDenied: string;\n  /**\n   * Title text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when connecting to a call.\n   */\n  lobbyScreenConnectingToCallTitle: string;\n  /**\n   * Optional addition details shown to the user on the lobby screen when connection to a call.\n   */\n  lobbyScreenConnectingToCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedTitle: string;\n  /**\n   * Optional additional details shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedMoreDetails?: string;\n  /**\n   * Message shown to the user when they are speaking while muted.\n   */\n  mutedMessage: string;\n  /**\n   * Text for link to MS privacy policy in Compliance Banner.\n   */\n  privacyPolicy: string;\n  /**\n   * Text for link to learn more about a specific subject.\n   */\n  learnMore: string;\n  /**\n   * Message to let user know the meeting is only being recorded (no transcription) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyRecording: string;\n  /**\n   * Message to let user know the meeting is only being transcripted (no recording) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyTranscription: string;\n  /**\n   * Message to let user know recording and transcription of the meeting are saved in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have started in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  /**\n   * Message to let user know recording of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerRecordingSaving: string;\n  /**\n   * Message to let user know recording of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerRecordingStarted: string;\n  /**\n   * Message to let user know recording of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingStopped: string;\n  /**\n   * Message to let user know they are giving consent to meeting being transcripted in ComplianceBanner.\n   */\n  complianceBannerTranscriptionConsent: string;\n  /**\n   * Message to let user know transcription of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerTranscriptionSaving: string;\n  /**\n   * Message to let user know transcription of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStarted: string;\n  /**\n   * Message to let user know the transcription of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStopped: string;\n  /**\n   * Text for close button.\n   */\n  close: string;\n  /**\n   * Title text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectTitle: string;\n  /**\n   * More details text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectMoreDetails: string;\n  /**\n   * Tooltip text used to inform a user that toggling microphone in lobby is not supported.\n   */\n  microphoneToggleInLobbyNotAllowed: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * control bar People button label\n   */\n  peopleButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * label for more button in the Calling composite\n   */\n  moreButtonCallingLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the resume call button on the hold pane\n   */\n  resumeCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label for the resume call button on the hold pane\n   */\n  resumeCallButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Aria label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Label for the hold pane\n   */\n  holdScreenLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceHolderText: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel: string;\n  /**\n   * aria label for when the invite link has been actioned\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js

@@ -73,7 +73,7 @@ export const CallArrangement = (props) => {
     const callPaneContent = useCallback(() => {
         var _a;
         if (adapter && _isInCall(callStatus) && activePane === 'people') {
-            return (React.createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
+            return (React.createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControlProps.options) ? selectPeople : undefined, callControls: typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React.createElement(React.Fragment, null);
     }, [

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useCallback, useState } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useSelector } from '../hooks/useSelector';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport {\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallPane, CallPaneOption } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const [activePane, setActivePane] = useState<CallPaneOption>('none');\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const { callStatus } = useSelector(callStatusSelector);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const closePane = useCallback(() => {\n    setActivePane('none');\n  }, [setActivePane]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const isMobileWithActivePane = props.mobileView && activePane !== 'none';\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const togglePeople = useCallback(() => {\n    if (activePane === 'people' || !_isInCall(callStatus)) {\n      setActivePane('none');\n    } else {\n      setActivePane('people');\n    }\n  }, [activePane, setActivePane, callStatus]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const selectPeople = useCallback(() => {\n    if (_isInCall(callStatus)) {\n      setActivePane('people');\n    }\n  }, [setActivePane, callStatus]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) */\n    return callCompositeContainerCSS;\n    return { display: 'flex' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && _isInCall(callStatus) && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? selectPeople : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    callStatus,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    selectPeople\n  ]);\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack horizontal grow>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {props.errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...props.errorBarProps} />\n              </Stack>\n            )}\n            {!!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          <Stack.Item grow style={callCompositeContainerFlex()}>\n            <Stack.Item styles={callGalleryStyles} grow>\n              {props.onRenderGalleryContent && (\n                <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                  {props.onRenderGalleryContent()}\n                </Stack>\n              )}\n            </Stack.Item>\n          </Stack.Item>\n          {/* @conditional-compile-remove(one-to-n-calling) */ callPaneContent()}\n        </Stack>\n        {props.callControlProps?.options !== false &&\n          /* @conditional-compile-remove(one-to-n-calling) */ !isMobileWithActivePane && (\n            <Stack.Item className={callControlsContainerStyles}>\n              <CallControls\n                {...props.callControlProps}\n                containerWidth={containerWidth}\n                containerHeight={containerHeight}\n                isMobile={props.mobileView}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                peopleButtonChecked={activePane === 'people'}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                onPeopleButtonClicked={togglePeople}\n              />\n            </Stack.Item>\n          )}\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n  _ComplianceBanner,\n  _ComplianceBannerProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ErrorBar,\n  ErrorBarProps,\n  useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useRef } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useCallback, useState } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useSelector } from '../hooks/useSelector';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport {\n  callControlsContainerStyles,\n  notificationsContainerStyles,\n  containerStyleDesktop,\n  containerStyleMobile,\n  mediaGalleryContainerStyles,\n  galleryParentContainerStyles,\n  bannerNotificationStyles\n} from '../styles/CallPage.styles';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallControlOptions } from '../types/CallControlOptions';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallPane, CallPaneOption } from './CallPane';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\n\n/**\n * @private\n */\nexport interface CallArrangementProps {\n  complianceBannerProps: _ComplianceBannerProps;\n  errorBarProps: ErrorBarProps | false;\n  mutedNotificationProps?: MutedNotificationProps;\n  callControlProps: CallControlsProps;\n  onRenderGalleryContent: () => JSX.Element;\n  dataUiId: string;\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}\n\n/**\n * @private\n */\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n  const containerClassName = useMemo(() => {\n    return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n  }, [props.mobileView]);\n\n  const theme = useTheme();\n  const callGalleryStyles = useMemo(\n    () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n    [theme.palette.neutralLighterAlt]\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const [activePane, setActivePane] = useState<CallPaneOption>('none');\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const { callStatus } = useSelector(callStatusSelector);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const closePane = useCallback(() => {\n    setActivePane('none');\n  }, [setActivePane]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const isMobileWithActivePane = props.mobileView && activePane !== 'none';\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const togglePeople = useCallback(() => {\n    if (activePane === 'people' || !_isInCall(callStatus)) {\n      setActivePane('none');\n    } else {\n      setActivePane('people');\n    }\n  }, [activePane, setActivePane, callStatus]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const selectPeople = useCallback(() => {\n    if (_isInCall(callStatus)) {\n      setActivePane('people');\n    }\n  }, [setActivePane, callStatus]);\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  // To be removed once feature is out of beta, replace with callCompositeContainerCSS\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  const callCompositeContainerFlex = () => {\n    /* @conditional-compile-remove(one-to-n-calling) */\n    return callCompositeContainerCSS;\n    return { display: 'flex' };\n  };\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const callPaneContent = useCallback((): JSX.Element => {\n    if (adapter && _isInCall(callStatus) && activePane === 'people') {\n      return (\n        <CallPane\n          callAdapter={adapter}\n          onClose={closePane}\n          onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={props.callControlProps?.onFetchParticipantMenuItems}\n          onPeopleButtonClicked={\n            showShowPeopleTabHeaderButton(props.callControlProps.options) ? selectPeople : undefined\n          }\n          callControls={\n            typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined\n          }\n          modalLayerHostId={props.modalLayerHostId}\n          activePane={activePane}\n          mobileView={props.mobileView}\n          inviteLink={props.callControlProps.callInvitationURL}\n        />\n      );\n    }\n    return <></>;\n  }, [\n    activePane,\n    adapter,\n    callStatus,\n    closePane,\n    props.callControlProps.callInvitationURL,\n    props.callControlProps?.onFetchParticipantMenuItems,\n    props.callControlProps.options,\n    props.mobileView,\n    props.modalLayerHostId,\n    props.onFetchAvatarPersonaData,\n    selectPeople\n  ]);\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n        <Stack horizontal grow>\n          <Stack.Item styles={notificationsContainerStyles}>\n            <Stack styles={bannerNotificationStyles}>\n              <_ComplianceBanner {...props.complianceBannerProps} />\n            </Stack>\n            {props.errorBarProps !== false && (\n              <Stack styles={bannerNotificationStyles}>\n                <ErrorBar {...props.errorBarProps} />\n              </Stack>\n            )}\n            {!!props.mutedNotificationProps && <MutedNotification {...props.mutedNotificationProps} />}\n          </Stack.Item>\n          <Stack.Item grow style={callCompositeContainerFlex()}>\n            <Stack.Item styles={callGalleryStyles} grow>\n              {props.onRenderGalleryContent && (\n                <Stack verticalFill styles={mediaGalleryContainerStyles}>\n                  {props.onRenderGalleryContent()}\n                </Stack>\n              )}\n            </Stack.Item>\n          </Stack.Item>\n          {/* @conditional-compile-remove(one-to-n-calling) */ callPaneContent()}\n        </Stack>\n        {props.callControlProps?.options !== false &&\n          /* @conditional-compile-remove(one-to-n-calling) */ !isMobileWithActivePane && (\n            <Stack.Item className={callControlsContainerStyles}>\n              <CallControls\n                {...props.callControlProps}\n                containerWidth={containerWidth}\n                containerHeight={containerHeight}\n                isMobile={props.mobileView}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                peopleButtonChecked={activePane === 'people'}\n                /* @conditional-compile-remove(one-to-n-calling) */\n                onPeopleButtonClicked={togglePeople}\n              />\n            </Stack.Item>\n          )}\n      </Stack>\n    </div>\n  );\n};\n\n/* @conditional-compile-remove(one-to-n-calling) */\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.participantsButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}