@azure/communication-react 1.23.0-alpha-202501120018 → 1.23.0

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

@@ -1 +1 @@
-{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButtonStyles,\n  IconButton,\n  IStackStyles,\n  Persona,\n  PersonaSize,\n  PrimaryButton,\n  Stack,\n  Text,\n  Theme,\n  useTheme\n} from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   * Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n  /**\n   * Label for the accept button in the incoming call notification.\n   */\n  incomingCallNotificationAcceptButtonLabel?: string;\n  /**\n   * Label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n  /**\n   * label for the reject button in the incoming call notification.\n   */\n  incomingCallNotificationRejectButtonLabel?: string;\n  /**\n   * Aria label for the incoming call dismiss button\n   */\n  incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Callback when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notification component.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Options for whether to show the accept with video button\n   */\n  acceptOptions: {\n    showAcceptWithVideo: boolean;\n  };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const {\n    callerName,\n    alertText,\n    avatarImage,\n    onAcceptWithAudio,\n    onAcceptWithVideo,\n    onReject,\n    onDismiss,\n    personaSize,\n    styles,\n    strings,\n    acceptOptions\n  } = props;\n  const theme = useTheme();\n\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n\n  const formattedMessageString =\n    localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n      ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n      : callerName;\n\n  const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo\n    ? {\n        items: [\n          {\n            key: 'audio',\n            text:\n              strings?.incomingCallNotificationAcceptButtonLabel ??\n              localeStrings.incomingCallNotificationAcceptButtonLabel,\n            onClick: () => onAcceptWithAudio()\n          },\n          {\n            key: 'video',\n            text:\n              strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n              localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n            onClick: () => onAcceptWithVideo()\n          }\n        ]\n      }\n    : undefined;\n\n  return (\n    <Stack\n      tokens={{ childrenGap: '0.5rem' }}\n      verticalAlign=\"center\"\n      styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n    >\n      <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n        <Stack\n          horizontalAlign=\"start\"\n          styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n        >\n          <Persona\n            imageUrl={avatarImage}\n            text={callerName}\n            size={PersonaSize.size24}\n            coinSize={personaSize}\n            hidePersonaDetails={true}\n            aria-label={callerName}\n          />\n        </Stack>\n\n        <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n          <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n            {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n          </Text>\n        </Stack>\n        <IconButton\n          ariaLabel={\n            strings?.incomingCallNotificationDismissButtonAriaLabel ??\n            localeStrings.incomingCallNotificationDismissButtonAriaLabel\n          }\n          iconProps={{ iconName: 'cancel' }}\n          onClick={onDismiss}\n          styles={dismissButtonStyle(theme)}\n        />\n      </Stack>\n\n      <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n        <PrimaryButton\n          styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n          onClick={() => onAcceptWithAudio()}\n          iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n          ariaLabel={\n            strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n            localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n          }\n          menuProps={acceptManuOptions}\n        >\n          {strings?.incomingCallNotificationAcceptButtonLabel ??\n            localeStrings.incomingCallNotificationAcceptButtonLabel}\n        </PrimaryButton>\n        <DefaultButton\n          styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n          onClick={() => onReject()}\n          iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n          ariaLabel={\n            strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n          }\n        >\n          {strings?.incomingCallNotificationRejectButtonLabel ??\n            localeStrings.incomingCallNotificationRejectButtonLabel}\n        </DefaultButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      width: '20rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.white,\n      border: 'none',\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      maxWidth: '8.875rem'\n    },\n    rootHovered: {\n      color: theme.palette.white\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      borderRadius: theme.effects.roundedCorner4,\n      maxWidth: '8.875rem',\n      width: '100%'\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n"]}
+{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAiB,UAAU,EAAgB,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5J,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAgIxD;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;;IAC5F,MAAM,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,MAAM,EACN,OAAO,EACP,aAAa,EACd,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC;IACnE,MAAM,sBAAsB,GAAG,aAAa,CAAC,wCAAwC,IAAI,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,wCAAwC,EAAE;QAC1K,UAAU,EAAE,UAAU;KACvB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAChB,MAAM,iBAAiB,GAAqC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC9F,KAAK,EAAE,CAAC;gBACN,GAAG,EAAE,OAAO;gBACZ,IAAI,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yCAAyC,mCAAI,aAAa,CAAC,yCAAyC;gBACnH,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;aACnC,EAAE;gBACD,GAAG,EAAE,OAAO;gBACZ,IAAI,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mDAAmD,mCAAI,aAAa,CAAC,mDAAmD;gBACvI,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;aACnC,CAAC;KACH,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,QAAQ;SACtB,EAAE,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,KAAK,CAAC;QACxF,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE;gBACjD,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aAC7C;YACG,oBAAC,KAAK,IAAC,eAAe,EAAC,OAAO,EAAC,MAAM,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,qCAAqC;gBAC7H,oBAAC,OAAO,IAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,gBAAc,UAAU,GAAI,CACjJ;YAER,oBAAC,KAAK,IAAC,IAAI,QAAC,eAAe,EAAC,QAAQ,EAAC,KAAK,EAAE;oBAC5C,UAAU,EAAE,YAAY;oBACxB,UAAU,EAAE,UAAU;iBACvB;gBACG,oBAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,eAAa,WAAW,gBAAc,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,sBAAsB,IACvF,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wCAAwC,mCAAI,sBAAsB,CACpF,CACD;YACR,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8CAA8C,mCAAI,aAAa,CAAC,8CAA8C,EAAE,SAAS,EAAE;oBAC3J,QAAQ,EAAE,QAAQ;iBACnB,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI,CACpD;QAER,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE;gBACrD,WAAW,EAAE,QAAQ;aACtB;YACG,oBAAC,aAAa,IAAC,MAAM,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,EAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE;oBACzJ,QAAQ,EAAE,oCAAoC;oBAC9C,KAAK,EAAE;wBACL,UAAU,EAAE,MAAM;qBACnB;iBACF,EAAE,SAAS,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gDAAgD,mCAAI,aAAa,CAAC,gDAAgD,EAAE,SAAS,EAAE,iBAAiB,IAClK,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yCAAyC,mCAAI,aAAa,CAAC,yCAAyC,CAChG;YAChB,oBAAC,aAAa,IAAC,MAAM,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,EAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE;oBAChJ,QAAQ,EAAE,oCAAoC;iBAC/C,EAAE,SAAS,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uCAAuC,mCAAI,aAAa,CAAC,uCAAuC,IAClH,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yCAAyC,mCAAI,aAAa,CAAC,yCAAyC,CAChG,CACV,CACF,CAAC;AACb,CAAC,CAAC;AACF,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC5D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC/B,OAAO,EAAE,IAAI;YACb,YAAY,EAAE,QAAQ;YACtB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,OAAO,EAAE,MAAM;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,qCAAqC,GAAiB;IAC1D,IAAI,EAAE;QACJ,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAiB,EAAE;IACzD,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACnC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;SACjC;KACF,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,6BAA6B,GAAG,CAAC,KAAY,EAAiB,EAAE;IACpE,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YAC1C,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,UAAU;SACrB;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SAC3B;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,SAAS;SAClB;KACF,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,6BAA6B,GAAG,CAAC,KAAY,EAAiB,EAAE;IACpE,OAAO;QACL,IAAI,EAAE;YACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YAC1C,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,SAAS;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, IStackStyles, Persona, PersonaSize, PrimaryButton, Stack, Text, Theme, useTheme } from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   * Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n  /**\n   * Label for the accept button in the incoming call notification.\n   */\n  incomingCallNotificationAcceptButtonLabel?: string;\n  /**\n   * Label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n  /**\n   * label for the reject button in the incoming call notification.\n   */\n  incomingCallNotificationRejectButtonLabel?: string;\n  /**\n   * Aria label for the incoming call dismiss button\n   */\n  incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Callback when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notification component.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Options for whether to show the accept with video button\n   */\n  acceptOptions: {\n    showAcceptWithVideo: boolean;\n  };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const {\n    callerName,\n    alertText,\n    avatarImage,\n    onAcceptWithAudio,\n    onAcceptWithVideo,\n    onReject,\n    onDismiss,\n    personaSize,\n    styles,\n    strings,\n    acceptOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n  const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {\n    callerName: callerName\n  }) : callerName;\n  const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo ? {\n    items: [{\n      key: 'audio',\n      text: strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel,\n      onClick: () => onAcceptWithAudio()\n    }, {\n      key: 'video',\n      text: strings?.incomingCallNotificationAccceptWithVideoButtonLabel ?? localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n      onClick: () => onAcceptWithVideo()\n    }]\n  } : undefined;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }} verticalAlign=\"center\" styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}>\n      <Stack horizontal verticalAlign=\"center\" tokens={{\n      childrenGap: personaSize ? '0.5rem' : '0rem'\n    }}>\n        <Stack horizontalAlign=\"start\" styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}>\n          <Persona imageUrl={avatarImage} text={callerName} size={PersonaSize.size24} coinSize={personaSize} hidePersonaDetails={true} aria-label={callerName} />\n        </Stack>\n\n        <Stack grow horizontalAlign=\"center\" style={{\n        alignItems: 'flex-start',\n        fontFamily: 'Segoe UI'\n      }}>\n          <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n            {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n          </Text>\n        </Stack>\n        <IconButton ariaLabel={strings?.incomingCallNotificationDismissButtonAriaLabel ?? localeStrings.incomingCallNotificationDismissButtonAriaLabel} iconProps={{\n        iconName: 'cancel'\n      }} onClick={onDismiss} styles={dismissButtonStyle(theme)} />\n      </Stack>\n\n      <Stack horizontal horizontalAlign={'center'} tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        <PrimaryButton styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)} onClick={() => onAcceptWithAudio()} iconProps={{\n        iconName: 'IncomingCallNotificationAcceptIcon',\n        style: {\n          lineHeight: '1rem'\n        }\n      }} ariaLabel={strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ?? localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel} menuProps={acceptManuOptions}>\n          {strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel}\n        </PrimaryButton>\n        <DefaultButton styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)} onClick={() => onReject()} iconProps={{\n        iconName: 'IncomingCallNotificationRejectIcon'\n      }} ariaLabel={strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel}>\n          {strings?.incomingCallNotificationRejectButtonLabel ?? localeStrings.incomingCallNotificationRejectButtonLabel}\n        </DefaultButton>\n      </Stack>\n    </Stack>;\n};\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      width: '20rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.white,\n      border: 'none',\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      maxWidth: '8.875rem'\n    },\n    rootHovered: {\n      color: theme.palette.white\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      borderRadius: theme.effects.roundedCorner4,\n      maxWidth: '8.875rem',\n      width: '100%'\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};"]}

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

@@ -11,10 +11,12 @@ import React from 'react';
  */
 export const IncomingCallStack = (props) => {
     const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;
-    return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls
-        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))
-        .map((incomingCall) => {
-        return (React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: { showAcceptWithVideo: incomingCall.videoAvailable } }));
-    })));
+    return React.createElement(Stack, { tokens: {
+            childrenGap: '0.25rem'
+        }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {
+        return React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: {
+                showAcceptWithVideo: incomingCall.videoAvailable
+            } });
+    }));
 };
 //# sourceMappingURL=IncomingCallStack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IACzE,mBAAmB;SACjB,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC;SAC3F,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,wBAAwB,IACvB,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAC/C,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EACtD,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAC5D,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC9C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,EAAE,mBAAmB,EAAE,YAAY,CAAC,cAAc,EAAE,GACzC,CAC7B,CAAC;IACJ,CAAC,CAAC,CACE,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @public\n */\nexport interface IncomingCallStackCall {\n  /**\n   * Unique identifier for the incoming call.\n   */\n  id: string;\n  /**\n   * Information about the caller.\n   */\n  callerInfo: {\n    /**\n     * Display name of the caller.\n     */\n    displayName?: string;\n  };\n  /**\n   * Whether or not the call is a voip capable call.\n   */\n  videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @public\n */\nexport interface IncomingCallStackProps {\n  /**\n   * List of incoming calls.\n   */\n  activeIncomingCalls: IncomingCallStackCall[];\n  /**\n   * List of incoming calls that have ended.\n   */\n  removedIncomingCalls: IncomingCallStackCall[];\n  /**\n   * Handler to accept the incoming call.\n   * @param incomingCallId - Id of the incoming call to accept.\n   * @param useVideo - Whether to accept with video.\n   * @returns void\n   */\n  onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n  /**\n   * Handler to reject the incoming call.\n   * @param incomingCallId - id of the incoming call to reject\n   * @returns - void\n   */\n  onRejectCall: (incomingCallId: string) => void;\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notifications.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Tab index for the incoming Call stack, this will set the tab order of the\n   * incoming call notifications in your application.\n   */\n  tabIndex?: number;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n  const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;\n  return (\n    <Stack tokens={{ childrenGap: '0.25rem' }} role={'group'} tabIndex={tabIndex}>\n      {activeIncomingCalls\n        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))\n        .map((incomingCall) => {\n          return (\n            <IncomingCallNotification\n              key={incomingCall.id}\n              callerName={incomingCall.callerInfo.displayName}\n              onAcceptWithAudio={() => onAcceptCall(incomingCall.id)}\n              onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)}\n              onReject={() => onRejectCall(incomingCall.id)}\n              onDismiss={() => onRejectCall(incomingCall.id)}\n              styles={styles}\n              strings={strings}\n              acceptOptions={{ showAcceptWithVideo: incomingCall.videoAvailable }}\n            ></IncomingCallNotification>\n          );\n        })}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,SAAS;SACvB,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAC/B,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;QAChI,OAAO,oBAAC,wBAAwB,IAAC,GAAG,EAAE,YAAY,CAAC,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE;gBAC5W,mBAAmB,EAAE,YAAY,CAAC,cAAc;aACjD,GAA6B,CAAC;IACjC,CAAC,CAAC,CACM,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @public\n */\nexport interface IncomingCallStackCall {\n  /**\n   * Unique identifier for the incoming call.\n   */\n  id: string;\n  /**\n   * Information about the caller.\n   */\n  callerInfo: {\n    /**\n     * Display name of the caller.\n     */\n    displayName?: string;\n  };\n  /**\n   * Whether or not the call is a voip capable call.\n   */\n  videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @public\n */\nexport interface IncomingCallStackProps {\n  /**\n   * List of incoming calls.\n   */\n  activeIncomingCalls: IncomingCallStackCall[];\n  /**\n   * List of incoming calls that have ended.\n   */\n  removedIncomingCalls: IncomingCallStackCall[];\n  /**\n   * Handler to accept the incoming call.\n   * @param incomingCallId - Id of the incoming call to accept.\n   * @param useVideo - Whether to accept with video.\n   * @returns void\n   */\n  onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n  /**\n   * Handler to reject the incoming call.\n   * @param incomingCallId - id of the incoming call to reject\n   * @returns - void\n   */\n  onRejectCall: (incomingCallId: string) => void;\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notifications.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Tab index for the incoming Call stack, this will set the tab order of the\n   * incoming call notifications in your application.\n   */\n  tabIndex?: number;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n  const {\n    activeIncomingCalls,\n    removedIncomingCalls,\n    onAcceptCall,\n    onRejectCall,\n    styles,\n    strings,\n    tabIndex\n  } = props;\n  return <Stack tokens={{\n    childrenGap: '0.25rem'\n  }} role={'group'} tabIndex={tabIndex}>\n      {activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {\n      return <IncomingCallNotification key={incomingCall.id} callerName={incomingCall.callerInfo.displayName} onAcceptWithAudio={() => onAcceptCall(incomingCall.id)} onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)} onReject={() => onRejectCall(incomingCall.id)} onDismiss={() => onRejectCall(incomingCall.id)} styles={styles} strings={strings} acceptOptions={{\n        showAcceptWithVideo: incomingCall.videoAvailable\n      }}></IncomingCallNotification>;\n    })}\n    </Stack>;\n};"]}

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

@@ -13,20 +13,27 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
             }, 
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true })));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true }));
 };
 //# sourceMappingURL=InputBoxButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAAO,YAAY;QAC9G,oBAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAC1E,UAAU,mBACR,YAAY,EAC3B,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,IAAI,GACxB,CACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n  'data-testId'?: string;\n  disabled?: boolean;\n  ariaExpanded?: boolean;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent,\n    'data-testId': dataTestId,\n    disabled,\n    ariaExpanded\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n        data-testid={dataTestId}\n        aria-expanded={ariaExpanded}\n        disabled={disabled}\n        allowDisabledFocus={true}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAC/F,YAAY;QAEb,oBAAC,UAAU,IAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;gBAC7G,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAAe,UAAU,mBAAiB,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,IAAI,GAAI,CACjL,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n  'data-testId'?: string;\n  disabled?: boolean;\n  ariaExpanded?: boolean;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent,\n    'data-testId': dataTestId,\n    disabled,\n    ariaExpanded\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{\n    ...calloutProps\n  }}>\n      <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n      setIsHover(true);\n    }} onMouseLeave={() => {\n      setIsHover(false);\n    }}\n    // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n    onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} data-testid={dataTestId} aria-expanded={ariaExpanded} disabled={disabled} allowDisabledFocus={true} />\n    </TooltipHost>;\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

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

@@ -4,8 +4,6 @@ import React, { useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
-/* @conditional-compile-remove(mention) */
-import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -52,31 +50,17 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        /* @conditional-compile-remove(mention) */
-        const textFieldWithMentionProps = {
-            textFieldProps: textFieldProps,
-            dataUiId: dataUiId,
-            textValue: textValue,
-            onChange: onChange,
-            onKeyDown: onKeyDown,
-            onEnterKeyDown: onEnterKeyDown,
-            textFieldRef: textFieldRef,
-            supportNewline: supportNewline,
-            mentionLookupOptions: props.mentionLookupOptions
-        };
-        /* @conditional-compile-remove(mention) */
-        if (props.mentionLookupOptions) {
-            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
-        }
-        return (React.createElement("div", { style: textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined },
-            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
+        return React.createElement("div", { style: textFieldProps.errorMessage ? {
+                padding: '0 0 5px 5px'
+            } : undefined },
+            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
                     // Fix for setting the cursor to the correct position when multiline is true
                     // This approach should be reviewed during migration to FluentUI v9
                     e.currentTarget.value = '';
                     e.currentTarget.value = textValue;
-                } }))));
+                } })));
     };
-    return (React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
+    return React.createElement(Stack, { className: mergedRootStyle },
+        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField()));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\n\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  textFieldStyle,\n  textContainerStyle\n} from './styles/InputBoxComponent.style';\n\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return (\n      <div style={textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined}>\n        <TextField\n          {...textFieldProps}\n          data-ui-id={dataUiId}\n          value={textValue}\n          onChange={onChange}\n          onKeyDown={onTextFieldKeyDown}\n          onFocus={(e) => {\n            // Fix for setting the cursor to the correct position when multiline is true\n            // This approach should be reviewed during migration to FluentUI v9\n            e.currentTarget.value = '';\n            e.currentTarget.value = textValue;\n          }}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n    return <div style={textFieldProps.errorMessage ? {\n      padding: '0 0 5px 5px'\n    } : undefined}>\n        <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n        // Fix for setting the cursor to the correct position when multiline is true\n        // This approach should be reviewed during migration to FluentUI v9\n        e.currentTarget.value = '';\n        e.currentTarget.value = textValue;\n      }} />\n      </div>;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};"]}

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

@@ -35,15 +35,17 @@ export const LocalVideoCameraCycleButton = (props) => {
     }), [onSelectCamera]);
     const disabled = !!waitForCamera;
     const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;
-    return (React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
+    return React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: {
+            iconName: 'LocalCameraSwitch'
+        }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const index = cameras.findIndex(camera => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
                 if (!newCamera) {
                     throw new Error('Camera not found');
                 }
                 onChangeCameraClick(newCamera);
             }
-        } }));
+        } });
 };
 //# sourceMappingURL=LocalVideoCameraButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACxF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAO,MAAqB,EAAE,EAAE;QAC9B,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;IAExF,OAAO,CACL,oBAAC,UAAU,kBACG,8BAA8B,EAC1C,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAC5C,SAAS,EAAE,KAAK,EAChB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,eACtD,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC7E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBACtC,CAAC;gBACD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n  /** control to enable large button mode */\n  size?: 'small' | 'large';\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;\n  const theme = useTheme();\n\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const onChangeCameraClick = useCallback(\n    async (device: OptionsDevice) => {\n      // Throttle changing camera to prevent too many callbacks\n      if (onSelectCamera) {\n        setWaitForCamera(true);\n        try {\n          await onSelectCamera(device);\n        } finally {\n          setWaitForCamera(false);\n        }\n      }\n    },\n    [onSelectCamera]\n  );\n\n  const disabled = !!waitForCamera;\n  const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n\n  return (\n    <IconButton\n      data-ui-id={'local-camera-switcher-button'}\n      styles={localVideoCameraCycleButtonStyles(theme, size)}\n      disabled={disabled}\n      iconProps={{ iconName: 'LocalCameraSwitch' }}\n      ariaLabel={label}\n      ariaDescription={disabled ? cameraLoadingString : ariaDescription}\n      aria-live={'polite'}\n      onClick={() => {\n        if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n          const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);\n          const newCamera = cameras[(index + 1) % cameras.length];\n          if (!newCamera) {\n            throw new Error('Camera not found');\n          }\n          onChangeCameraClick(newCamera);\n        }\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EACJ,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,eAAe,EACf,IAAI,EACL,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAO,MAAqB,EAAE,EAAE;QACtE,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;IACxF,OAAO,oBAAC,UAAU,kBAAa,8BAA8B,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;YACpJ,QAAQ,EAAE,mBAAmB;SAC9B,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;YACzH,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC3E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBACtC,CAAC;gBACD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n  /** control to enable large button mode */\n  size?: 'small' | 'large';\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const {\n    cameras,\n    selectedCamera,\n    onSelectCamera,\n    label,\n    ariaDescription,\n    size\n  } = props;\n  const theme = useTheme();\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const onChangeCameraClick = useCallback(async (device: OptionsDevice) => {\n    // Throttle changing camera to prevent too many callbacks\n    if (onSelectCamera) {\n      setWaitForCamera(true);\n      try {\n        await onSelectCamera(device);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [onSelectCamera]);\n  const disabled = !!waitForCamera;\n  const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n  return <IconButton data-ui-id={'local-camera-switcher-button'} styles={localVideoCameraCycleButtonStyles(theme, size)} disabled={disabled} iconProps={{\n    iconName: 'LocalCameraSwitch'\n  }} ariaLabel={label} ariaDescription={disabled ? cameraLoadingString : ariaDescription} aria-live={'polite'} onClick={() => {\n    if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n      const index = cameras.findIndex(camera => selectedCamera.id === camera.id);\n      const newCamera = cameras[(index + 1) % cameras.length];\n      if (!newCamera) {\n        throw new Error('Camera not found');\n      }\n      onChangeCameraClick(newCamera);\n    }\n  }} />;\n};"]}

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

@@ -21,9 +21,7 @@ import { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpin
  * @internal
  */
 export const _LocalVideoTile = React.memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources, isScreenSharingOn, 
-    /* @conditional-compile-remove(media-access) */
-    mediaAccess } = props;
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources, isScreenSharingOn, mediaAccess } = props;
     const theme = useTheme();
     const localVideoStreamProps = useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
@@ -32,22 +30,14 @@ export const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: mediaAccess ? mediaAccess.isVideoPermitted : true
-    }), [
-        isAvailable,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElement,
-        /* @conditional-compile-remove(media-access) */
-        mediaAccess
-    ]);
+    }), [isAvailable, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement, mediaAccess]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
-        participant: { userId: userId !== null && userId !== void 0 ? userId : '' },
+        participant: {
+            userId: userId !== null && userId !== void 0 ? userId : ''
+        },
         strings: Object.assign({}, strings),
         spotlightedParticipantUserIds,
         isSpotlighted,
@@ -88,53 +78,40 @@ export const _LocalVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React.createElement(React.Fragment, null,
+        return React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
             React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }),
-            props.participantsCount === 1 && !isScreenSharingOn && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
-                React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", role: "alert", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })))));
-    }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview,
-        props.participantsCount,
-        strings === null || strings === void 0 ? void 0 : strings.waitingScreenText,
-        theme,
-        isScreenSharingOn
-    ]);
+            props.participantsCount === 1 && !isScreenSharingOn && React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
+                React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", role: "alert", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })));
+    }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview, props.participantsCount, strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme, isScreenSharingOn]);
     const videoTileOverlay = useMemo(() => {
-        const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
+        const reactionOverlay = reactionResources !== undefined ? React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources }) : undefined;
         return reactionOverlay;
     }, [reaction, reactionResources]);
     const onRenderAvatarOneParticipant = useCallback(() => {
-        return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
-            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", role: "alert", styles: loadSpinnerStyles(theme, false) })));
+        return React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", role: "alert", styles: loadSpinnerStyles(theme, false) }));
     }, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
-    return (React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay, 
-            /* @conditional-compile-remove(media-access) */ mediaAccess: mediaAccess }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+    return React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({
+            width: '100%',
+            height: '100%'
+        }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay, mediaAccess: mediaAccess }), drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {
+        cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+    });
+    return React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }));
 };
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
-    return contextualMenuProps.items.map((item) => {
+    return contextualMenuProps.items.map(item => {
         return {
             itemKey: item.key,
             text: item.text,

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useLocalVideoStreamLifecycleMaintainer,\n  LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  videoContainerStyles,\n  overlayStyles,\n  overlayStylesTransparent,\n  loadSpinnerStyles\n} from './styles/VideoTile.styles';\n/* @conditional-compile-remove(media-access) */\nimport { MediaAccess } from '../types';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n  (props: {\n    userId?: string;\n    onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeLocalStreamView?: () => void;\n    isAvailable?: boolean;\n    isMuted?: boolean;\n    renderElement?: HTMLElement;\n    displayName?: string;\n    initialsName?: string;\n    localVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showLabel: boolean;\n    alwaysShowLabelBackground?: boolean;\n    showMuteIndicator?: boolean;\n    showCameraSwitcherInLocalPreview?: boolean;\n    localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n    localVideoCameraSwitcherLabel?: string;\n    localVideoSelectedDescription?: string;\n    styles?: VideoTileStylesProps;\n    personaMinSize?: number;\n    raisedHand?: RaisedHand;\n    reaction?: Reaction;\n    spotlightedParticipantUserIds?: string[];\n    isSpotlighted?: boolean;\n    onStartSpotlight?: () => void;\n    onStopSpotlight?: () => void;\n    maxParticipantsToSpotlight?: number;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    strings?: VideoGalleryStrings;\n    reactionResources?: ReactionResources;\n    participantsCount?: number;\n    isScreenSharingOn?: boolean;\n    /* @conditional-compile-remove(media-access) */\n    mediaAccess?: MediaAccess;\n  }) => {\n    const {\n      isAvailable,\n      isMuted,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      renderElement,\n      userId,\n      showLabel,\n      alwaysShowLabelBackground,\n      displayName,\n      initialsName,\n      onRenderAvatar,\n      showMuteIndicator,\n      styles,\n      showCameraSwitcherInLocalPreview,\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      raisedHand,\n      reaction,\n      isSpotlighted,\n      spotlightedParticipantUserIds,\n      onStartSpotlight,\n      onStopSpotlight,\n      maxParticipantsToSpotlight,\n      menuKind,\n      strings,\n      reactionResources,\n      isScreenSharingOn,\n      /* @conditional-compile-remove(media-access) */\n      mediaAccess\n    } = props;\n\n    const theme = useTheme();\n\n    const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: localVideoViewOptions?.isMirrored,\n        isStreamAvailable: isAvailable,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElementExists: !!renderElement,\n        scalingMode: localVideoViewOptions?.scalingMode,\n        /* @conditional-compile-remove(media-access) */\n        isVideoPermitted: mediaAccess ? mediaAccess.isVideoPermitted : true\n      }),\n      [\n        isAvailable,\n        localVideoViewOptions?.isMirrored,\n        localVideoViewOptions?.scalingMode,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElement,\n        /* @conditional-compile-remove(media-access) */\n        mediaAccess\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: { userId: userId ?? '' },\n      strings: { ...strings },\n      spotlightedParticipantUserIds,\n      isSpotlighted,\n      onStartSpotlight,\n      onStopSpotlight,\n      maxParticipantsToSpotlight,\n      myUserId: userId\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const videoTileStyles = useMemo(() => {\n      if (isSpotlighted) {\n        return concatStyleSets(\n          {\n            root: {\n              outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n              outlineOffset: '-0.25rem'\n            }\n          },\n          styles\n        );\n      }\n      return styles;\n    }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <>\n          <FloatingLocalCameraCycleButton\n            showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n            localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n            localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n            localVideoSelectedDescription={localVideoSelectedDescription}\n          />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n          {props.participantsCount === 1 && !isScreenSharingOn && (\n            <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n              <Spinner\n                label={strings?.waitingScreenText}\n                ariaLive=\"assertive\"\n                role=\"alert\"\n                labelPosition=\"bottom\"\n                styles={loadSpinnerStyles(theme, true)}\n              />\n            </Stack>\n          )}\n        </>\n      );\n    }, [\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      renderElement,\n      showCameraSwitcherInLocalPreview,\n      props.participantsCount,\n      strings?.waitingScreenText,\n      theme,\n      isScreenSharingOn\n    ]);\n\n    const videoTileOverlay = useMemo(() => {\n      const reactionOverlay =\n        reactionResources !== undefined ? (\n          <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n        ) : undefined;\n      return reactionOverlay;\n    }, [reaction, reactionResources]);\n\n    const onRenderAvatarOneParticipant = useCallback(() => {\n      return (\n        <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n          <Spinner\n            label={strings?.waitingScreenText}\n            ariaLive=\"assertive\"\n            labelPosition=\"bottom\"\n            role=\"alert\"\n            styles={loadSpinnerStyles(theme, false)}\n          />\n        </Stack>\n      );\n    }, [strings?.waitingScreenText, theme]);\n\n    return (\n      <Stack\n        data-ui-id=\"local-video-tile\"\n        className={mergeStyles({ width: '100%', height: '100%' })}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n      >\n        <VideoTile\n          key={userId ?? 'local-video-tile'}\n          userId={userId}\n          renderElement={renderVideoStreamElement}\n          showLabel={showLabel}\n          alwaysShowLabelBackground={alwaysShowLabelBackground}\n          displayName={displayName}\n          initialsName={initialsName}\n          styles={videoTileStyles}\n          onRenderPlaceholder={\n            props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar\n          }\n          isMuted={isMuted}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          raisedHand={raisedHand}\n          isSpotlighted={isSpotlighted}\n          {...videoTileContextualMenuProps}\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          overlay={videoTileOverlay}\n          /* @conditional-compile-remove(media-access) */ mediaAccess={mediaAccess}\n        >\n          {drawerMenuItemProps.length > 0 && (\n            <Layer hostId={props.drawerMenuHostId}>\n              <Stack styles={drawerMenuWrapperStyles}>\n                <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n              </Stack>\n            </Layer>\n          )}\n        </VideoTile>\n      </Stack>\n    );\n  }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription =\n    localVideoCameraCycleButtonProps?.selectedCamera &&\n    localVideoSelectedDescription &&\n    _formatString(localVideoSelectedDescription, {\n      cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n    });\n  return (\n    <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview &&\n        localVideoCameraCycleButtonProps?.cameras !== undefined &&\n        localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n        localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n          <LocalVideoCameraCycleButton\n            cameras={localVideoCameraCycleButtonProps.cameras}\n            selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n            onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n            label={localVideoCameraSwitcherLabel}\n            ariaDescription={ariaDescription}\n          />\n        )}\n    </Stack>\n  );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}
+{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpinnerStyles } from './styles/VideoTile.styles';\nimport { MediaAccess } from '../types';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  alwaysShowLabelBackground?: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n  raisedHand?: RaisedHand;\n  reaction?: Reaction;\n  spotlightedParticipantUserIds?: string[];\n  isSpotlighted?: boolean;\n  onStartSpotlight?: () => void;\n  onStopSpotlight?: () => void;\n  maxParticipantsToSpotlight?: number;\n  menuKind?: 'contextual' | 'drawer';\n  drawerMenuHostId?: string;\n  strings?: VideoGalleryStrings;\n  reactionResources?: ReactionResources;\n  participantsCount?: number;\n  isScreenSharingOn?: boolean;\n  mediaAccess?: MediaAccess;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    alwaysShowLabelBackground,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription,\n    raisedHand,\n    reaction,\n    isSpotlighted,\n    spotlightedParticipantUserIds,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    menuKind,\n    strings,\n    reactionResources,\n    isScreenSharingOn,\n    mediaAccess\n  } = props;\n  const theme = useTheme();\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode,\n    isVideoPermitted: mediaAccess ? mediaAccess.isVideoPermitted : true\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement, mediaAccess]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const contextualMenuProps = useVideoTileContextualMenuProps({\n    participant: {\n      userId: userId ?? ''\n    },\n    strings: {\n      ...strings\n    },\n    spotlightedParticipantUserIds,\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    myUserId: userId\n  });\n  const videoTileContextualMenuProps = useMemo(() => {\n    if (menuKind !== 'contextual' || !contextualMenuProps) {\n      return {};\n    }\n    return {\n      contextualMenu: contextualMenuProps\n    };\n  }, [contextualMenuProps, menuKind]);\n  const videoTileStyles = useMemo(() => {\n    if (isSpotlighted) {\n      return concatStyleSets({\n        root: {\n          outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n          outlineOffset: '-0.25rem'\n        }\n      }, styles);\n    }\n    return styles;\n  }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n  const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n  const onKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));\n    }\n  }, [setDrawerMenuItemProps, contextualMenuProps]);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n          {props.participantsCount === 1 && !isScreenSharingOn && <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n              <Spinner label={strings?.waitingScreenText} ariaLive=\"assertive\" role=\"alert\" labelPosition=\"bottom\" styles={loadSpinnerStyles(theme, true)} />\n            </Stack>}\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview, props.participantsCount, strings?.waitingScreenText, theme, isScreenSharingOn]);\n  const videoTileOverlay = useMemo(() => {\n    const reactionOverlay = reactionResources !== undefined ? <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} /> : undefined;\n    return reactionOverlay;\n  }, [reaction, reactionResources]);\n  const onRenderAvatarOneParticipant = useCallback(() => {\n    return <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n          <Spinner label={strings?.waitingScreenText} ariaLive=\"assertive\" labelPosition=\"bottom\" role=\"alert\" styles={loadSpinnerStyles(theme, false)} />\n        </Stack>;\n  }, [strings?.waitingScreenText, theme]);\n  return <Stack data-ui-id=\"local-video-tile\" className={mergeStyles({\n    width: '100%',\n    height: '100%'\n  })} onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}>\n        <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} alwaysShowLabelBackground={alwaysShowLabelBackground} displayName={displayName} initialsName={initialsName} styles={videoTileStyles} onRenderPlaceholder={props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} raisedHand={raisedHand} isSpotlighted={isSpotlighted} {...videoTileContextualMenuProps} onLongTouch={() => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])))} overlay={videoTileOverlay} mediaAccess={mediaAccess}>\n          {drawerMenuItemProps.length > 0 && <Layer hostId={props.drawerMenuHostId}>\n              <Stack styles={drawerMenuWrapperStyles}>\n                <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n              </Stack>\n            </Layer>}\n        </VideoTile>\n      </Stack>;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};\nconst convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps?: IContextualMenuProps, onLightDismiss?: () => void): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map(item => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};"]}