@azure/communication-react 1.19.0-beta.2 → 1.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { useV9CustomStyles } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\nimport { SendBoxErrors } from './SendBoxErrors';\nimport { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\nimport { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonAriaDisabled } from './utils/SendBoxUtils';\nimport { MentionLookupOptions } from './MentionPopover';\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: string;\n  /**\n   * Aria label to notify user more attachment action menu.\n   */\n  attachmentMoreMenu: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /**\n   * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded attachments. Attachment uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render attachments being uploaded in the SendBox.\n   * @beta\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    mentionLookupOptions,\n    attachments\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n  const customV9Styles = useV9CustomStyles();\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    setAttachmentUploadsPendingError(undefined);\n    if (hasIncompleteAttachmentUploads(attachments)) {\n      setAttachmentUploadsPendingError({\n        message: strings.attachmentUploadsPendingError,\n        timestamp: Date.now()\n      });\n      return;\n    }\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (sanitizeText(message).length > 0 || isAttachmentUploadCompleted(attachments)) {\n      onSendMessage && onSendMessage(message, {\n        attachments: toAttachmentMetadata(attachments),\n        type: 'text'\n      });\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    hasText: sanitizeText(textValue).length > 0,\n    hasAttachment: isAttachmentUploadCompleted(attachments),\n    hasErrorMessage: !!errorMessage,\n    customSendIconStyle: styles?.sendMessageIcon,\n    disabled: !!disabled\n  }), [theme, textValue, attachments, errorMessage, styles?.sendMessageIcon, disabled]);\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [attachments, disabled, errorMessage, textValue]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  React.useEffect(() => {\n    if (!attachments?.filter(upload => !upload.error).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [attachments]);\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentProgressError: attachments?.filter(attachmentUpload => attachmentUpload.error).pop()?.error\n    };\n  }, [attachments, attachmentUploadsPendingError]);\n  const onRenderAttachmentUploads = useCallback(() => {\n    if (!attachments?.filter(upload => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n          <_AttachmentUploadCards attachments={attachments} onCancelAttachmentUpload={props.onCancelAttachmentUpload} strings={{\n          removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n          uploading: props.strings?.uploading ?? localeStrings.uploading,\n          uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,\n          attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu\n        }} disabled={disabled} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {<SendBoxErrors attachmentProgressError={sendBoxErrorsProps.attachmentProgressError ? {\n      message: sendBoxErrorsProps.attachmentProgressError.message,\n      timestamp: Date.now()\n    } : undefined} attachmentUploadsPendingError={sendBoxErrorsProps.attachmentUploadsPendingError} />}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} mentionLookupOptions={mentionLookupOptions}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} ariaDisabled={isSendBoxButtonAriaDisabledValue} />\n        </InputBoxComponent>\n        {onRenderAttachmentUploads()}\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonAriaDisabled } from './utils/SendBoxUtils';\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (sanitizeText(message).length > 0) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    hasText: sanitizeText(textValue).length > 0,\n    hasErrorMessage: !!errorMessage,\n    customSendIconStyle: styles?.sendMessageIcon,\n    disabled: !!disabled\n  }), [theme, textValue, errorMessage, styles?.sendMessageIcon, disabled]);\n  const isSendBoxButtonAriaDisabledValue = useMemo(() => {\n    return isSendBoxButtonAriaDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [disabled, errorMessage, textValue]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} ariaDisabled={isSendBoxButtonAriaDisabledValue} />\n        </InputBoxComponent>\n        {}\n      </Stack>\n    </Stack>;\n};"]}

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

@@ -14,7 +14,6 @@ export const UnsupportedBrowser = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) });
 };
 const unsupportedBrowserStringsTrampoline = (locale) => {
-    return locale.strings.UnsupportedBrowser;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC;IACzC,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  return locale.strings.UnsupportedBrowser;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}
+{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}

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

@@ -15,7 +15,6 @@ export const UnsupportedBrowserVersion = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick });
 };
 const unsupportedBrowserVersionStringsTrampoline = (locale) => {
-    return locale.strings.UnsupportedBrowserVersion;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC;IAChD,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  return locale.strings.UnsupportedBrowserVersion;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};"]}
+{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};"]}

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

@@ -1,31 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
 import React from 'react';
-import { useTheme } from '../theming';
-import { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';
-const UnsupportedEnvironmentContainer = (props) => {
-    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
-    const theme = useTheme();
-    return React.createElement(Stack, { styles: containerStyles, tokens: {
-            childrenGap: '2rem'
-        } },
-        React.createElement(Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
-        React.createElement(Stack, { styles: testContainerStyles, tokens: {
-                childrenGap: '0.25rem'
-            } },
-            React.createElement(Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
-            React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
-        onTroubleshootingClick && React.createElement(Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText),
-        onContinueAnywayClick && React.createElement(DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText));
-};
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
  *
  * @private
  */
 export const UnsupportedEnvironment = (props) => {
-    return React.createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=UnsupportedEnvironment.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAoC/K,MAAM,+BAA+B,GAAG,CAAC,KAAkC,EAAe,EAAE;IAC1F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE;YAC7C,WAAW,EAAE,MAAM;SACpB;QACG,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,gBAAY,8BAA8B,GAAQ;QAChG,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE;gBAC5C,WAAW,EAAE,SAAS;aACvB;YACG,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ,CAC5D;QACP,sBAAsB,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,gBAAa,8BAA8B,IAC9H,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CACrB;QACR,qBAAqB,IAAI,oBAAC,aAAa,kBAAY,+BAA+B,EAAC,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,qBAAqB,IACxJ,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CACpB,CACZ,CAAC;AACb,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,oBAAC,+BAA+B,oBAAK,KAAK,EAAI,CAAC;IACtD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { useTheme } from '../theming';\nimport { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';\n\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueAnywayClick?: () => void;\n}\nconst UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const theme = useTheme();\n  return <Stack styles={containerStyles} tokens={{\n    childrenGap: '2rem'\n  }}>\n      <Icon iconName=\"UnsupportedEnvironmentWarning\" data-ui-id=\"unsupported-environment-icon\"></Icon>\n      <Stack styles={testContainerStyles} tokens={{\n      childrenGap: '0.25rem'\n    }}>\n        <Text styles={mainTextStyles}>{strings?.primaryText}</Text>\n        <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n      </Stack>\n      {onTroubleshootingClick && <Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id=\"unsupported-environment-link\">\n          {strings?.moreHelpLinkText}\n        </Link>}\n      {onContinueAnywayClick && <DefaultButton data-ui-id=\"allowUnsupportedBrowserButton\" styles={continueAnywayButtonStyles(theme)} onClick={onContinueAnywayClick}>\n          {strings?.continueAnywayButtonText}\n        </DefaultButton>}\n    </Stack>;\n};\n\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};"]}
+{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueAnywayClick?: () => void;\n}\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  return <></>;\n};"]}

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

@@ -14,7 +14,6 @@ export const UnsupportedOperatingSystem = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedOperatingSystemStringsTrampoline(locale)), strings) });
 };
 const unsupportedOperatingSystemStringsTrampoline = (locale) => {
-    return locale.strings.UnsupportedOperatingSystem;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,OAAO,MAAM,CAAC,OAAO,CAAC,0BAA0B,CAAC;IACjD,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * Props for {@link UnsupportedOperatingSystem} UI\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemProps {\n  /** Handler to perform a action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedOperatingSystemStrings;\n}\n\n/**\n * UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedOperatingSystemStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n  return locale.strings.UnsupportedOperatingSystem;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}
+{"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * Props for {@link UnsupportedOperatingSystem} UI\n *\n * @beta\n */\nexport interface UnsupportedOperatingSystemProps {\n  /** Handler to perform a action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedOperatingSystemStrings;\n}\n\n/**\n * UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedOperatingSystemStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js

@@ -18,7 +18,9 @@ export const _VideoEffectsItem = (props) => {
         height: '1.25rem'
     }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
     const textContainerStyles = mergeStyles({
-        height: '1.25rem'
+        height: '1.25rem',
+        width: '100%',
+        overflow: 'hidden'
     }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
     const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
         theme,
@@ -29,10 +31,18 @@ export const _VideoEffectsItem = (props) => {
     return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
             React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : (_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled },
-                React.createElement(Stack, { horizontalAlign: 'center' },
+                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
+                        width: '100%'
+                    }) },
                     props.iconProps && React.createElement(Stack.Item, { className: iconContainerStyles },
                         React.createElement(Icon, Object.assign({}, props.iconProps))),
                     props.title && React.createElement(Stack.Item, { className: textContainerStyles },
-                        React.createElement(Text, { variant: "small" }, props.title))))));
+                        React.createElement(Text, { variant: "small", styles: {
+                                root: {
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis'
+                                }
+                            } }, props.title))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,mCAAI,KAAK,CAAC,OAAO,mBAAiB,KAAK,CAAC,QAAQ;gBAChS,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ;oBAC7B,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const iconContainerStyles = mergeStyles({\n    height: '1.25rem'\n  }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles({\n    height: '1.25rem'\n  }, props.styles?.textContainer);\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? props.tooltipProps?.content as string ?? props.itemKey} aria-disabled={props.disabled}>\n          <Stack horizontalAlign={'center'}>\n            {props.iconProps && <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item className={textContainerStyles}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,QAAQ;KACnB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,mCAAI,KAAK,CAAC,OAAO,mBAAiB,KAAK,CAAC,QAAQ;gBAChS,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;wBACzD,KAAK,EAAE,MAAM;qBACd,CAAC;oBACG,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE;gCAChC,IAAI,EAAE;oCACJ,UAAU,EAAE,QAAQ;oCACpB,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,UAAU;iCACzB;6BACF,IACM,KAAK,CAAC,KAAK,CACP,CACI,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const iconContainerStyles = mergeStyles({\n    height: '1.25rem'\n  }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles({\n    height: '1.25rem',\n    width: '100%',\n    overflow: 'hidden'\n  }, props.styles?.textContainer);\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? props.tooltipProps?.content as string ?? props.itemKey} aria-disabled={props.disabled}>\n          <Stack horizontalAlign={'center'} className={mergeStyles({\n          width: '100%'\n        })}>\n            {props.iconProps && <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item className={textContainerStyles}>\n                <Text variant=\"small\" styles={{\n              root: {\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis'\n              }\n            }}>\n                  {props.title}\n                </Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js

@@ -37,7 +37,8 @@ export const videoEffectsItemContainerStyles = (args) => {
                 height: VideoEffectsItemContainerBorderHeight,
                 outlineOffset: '-1px',
                 outline: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-            }
+            },
+            padding: '0.5rem'
         }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAC7K,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAChM;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IButtonStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      }\n    }\n  };\n};"]}
+{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAC7K,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAChM;YACD,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IButtonStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      },\n      padding: '0.5rem'\n    }\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js

@@ -7,7 +7,7 @@ import { isNarrowWidth } from '../utils/responsive';
 import { isShortHeight } from '../utils/responsive';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { OverflowGallery } from './OverflowGallery';
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
@@ -35,11 +35,6 @@ export const DefaultLayout = (props) => {
         layout: 'default',
         spotlightedParticipantUserIds
     });
-    let activeVideoStreams = 0;
-    let gridTiles = gridParticipants.map(p => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -48,10 +43,7 @@ export const DefaultLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = useState([]);
-    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    let { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
     if (localVideoComponent) {
         if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {
             overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\n  });\n  let activeVideoStreams = 0;\n  let gridTiles = gridParticipants.map(p => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n  return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  let {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n  return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js

@@ -12,7 +12,7 @@ import { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideo
 import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
 import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { OverflowGallery } from './OverflowGallery';
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
@@ -39,15 +39,6 @@ export const FloatingLocalVideoLayout = (props) => {
         layout: 'floatingLocalVideo',
         spotlightedParticipantUserIds
     });
-    let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map(p => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const shouldFloatLocalVideo = remoteParticipants.length > 0;
-    if (!shouldFloatLocalVideo && localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -56,10 +47,11 @@ export const FloatingLocalVideoLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
         if (isNarrow || localVideoTileSize === '9:16') {

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    spotlightedParticipantUserIds\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    spotlightedParticipantUserIds\n  });\n  let activeVideoStreams = 0;\n  const gridTiles = gridParticipants.map(p => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? p.videoStream?.isAvailable && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : p.videoStream?.isAvailable);\n  });\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);\n  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?\n  // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n  showCameraSwitcherInLocalPreview ? <Stack className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n    boxShadow: theme.effects.elevation8,\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX\n  })}>\n          {localVideoComponent}\n        </Stack> : overflowGalleryTiles.length > 0 || screenShareComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition))}>\n          {localVideoComponent}\n        </Stack> : <FloatingLocalVideo localVideoComponent={localVideoComponent} layerHostId={layerHostId} localVideoSizeRem={localVideoSizeRem} parentWidth={parentWidth} parentHeight={parentHeight} /> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={!!localVideoComponent} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth, localVideoComponent]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    spotlightedParticipantUserIds\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    spotlightedParticipantUserIds\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);\n  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo || screenShareComponent && localVideoComponent ?\n  // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n  showCameraSwitcherInLocalPreview ? <Stack className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n    boxShadow: theme.effects.elevation8,\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX\n  })}>\n          {localVideoComponent}\n        </Stack> : overflowGalleryTiles.length > 0 || screenShareComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition))}>\n          {localVideoComponent}\n        </Stack> : <FloatingLocalVideo localVideoComponent={localVideoComponent} layerHostId={layerHostId} localVideoSizeRem={localVideoSizeRem} parentWidth={parentWidth} parentHeight={parentHeight} /> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={!!localVideoComponent} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth, localVideoComponent]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.js

@@ -7,7 +7,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { OverflowGallery } from './OverflowGallery';
 import { SMALL_FLOATING_MODAL_SIZE_REM, LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle } from './styles/FloatingLocalVideo.styles';
 import { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
-import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { GridLayout } from '../GridLayout';
 import { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
@@ -35,15 +35,6 @@ export const SpeakerVideoLayout = (props) => {
         pinnedParticipantUserIds,
         layout: 'speaker'
     });
-    let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map(p => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const shouldFloatLocalVideo = remoteParticipants.length > 0;
-    if (!shouldFloatLocalVideo && localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -52,10 +43,11 @@ export const SpeakerVideoLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
         if (isNarrow || localVideoTileSize === '9:16') {