@azure/communication-react 1.15.0-beta.1 → 1.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\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 * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**\n   * function to send dtmf tones on button click\n   */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**\n   * Callback for dialpad button behavior\n   */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /**\n   * set dialpad textfield content\n   */\n  textFieldValue?: string;\n  /**\n   * on change function for text field, provides an unformatted plain text\n   */\n  onChange?: (input: string) => void;\n  /**\n   * flag to determine when to show/hide delete button, default true\n   */\n  showDeleteButton?: boolean;\n  /**\n   * Determines what kind of device that the user is on and should respect that based on interaction\n   * interfaces available to the user\n   */\n  longPressTrigger?: LongPressTrigger;\n  /**\n   * Styles for customizing the dialpad component\n   */\n  styles?: DialpadStyles;\n  /**\n   * Disables DTMF sounds when dialpad buttons are pressed. the actual\n   * tones are still sent to the call.\n   */\n  disableDtmfPlayback?: boolean;\n  /**\n   * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n   * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n   * and can be edited to change the number being dialed.\n   */\n  dialpadMode?: DialpadMode;\n}\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: DtmfFrequenciesKeys;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n  digit: '1'\n}, {\n  digit: '2',\n  letter: 'ABC'\n}, {\n  digit: '3',\n  letter: 'DEF'\n}], [{\n  digit: '4',\n  letter: 'GHI'\n}, {\n  digit: '5',\n  letter: 'JKL'\n}, {\n  digit: '6',\n  letter: 'MNO'\n}], [{\n  digit: '7',\n  letter: 'PQRS'\n}, {\n  digit: '8',\n  letter: 'TUV'\n}, {\n  digit: '9',\n  letter: 'WXYZ'\n}], [{\n  digit: '*'\n}, {\n  digit: '0',\n  letter: '+'\n}, {\n  digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n  digit: DtmfFrequenciesKeys;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  longPressTrigger: LongPressTrigger;\n  dtmfToneAudioContext: AudioContext;\n  disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    digit,\n    index,\n    onClick,\n    onLongPress,\n    longPressTrigger,\n    dtmfToneAudioContext,\n    disableDtmfPlayback\n  } = props;\n  const [buttonPressed, setButtonPressed] = useState(false);\n  const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n  const useLongPressProps = React.useMemo(() => ({\n    onClick: async () => {\n      onClick(digit, index);\n    },\n    onLongPress: async () => {\n      onLongPress(digit, index);\n    },\n    touchEventsOnly: longPressTrigger === 'touch'\n  }), [digit, index, longPressTrigger, onClick, onLongPress]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n      if (!disableDtmfPlayback) {\n        dtmfToneSound.current.play();\n      }\n      longPressHandlers.onKeyDown();\n      setButtonPressed(true);\n      return;\n    }\n    if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      dtmfToneSound.current.stop();\n    }\n    longPressHandlers.onKeyDown();\n  }} onKeyUp={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n      dtmfToneSound.current.stop();\n      longPressHandlers.onKeyUp();\n      setButtonPressed(false);\n    }\n    longPressHandlers.onKeyUp();\n  }} onMouseDown={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onMouseDown();\n  }} onMouseUp={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onMouseUp();\n  }} onMouseLeave={() => {\n    dtmfToneSound.current.stop();\n  }} onTouchStart={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onTouchStart();\n  }} onTouchEnd={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onTouchEnd();\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};\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  longPressTrigger?: LongPressTrigger;\n  styles?: DialpadStyles;\n  disableDtmfPlayback?: boolean;\n  dialpadMode?: DialpadMode;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    longPressTrigger = 'mouseAndTouch',\n    disableDtmfPlayback,\n    dialpadMode = 'dialer'\n  } = props;\n  const dtmfToneAudioContext = useRef(new AudioContext());\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n  const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n  useEffect(() => {\n    if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n      onChange?.(plainTextValue);\n    }\n    plainTextValuePreviousRenderValue.current = plainTextValue;\n  }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\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  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  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n  return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n      {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} 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    }} onClick={e => {\n      e.preventDefault();\n    }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n              {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n        iconName: 'DialpadBackspace'\n      }} />}\n            </>} />}\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n        return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n          childrenGap: '1rem'\n        }}>\n              {rows.map((button, columnIndex) => <DialpadButton 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          */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n            </Stack>;\n      })}\n      </FocusZone>\n    </Stack>;\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 * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  const localeStrings = useLocale().strings.dialpad;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};"]}
+{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3H,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvI,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAuB,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAuGjF,MAAM,qBAAqB,GAA6B,CAAC,CAAC;YACxD,KAAK,EAAE,GAAG;SACX,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,MAAM;SACf,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,MAAM;SACf,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;SACX,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,EAAE;YACD,KAAK,EAAE,GAAG;SACX,CAAC,CAAC,CAAC;AACJ,MAAM,SAAS,GAAe,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAChI,MAAM,aAAa,GAAG,CAAC,KAUtB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,MAAM,CAAO,IAAI,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzH,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,EAAE,GAAS,EAAE;YAClB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC,CAAA;QACD,WAAW,EAAE,GAAS,EAAE;YACtB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACD,eAAe,EAAE,gBAAgB,KAAK,OAAO;KAC9C,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,oBAAC,aAAa,kCAAe,kBAAkB,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAM,iBAAiB,IAAE,SAAS,EAAE,CAAC,CAAC,EAAE;YAC7K,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC3D,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC/B,CAAC;gBACD,iBAAiB,CAAC,SAAS,EAAE,CAAC;gBAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACvH,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,SAAS,EAAE,CAAC;QAChC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,aAAa,EAAE,CAAC;gBAC1D,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,OAAO,EAAE,CAAC;gBAC5B,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;YACD,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE;YACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAClC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;YACjB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7B,iBAAiB,CAAC,SAAS,EAAE,CAAC;QAChC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;YACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,YAAY,EAAE,CAAC;QACnC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE;YAClB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7B,iBAAiB,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC;QACG,oBAAC,KAAK;YACJ,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAQ;YAE3F,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG,CAAQ,CAC/F,CACM,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAiBzB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,gBAAgB,GAAG,eAAe,EAClC,mBAAmB,EACnB,WAAW,GAAG,QAAQ,EACtB,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC;IAC9F,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAC3E,MAAM,iCAAiC,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iCAAiC,CAAC,OAAO,KAAK,cAAc,EAAE,CAAC;YACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,cAAc,CAAC,CAAC;QAC7B,CAAC;QACD,iCAAiC,CAAC,OAAO,GAAG,cAAc,CAAC;IAC7D,CAAC,EAAE,CAAC,iCAAiC,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAC5D,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;QAChC,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAChE,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,MAAM,OAAO,GAAG,CAAC,KAAa,EAAQ,EAAE;QACtC,sFAAsF;QACtF,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7E,OAAO,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,kBAAe,kBAAkB,gBAAY,kBAAkB,EAAC,eAAe,EAAE,QAAQ;QACpK,WAAW,KAAK,QAAQ,IAAI,oBAAC,SAAS,IAAC,MAAM,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,EAAE,cAAc,KAAK,EAAE,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC;YACrN,8DAA8D;YAC9D,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE;gBACnB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,kBAAe,eAAe,EAAC,cAAc,EAAE,GAAgB,EAAE;;gBAAC,OAAA,0CACpG,gBAAgB,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,oBAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,eAAe,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,CAAC,EAAE,SAAS,EAAE;wBACrO,QAAQ,EAAE,kBAAkB;qBAC7B,GAAI,CACI,CAAA;aAAA,GAAI;QACb,oBAAC,SAAS,QACP,qBAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;YAC9C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,GAAG,EAAE,OAAO,QAAQ,EAAE,EAAE,eAAe,EAAC,SAAS,EAAC,MAAM,EAAE;oBACjF,WAAW,EAAE,MAAM;iBACpB,IACM,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,oBAAC,aAAa,IAAC,GAAG,EAAE,UAAU,WAAW,EAAE;gBAClF;;;;;;;;;;;;;;;;kBAgBE,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,GAAI,CAAC,CACvS,CAAC;QACf,CAAC,CAAC,CACU,CACN,CAAC;AACb,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAClD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,OAAO,oBAAC,gBAAgB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;AAC3D,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE;IAC9C,sFAAsF;IACtF,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\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 * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**\n   * function to send dtmf tones on button click\n   */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**\n   * Callback for dialpad button behavior\n   */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /**\n   * set dialpad textfield content\n   */\n  textFieldValue?: string;\n  /**\n   * on change function for text field, provides an unformatted plain text\n   */\n  onChange?: (input: string) => void;\n  /**\n   * flag to determine when to show/hide delete button, default true\n   */\n  showDeleteButton?: boolean;\n  /**\n   * Determines what kind of device that the user is on and should respect that based on interaction\n   * interfaces available to the user\n   */\n  longPressTrigger?: LongPressTrigger;\n  /**\n   * Styles for customizing the dialpad component\n   */\n  styles?: DialpadStyles;\n  /**\n   * Disables DTMF sounds when dialpad buttons are pressed. the actual\n   * tones are still sent to the call.\n   */\n  disableDtmfPlayback?: boolean;\n  /**\n   * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n   * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n   * and can be edited to change the number being dialed.\n   */\n  dialpadMode?: DialpadMode;\n  /**\n   * Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n   */\n  dtmfAudioContext?: AudioContext;\n}\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: DtmfFrequenciesKeys;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n  digit: '1'\n}, {\n  digit: '2',\n  letter: 'ABC'\n}, {\n  digit: '3',\n  letter: 'DEF'\n}], [{\n  digit: '4',\n  letter: 'GHI'\n}, {\n  digit: '5',\n  letter: 'JKL'\n}, {\n  digit: '6',\n  letter: 'MNO'\n}], [{\n  digit: '7',\n  letter: 'PQRS'\n}, {\n  digit: '8',\n  letter: 'TUV'\n}, {\n  digit: '9',\n  letter: 'WXYZ'\n}], [{\n  digit: '*'\n}, {\n  digit: '0',\n  letter: '+'\n}, {\n  digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n  digit: DtmfFrequenciesKeys;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  longPressTrigger: LongPressTrigger;\n  dtmfToneAudioContext: AudioContext;\n  disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    digit,\n    index,\n    onClick,\n    onLongPress,\n    longPressTrigger,\n    dtmfToneAudioContext,\n    disableDtmfPlayback\n  } = props;\n  const [buttonPressed, setButtonPressed] = useState(false);\n  const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n  const useLongPressProps = React.useMemo(() => ({\n    onClick: async () => {\n      onClick(digit, index);\n    },\n    onLongPress: async () => {\n      onLongPress(digit, index);\n    },\n    touchEventsOnly: longPressTrigger === 'touch'\n  }), [digit, index, longPressTrigger, onClick, onLongPress]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n      if (!disableDtmfPlayback) {\n        dtmfToneSound.current.play();\n      }\n      longPressHandlers.onKeyDown();\n      setButtonPressed(true);\n      return;\n    }\n    if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      dtmfToneSound.current.stop();\n    }\n    longPressHandlers.onKeyDown();\n  }} onKeyUp={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n      dtmfToneSound.current.stop();\n      longPressHandlers.onKeyUp();\n      setButtonPressed(false);\n    }\n    longPressHandlers.onKeyUp();\n  }} onMouseDown={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onMouseDown();\n  }} onMouseUp={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onMouseUp();\n  }} onMouseLeave={() => {\n    dtmfToneSound.current.stop();\n  }} onTouchStart={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onTouchStart();\n  }} onTouchEnd={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onTouchEnd();\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};\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  longPressTrigger?: LongPressTrigger;\n  styles?: DialpadStyles;\n  disableDtmfPlayback?: boolean;\n  dialpadMode?: DialpadMode;\n  dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    longPressTrigger = 'mouseAndTouch',\n    disableDtmfPlayback,\n    dialpadMode = 'dialer',\n    dtmfAudioContext\n  } = props;\n  const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n  const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n  useEffect(() => {\n    if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n      onChange?.(plainTextValue);\n    }\n    plainTextValuePreviousRenderValue.current = plainTextValue;\n  }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\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  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  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n  return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n      {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} 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    }} onClick={e => {\n      e.preventDefault();\n    }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n              {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n        iconName: 'DialpadBackspace'\n      }} />}\n            </>} />}\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n        return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n          childrenGap: '1rem'\n        }}>\n              {rows.map((button, columnIndex) => <DialpadButton 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          */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n            </Stack>;\n      })}\n      </FocusZone>\n    </Stack>;\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 * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  const localeStrings = useLocale().strings.dialpad;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};"]}

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

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

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

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import React from 'react';
+/* @conditional-compile-remove(reaction) */
+import { useTheme } from '../../theming/FluentThemeProvider';
+/* @conditional-compile-remove(reaction) */
+import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
+/* @conditional-compile-remove(reaction) */
+import { IconButton } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @internal
+ */
+export const _ReactionDrawerMenuItem = (props) => {
+    var _a, _b, _c, _d, _e;
+    const theme = useTheme();
+    const resources = props.reactionResources;
+    const emojiResource = new Map([['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url], ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url], ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url], ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url], ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]]);
+    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const borderRadius = useTheme().effects.roundedCorner4;
+    const modifiedFirstItemStyle = {
+        root: {
+            borderTopRightRadius: borderRadius,
+            borderTopLeftRadius: borderRadius,
+            marginTop: '12px'
+        }
+    };
+    return React.createElement(Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
+        React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
+            const resourceUrl = emojiResource.get(emoji.toString());
+            return React.createElement(IconButton, { key: index, onClick: () => {
+                    var _a;
+                    (_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
+                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') });
+        })));
+};
+/* @conditional-compile-remove(reaction) */
+const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
+        background: hoverBackground
+    } }));
+/* @conditional-compile-remove(reaction) */
+const disabledDrawerMenuItemRootStyles = (background) => ({
+    pointerEvents: 'none',
+    background: background,
+    ':hover, :focus': {
+        background: background
+    }
+});
+//# sourceMappingURL=ReactionDrawerMenuItem.js.map

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

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

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

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

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

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

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

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

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

@@ -23,7 +23,7 @@ export interface EndCallButtonProps extends ControlBarButtonProps {
      * Utility property for using this component with `communication react eventHandlers`.
      * Maps directly to the `onClick` property.
      */
-    onHangUp?: () => Promise<void>;
+    onHangUp?: (forEveryone?: boolean) => Promise<void>;
     /**
      * Optional strings to override in component
      */

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

@@ -1,14 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var _a, _b;
 import { concatStyleSets, Icon } from '@fluentui/react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
 import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
-const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "ControlButtonEndCall" });
 /**
  * A button to end an ongoing call.
  *
@@ -17,72 +15,81 @@ const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "Control
  * @public
  */
 export const EndCallButton = (props) => {
-    var _a, _b, _c;
-    const { styles } = props;
+    var _a, _b;
+    const { styles, onHangUp } = props;
     const localeStrings = useLocale().strings.endCallButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
     const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
-    return React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' }));
+    const onRenderEndCallIcon = useCallback(() => React.createElement(React.Fragment, null,
+        React.createElement(Icon, { iconName: "ControlButtonEndCall" })), []);
+    return React.createElement(React.Fragment, null,
+        React.createElement(ControlBarButton, Object.assign({}, props, { onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' })));
 };
-// using media query to prevent windows from overwriting the button color
-const darkThemeCallButtonStyles = {
-    root: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+const getButtonStyles = (theme) => {
+    var _a;
+    return ({
+        regular: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRed,
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto',
+                border: `1px ${(_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+            },
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            ':focus::after': {
+                outlineColor: `${theme.callingPalette.iconWhite} !important`
+            } // added !important to avoid override by FluentUI button styles
         },
-        ':focus::after': {
-            outlineColor: `${darkTheme.callingPalette.iconWhite} !important`
-        } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
+        pressed: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDarker,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
+        },
+        hovered: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDark,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
         }
-    },
+    });
+};
+const darkThemeButtonStyles = getButtonStyles(darkTheme);
+const lightThemeButtonStyles = getButtonStyles(lightTheme);
+// using media query to prevent windows from overwriting the button color
+const darkThemeCallButtonStyles = {
+    root: darkThemeButtonStyles.regular,
+    rootHovered: darkThemeButtonStyles.hovered,
+    rootPressed: darkThemeButtonStyles.pressed,
     label: {
         color: darkTheme.callingPalette.iconWhite
-    }
+    },
+    splitButtonMenuButton: Object.assign(Object.assign({}, darkThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': darkThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed
 };
 const lightThemeCallButtonStyles = {
-    root: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralQuaternaryAlt} solid`
-        },
-        ':focus::after': {
-            outlineColor: `${lightTheme.callingPalette.iconWhite} !important`
-        } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
+    root: lightThemeButtonStyles.regular,
+    rootHovered: lightThemeButtonStyles.hovered,
+    rootPressed: lightThemeButtonStyles.pressed,
+    splitButtonMenuButton: Object.assign(Object.assign({}, lightThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': lightThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,
+    splitButtonMenuFocused: lightThemeButtonStyles.pressed,
     label: {
         color: lightTheme.callingPalette.iconWhite
     }

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

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

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

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

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

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

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

@@ -5,8 +5,6 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-overlay-theme) */
-import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
 /**
  * Component to render a fullscreen modal for a selected image.
@@ -18,8 +16,6 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const overlayTheme = useMemo(() => {
-        /* @conditional-compile-remove(image-overlay-theme) */
-        return imageOverlayTheme;
         return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);

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

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) */\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    /* @conditional-compile-remove(image-overlay-theme) */\n    return imageOverlayTheme;\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} ariaLabel={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\n};"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} ariaLabel={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\n};"]}

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -30,7 +29,6 @@ type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private