@azure/communication-react 1.22.0-beta.1 → 1.23.0-alpha-202412190017

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

@@ -1 +1 @@
-{"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport { DismissedError, dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/**\n * Strings for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarStrings {\n  devicePermissionLinkText?: string;\n  networkTroubleshootingLinkText?: string;\n  dismissButtonText?: string;\n}\n\n/**\n * Props for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n  /**\n   * permissions state for camera/microphone\n   */\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleshootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleshootingClick?: () => void;\n  /**\n   * strings related to trouble shooting guidance link and dismiss button\n   */\n  troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/**\n * @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n  const theme = useTheme();\n  // error bar strings\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n  const {\n    onPermissionsTroubleshootingClick,\n    onNetworkingTroubleshootingClick,\n    permissionsState = {\n      camera: 'denied',\n      microphone: 'denied'\n    },\n    troubleshootingGuideStrings\n  } = props;\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);\n  const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n  return <Stack data-ui-id=\"notifications-stack\">\n      {toShow.map((error, i) => {\n      const devicePermissionErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onPermissionsTroubleshootingClick && <Link onClick={() => {\n          onPermissionsTroubleshootingClick(permissionsState);\n        }}>\n                <span className={messageBarLinkStyles(theme, true)}>\n                  {troubleshootingGuideStrings.devicePermissionLinkText}\n                </span>\n              </Link>}\n          </div>;\n      const networkErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\n                <span className={messageBarLinkStyles(theme, true)}>\n                  {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n                </span>\n              </Link>}\n          </div>;\n      return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={`${error.type} ${i}`} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n        setDismissedErrors(dismissError(dismissedErrors, error));\n      }} ariaLabel={troubleshootingGuideStrings.dismissButtonText} />} isMultiline={false} aria-role=\"alert\" aria-live=\"assertive\">\n            {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n          </MessageBar>;\n    })}\n    </Stack>;\n};\nconst showErrorBar = (errorType: string, devicePermissionErrorBar: JSX.Element, networkErrorBar: JSX.Element): JSX.Element => {\n  if (errorType === 'callNetworkQualityLow') {\n    return networkErrorBar;\n  } else {\n    return devicePermissionErrorBar;\n  }\n};"]}
+{"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/**\n * Strings for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarStrings {\n  devicePermissionLinkText?: string;\n  networkTroubleshootingLinkText?: string;\n  dismissButtonText?: string;\n}\n\n/**\n * Props for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n  /**\n   * permissions state for camera/microphone\n   */\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleshootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleshootingClick?: () => void;\n  /**\n   * strings related to trouble shooting guidance link and dismiss button\n   */\n  troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/**\n * @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n  const theme = useTheme();\n  // error bar strings\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  const {\n    onPermissionsTroubleshootingClick,\n    onNetworkingTroubleshootingClick,\n    permissionsState = {\n      camera: 'denied',\n      microphone: 'denied'\n    },\n    troubleshootingGuideStrings\n  } = props;\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(\n    () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n    [props.activeErrorMessages, dismissedErrors]\n  );\n\n  const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n  return (\n    <Stack data-ui-id=\"notifications-stack\">\n      {toShow.map((error, i) => {\n        const devicePermissionErrorBar = (\n          <div>\n            {strings[error.type]}{' '}\n            {onPermissionsTroubleshootingClick && (\n              <Link\n                onClick={() => {\n                  onPermissionsTroubleshootingClick(permissionsState);\n                }}\n              >\n                <span className={messageBarLinkStyles(theme, true)}>\n                  {troubleshootingGuideStrings.devicePermissionLinkText}\n                </span>\n              </Link>\n            )}\n          </div>\n        );\n\n        const networkErrorBar = (\n          <div>\n            {strings[error.type]}{' '}\n            {onNetworkingTroubleshootingClick && (\n              <Link onClick={onNetworkingTroubleshootingClick} underline>\n                <span className={messageBarLinkStyles(theme, true)}>\n                  {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n                </span>\n              </Link>\n            )}\n          </div>\n        );\n\n        return (\n          <MessageBar\n            {...props}\n            styles={messageBarStyle(theme, messageBarType(error.type))}\n            key={`${error.type} ${i}`}\n            messageBarType={messageBarType(error.type)}\n            messageBarIconProps={messageBarIconProps(error.type)}\n            actions={\n              <MessageBarButton\n                text={troubleshootingGuideStrings.dismissButtonText}\n                styles={dismissButtonStyle(theme)}\n                onClick={() => {\n                  setDismissedErrors(dismissError(dismissedErrors, error));\n                }}\n                ariaLabel={troubleshootingGuideStrings.dismissButtonText}\n              />\n            }\n            isMultiline={false}\n            aria-role=\"alert\"\n            aria-live=\"assertive\"\n          >\n            {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n          </MessageBar>\n        );\n      })}\n    </Stack>\n  );\n};\n\nconst showErrorBar = (\n  errorType: string,\n  devicePermissionErrorBar: JSX.Element,\n  networkErrorBar: JSX.Element\n): JSX.Element => {\n  if (errorType === 'callNetworkQualityLow') {\n    return networkErrorBar;\n  } else {\n    return devicePermissionErrorBar;\n  }\n};\n"]}

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

@@ -21,7 +21,7 @@ const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameSt
         if (truncatedDisplayName && truncatedDisplayName.length > 50) {
             truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';
         }
-        userElements.push(onRenderUser ? onRenderUser(user) : React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName));
+        userElements.push(onRenderUser ? (onRenderUser(user)) : (React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName)));
         userElements.push(React.createElement(Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma
@@ -36,7 +36,7 @@ const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameSt
  */
 const getNamesString = (typingUsers, delimiter) => {
     const userNames = [];
-    typingUsers.forEach(user => {
+    typingUsers.forEach((user) => {
         if (user.displayName) {
             userNames.push(user.displayName);
         }
@@ -100,7 +100,9 @@ const getIndicatorString = (strings, namesString, numTypingUsers, numTypingUsers
         return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);
     }
     if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {
-        return strings.multipleUsersAbbreviateMany.replace('{users}', namesString).replace('{numOthers}', `${numTypingUsersAbbreviated}`);
+        return strings.multipleUsersAbbreviateMany
+            .replace('{users}', namesString)
+            .replace('{numOthers}', `${numTypingUsersAbbreviated}`);
     }
     return undefined;
 };
@@ -117,7 +119,8 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
         if (typingUsersMentioned.length > 0) {
             additionalCharCount += strings.delimiter.length;
         }
-        if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS || typingUsersMentioned.length === 0) {
+        if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS ||
+            typingUsersMentioned.length === 0) {
             typingUsersMentioned.push(typingUser);
             totalCharacterCount += additionalCharCount;
         }
@@ -129,7 +132,7 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
     const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;
     const spanElements = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);
     const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsers.length, numUserNotMentioned);
-    return React.createElement("div", { "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey", role: "status", "aria-label": labelString }, spanElements);
+    return (React.createElement("div", { "data-ui-id": ids.typingIndicator, className: mergeStyles(typingIndicatorStringStyle, styles === null || styles === void 0 ? void 0 : styles.typingString), key: "typingStringKey", role: "status", "aria-label": labelString }, spanElements));
 };
 /**
  * Component to notify local user when one or more participants in the chat thread are typing.
@@ -139,7 +142,7 @@ const IndicatorComponent = (typingUsers, strings, onRenderUser, styles) => {
 export const TypingIndicator = (props) => {
     const { typingUsers, onRenderUser, styles } = props;
     const { strings } = useLocale();
-    const typingUsersToRender = typingUsers.filter(typingUser => typingUser.displayName !== undefined);
+    const typingUsersToRender = typingUsers.filter((typingUser) => typingUser.displayName !== undefined);
     const indicatorComponent = IndicatorComponent(typingUsersToRender, Object.assign(Object.assign({}, strings.typingIndicator), props.strings), onRenderUser, styles);
     return React.createElement(Stack, { className: mergeStyles(typingIndicatorContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, indicatorComponent);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { typingIndicatorContainerStyle, typingIndicatorStringStyle } from './styles/TypingIndicator.styles';\nimport React from 'react';\nimport { BaseCustomStyles, CommunicationParticipant } from '../types';\nimport { IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../localization/LocalizationProvider';\nimport { useIdentifiers } from '../identifiers';\nimport { _IObjectMap } from '@internal/acs-ui-common';\n\n/**\n * Fluent styles for {@link TypingIndicator}.\n *\n * @public\n */\nexport interface TypingIndicatorStylesProps extends BaseCustomStyles {\n  /** Styles for each typing user's displayName. */\n  typingUserDisplayName?: IStyle;\n  /** Styles for the typing string. */\n  typingString?: IStyle;\n}\n\n/**\n * Strings of {@link TypingIndicator} that can be overridden.\n *\n * @public\n */\nexport interface TypingIndicatorStrings {\n  /**\n   * String template to use when one user is typing. Placeholders: [user].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}\n   *  typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}\n   * />\n   * ```\n   * would be 'Claire is typing...'\n   **/\n  singleUser: string;\n  /**\n   * String template to use when multiple users are typing. Placeholders: [users].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsers: '{users} are typing...' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire' },\n   *    { userId: 'user2', displayName: 'Christopher' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire, Chris are typing...'\n   **/\n  multipleUsers: string;\n  /**\n   * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].\n   * @example\n   * ```typescript\n   * <TypingIndicator\n   * strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}\n   * typingUsers={[\n   * { userId: 'user1', displayName: 'Claire Romanov' },\n   * { userId: 'user2', displayName: 'Christopher Rutherford' }\n   * ]}\n   * />\n   * ```\n   * would be 'Claire Romanov and 1 other are typing...'\n   **/\n  multipleUsersAbbreviateOne: string;\n  /**\n   * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire Romanov' },\n   *    { userId: 'user2', displayName: 'Christopher Rutherford' },\n   *    { userId: 'user3', displayName: 'Jill Vernblom' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire Romanov and 2 others are typing...'\n   **/\n  multipleUsersAbbreviateMany: string;\n  /**\n   * String to use as delimiter to separate multiple users.\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ delimiter: ' + ' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire' },\n   *    { userId: 'user2', displayName: 'Chris' },\n   *    { userId: 'user3', displayName: 'Jill' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire + Chris + Jill are typing...'\n   **/\n  delimiter: string;\n}\n\n/**\n * Props for {@link TypingIndicator}.\n *\n * @public\n */\nexport interface TypingIndicatorProps {\n  /** List of the typing users. */\n  typingUsers: CommunicationParticipant[];\n  /** Callback to render typing users */\n  onRenderUser?: (users: CommunicationParticipant) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <TypingIndicator styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: TypingIndicatorStylesProps;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<TypingIndicatorStrings>;\n}\nconst MAXIMUM_LENGTH_OF_TYPING_USERS = 35;\n\n/**\n * Helper function to create element wrapping all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @param onRenderUser optional callback to render each typing user\n * @param userDisplayNameStyles optional additional IStyle to apply to each element containing users name\n * @returns element wrapping all typing users\n */\nconst getUsersElement = (typingUsers: CommunicationParticipant[], delimiter: string, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, userDisplayNameStyles?: IStyle): JSX.Element => {\n  const userElements: JSX.Element[] = [];\n  typingUsers.forEach((user, index) => {\n    let truncatedDisplayName = user.displayName;\n    if (truncatedDisplayName && truncatedDisplayName.length > 50) {\n      truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';\n    }\n    userElements.push(onRenderUser ? onRenderUser(user) : <Text className={mergeStyles(userDisplayNameStyles)} key={`user-${index}`}>\n          {truncatedDisplayName}\n        </Text>);\n    userElements.push(<Text key={`comma-${index}`}>{`${delimiter}`}</Text>);\n  });\n  // pop last comma\n  userElements.pop();\n  return <>{userElements}</>;\n};\n\n/**\n * Helper function to get a string of all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @returns string of all typing users\n */\nconst getNamesString = (typingUsers: CommunicationParticipant[], delimiter: string): string => {\n  const userNames: string[] = [];\n  typingUsers.forEach(user => {\n    if (user.displayName) {\n      userNames.push(user.displayName);\n    }\n  });\n  return userNames.join(delimiter);\n};\n\n/**\n * Helper function to create span elements making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param usersElement JSX.Element containing all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns array of span elements making up the typing indicator string\n */\nconst getSpanElements = (strings: TypingIndicatorStrings, usersElement: JSX.Element, numTypingUsers: number, numTypingUsersAbbreviated: number): JSX.Element[] => {\n  let variables: Record<string, JSX.Element> = {};\n  let typingString = '';\n  if (numTypingUsers === 1) {\n    typingString = strings.singleUser;\n    variables = {\n      user: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n    typingString = strings.multipleUsers;\n    variables = {\n      users: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n    typingString = strings.multipleUsersAbbreviateOne;\n    variables = {\n      users: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n    typingString = strings.multipleUsersAbbreviateMany;\n    variables = {\n      users: usersElement,\n      numOthers: <>{numTypingUsersAbbreviated}</>\n    };\n  }\n  return formatInlineElements(typingString, variables);\n};\n\n/**\n * Helper function to get the string making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param namesString string of all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns typing indicator string\n */\nconst getIndicatorString = (strings: TypingIndicatorStrings, namesString: string, numTypingUsers: number, numTypingUsersAbbreviated: number): string | undefined => {\n  if (numTypingUsers === 1) {\n    return strings.singleUser.replace('{user}', namesString);\n  }\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n    return strings.multipleUsers.replace('{users}', namesString);\n  }\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n    return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);\n  }\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n    return strings.multipleUsersAbbreviateMany.replace('{users}', namesString).replace('{numOthers}', `${numTypingUsersAbbreviated}`);\n  }\n  return undefined;\n};\nconst IndicatorComponent = (typingUsers: CommunicationParticipant[], strings: TypingIndicatorStrings, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, styles?: TypingIndicatorStylesProps): JSX.Element => {\n  const typingUsersMentioned: CommunicationParticipant[] = [];\n  let totalCharacterCount = 0;\n  const ids = useIdentifiers();\n  for (const typingUser of typingUsers) {\n    if (!typingUser.displayName) {\n      continue;\n    }\n    let additionalCharCount = typingUser.displayName.length;\n    // The typing users will be separated by the delimiter. We account for that additional length when we generate the final string.\n    if (typingUsersMentioned.length > 0) {\n      additionalCharCount += strings.delimiter.length;\n    }\n    if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS || typingUsersMentioned.length === 0) {\n      typingUsersMentioned.push(typingUser);\n      totalCharacterCount += additionalCharCount;\n    } else {\n      break;\n    }\n  }\n  const usersElement: JSX.Element = getUsersElement(typingUsersMentioned, strings.delimiter, onRenderUser, styles?.typingUserDisplayName);\n  const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;\n  const spanElements: JSX.Element[] = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);\n  const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsers.length, numUserNotMentioned);\n  return <div data-ui-id={ids.typingIndicator} className={mergeStyles(typingIndicatorStringStyle, styles?.typingString)} key=\"typingStringKey\" role=\"status\" aria-label={labelString}>\n      {spanElements}\n    </div>;\n};\n\n/**\n * Component to notify local user when one or more participants in the chat thread are typing.\n *\n * @public\n */\nexport const TypingIndicator = (props: TypingIndicatorProps): JSX.Element => {\n  const {\n    typingUsers,\n    onRenderUser,\n    styles\n  } = props;\n  const {\n    strings\n  } = useLocale();\n  const typingUsersToRender = typingUsers.filter(typingUser => typingUser.displayName !== undefined);\n  const indicatorComponent = IndicatorComponent(typingUsersToRender, {\n    ...strings.typingIndicator,\n    ...props.strings\n  }, onRenderUser, styles);\n  return <Stack className={mergeStyles(typingIndicatorContainerStyle, styles?.root)}>{indicatorComponent}</Stack>;\n};\n\n/**\n * Create an array of span elements by replacing the pattern \"\\{\\}\" in str with the elements\n * passed in as vars and creating inline elements from the rest\n *\n * @param str - The string to be formatted\n * @param vars - Variables to use to format the string\n * @returns formatted JSX elements\n */\nconst formatInlineElements = (str: string, vars: _IObjectMap<JSX.Element>): JSX.Element[] => {\n  if (!str) {\n    return [];\n  }\n  if (!vars) {\n    return [];\n  }\n  const elements: JSX.Element[] = [];\n\n  // regex to search for the pattern \"{}\"\n  const placeholdersRegex = /{(\\w+)}/g;\n  const regex = RegExp(placeholdersRegex);\n  let array: RegExpExecArray | null = regex.exec(str);\n  let prev = 0;\n  while (array !== null) {\n    if (prev !== array.index) {\n      elements.push(<Text key={elements.length}>{str.substring(prev, array.index)}</Text>);\n    }\n    elements.push(<Text key={elements.length}>{vars[array[0].substring(1, array[0].length - 1)]}</Text>);\n    prev = regex.lastIndex;\n    array = regex.exec(str);\n  }\n  elements.push(<Text key={elements.length}>{str.substring(prev)}</Text>);\n  return elements;\n};"]}
+{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { typingIndicatorContainerStyle, typingIndicatorStringStyle } from './styles/TypingIndicator.styles';\n\nimport React from 'react';\nimport { BaseCustomStyles, CommunicationParticipant } from '../types';\nimport { IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../localization/LocalizationProvider';\nimport { useIdentifiers } from '../identifiers';\nimport { _IObjectMap } from '@internal/acs-ui-common';\n\n/**\n * Fluent styles for {@link TypingIndicator}.\n *\n * @public\n */\nexport interface TypingIndicatorStylesProps extends BaseCustomStyles {\n  /** Styles for each typing user's displayName. */\n  typingUserDisplayName?: IStyle;\n  /** Styles for the typing string. */\n  typingString?: IStyle;\n}\n\n/**\n * Strings of {@link TypingIndicator} that can be overridden.\n *\n * @public\n */\nexport interface TypingIndicatorStrings {\n  /**\n   * String template to use when one user is typing. Placeholders: [user].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}\n   *  typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}\n   * />\n   * ```\n   * would be 'Claire is typing...'\n   **/\n  singleUser: string;\n  /**\n   * String template to use when multiple users are typing. Placeholders: [users].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsers: '{users} are typing...' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire' },\n   *    { userId: 'user2', displayName: 'Christopher' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire, Chris are typing...'\n   **/\n  multipleUsers: string;\n  /**\n   * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].\n   * @example\n   * ```typescript\n   * <TypingIndicator\n   * strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}\n   * typingUsers={[\n   * { userId: 'user1', displayName: 'Claire Romanov' },\n   * { userId: 'user2', displayName: 'Christopher Rutherford' }\n   * ]}\n   * />\n   * ```\n   * would be 'Claire Romanov and 1 other are typing...'\n   **/\n  multipleUsersAbbreviateOne: string;\n  /**\n   * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire Romanov' },\n   *    { userId: 'user2', displayName: 'Christopher Rutherford' },\n   *    { userId: 'user3', displayName: 'Jill Vernblom' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire Romanov and 2 others are typing...'\n   **/\n  multipleUsersAbbreviateMany: string;\n  /**\n   * String to use as delimiter to separate multiple users.\n   * @example\n   * ```\n   * <TypingIndicator\n   *  strings={{ delimiter: ' + ' }}\n   *  typingUsers={[\n   *    { userId: 'user1', displayName: 'Claire' },\n   *    { userId: 'user2', displayName: 'Chris' },\n   *    { userId: 'user3', displayName: 'Jill' }\n   *  ]}\n   * />\n   * ```\n   * would be 'Claire + Chris + Jill are typing...'\n   **/\n  delimiter: string;\n}\n\n/**\n * Props for {@link TypingIndicator}.\n *\n * @public\n */\nexport interface TypingIndicatorProps {\n  /** List of the typing users. */\n  typingUsers: CommunicationParticipant[];\n  /** Callback to render typing users */\n  onRenderUser?: (users: CommunicationParticipant) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <TypingIndicator styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: TypingIndicatorStylesProps;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<TypingIndicatorStrings>;\n}\n\nconst MAXIMUM_LENGTH_OF_TYPING_USERS = 35;\n\n/**\n * Helper function to create element wrapping all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @param onRenderUser optional callback to render each typing user\n * @param userDisplayNameStyles optional additional IStyle to apply to each element containing users name\n * @returns element wrapping all typing users\n */\nconst getUsersElement = (\n  typingUsers: CommunicationParticipant[],\n  delimiter: string,\n  onRenderUser?: (users: CommunicationParticipant) => JSX.Element,\n  userDisplayNameStyles?: IStyle\n): JSX.Element => {\n  const userElements: JSX.Element[] = [];\n  typingUsers.forEach((user, index) => {\n    let truncatedDisplayName = user.displayName;\n    if (truncatedDisplayName && truncatedDisplayName.length > 50) {\n      truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';\n    }\n    userElements.push(\n      onRenderUser ? (\n        onRenderUser(user)\n      ) : (\n        <Text className={mergeStyles(userDisplayNameStyles)} key={`user-${index}`}>\n          {truncatedDisplayName}\n        </Text>\n      )\n    );\n    userElements.push(<Text key={`comma-${index}`}>{`${delimiter}`}</Text>);\n  });\n  // pop last comma\n  userElements.pop();\n  return <>{userElements}</>;\n};\n\n/**\n * Helper function to get a string of all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @returns string of all typing users\n */\nconst getNamesString = (typingUsers: CommunicationParticipant[], delimiter: string): string => {\n  const userNames: string[] = [];\n\n  typingUsers.forEach((user) => {\n    if (user.displayName) {\n      userNames.push(user.displayName);\n    }\n  });\n  return userNames.join(delimiter);\n};\n\n/**\n * Helper function to create span elements making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param usersElement JSX.Element containing all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns array of span elements making up the typing indicator string\n */\nconst getSpanElements = (\n  strings: TypingIndicatorStrings,\n  usersElement: JSX.Element,\n  numTypingUsers: number,\n  numTypingUsersAbbreviated: number\n): JSX.Element[] => {\n  let variables: Record<string, JSX.Element> = {};\n  let typingString = '';\n  if (numTypingUsers === 1) {\n    typingString = strings.singleUser;\n    variables = {\n      user: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n    typingString = strings.multipleUsers;\n    variables = {\n      users: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n    typingString = strings.multipleUsersAbbreviateOne;\n    variables = {\n      users: usersElement\n    };\n  } else if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n    typingString = strings.multipleUsersAbbreviateMany;\n    variables = {\n      users: usersElement,\n      numOthers: <>{numTypingUsersAbbreviated}</>\n    };\n  }\n\n  return formatInlineElements(typingString, variables);\n};\n\n/**\n * Helper function to get the string making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param namesString string of all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns typing indicator string\n */\nconst getIndicatorString = (\n  strings: TypingIndicatorStrings,\n  namesString: string,\n  numTypingUsers: number,\n  numTypingUsersAbbreviated: number\n): string | undefined => {\n  if (numTypingUsers === 1) {\n    return strings.singleUser.replace('{user}', namesString);\n  }\n\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n    return strings.multipleUsers.replace('{users}', namesString);\n  }\n\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n    return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);\n  }\n\n  if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n    return strings.multipleUsersAbbreviateMany\n      .replace('{users}', namesString)\n      .replace('{numOthers}', `${numTypingUsersAbbreviated}`);\n  }\n\n  return undefined;\n};\n\nconst IndicatorComponent = (\n  typingUsers: CommunicationParticipant[],\n  strings: TypingIndicatorStrings,\n  onRenderUser?: (users: CommunicationParticipant) => JSX.Element,\n  styles?: TypingIndicatorStylesProps\n): JSX.Element => {\n  const typingUsersMentioned: CommunicationParticipant[] = [];\n  let totalCharacterCount = 0;\n  const ids = useIdentifiers();\n\n  for (const typingUser of typingUsers) {\n    if (!typingUser.displayName) {\n      continue;\n    }\n\n    let additionalCharCount = typingUser.displayName.length;\n    // The typing users will be separated by the delimiter. We account for that additional length when we generate the final string.\n    if (typingUsersMentioned.length > 0) {\n      additionalCharCount += strings.delimiter.length;\n    }\n\n    if (\n      totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS ||\n      typingUsersMentioned.length === 0\n    ) {\n      typingUsersMentioned.push(typingUser);\n      totalCharacterCount += additionalCharCount;\n    } else {\n      break;\n    }\n  }\n\n  const usersElement: JSX.Element = getUsersElement(\n    typingUsersMentioned,\n    strings.delimiter,\n    onRenderUser,\n    styles?.typingUserDisplayName\n  );\n\n  const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;\n  const spanElements: JSX.Element[] = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);\n\n  const labelString = getIndicatorString(\n    strings,\n    getNamesString(typingUsersMentioned, strings.delimiter),\n    typingUsers.length,\n    numUserNotMentioned\n  );\n\n  return (\n    <div\n      data-ui-id={ids.typingIndicator}\n      className={mergeStyles(typingIndicatorStringStyle, styles?.typingString)}\n      key=\"typingStringKey\"\n      role=\"status\"\n      aria-label={labelString}\n    >\n      {spanElements}\n    </div>\n  );\n};\n\n/**\n * Component to notify local user when one or more participants in the chat thread are typing.\n *\n * @public\n */\nexport const TypingIndicator = (props: TypingIndicatorProps): JSX.Element => {\n  const { typingUsers, onRenderUser, styles } = props;\n  const { strings } = useLocale();\n\n  const typingUsersToRender = typingUsers.filter((typingUser) => typingUser.displayName !== undefined);\n\n  const indicatorComponent = IndicatorComponent(\n    typingUsersToRender,\n    { ...strings.typingIndicator, ...props.strings },\n    onRenderUser,\n    styles\n  );\n\n  return <Stack className={mergeStyles(typingIndicatorContainerStyle, styles?.root)}>{indicatorComponent}</Stack>;\n};\n\n/**\n * Create an array of span elements by replacing the pattern \"\\{\\}\" in str with the elements\n * passed in as vars and creating inline elements from the rest\n *\n * @param str - The string to be formatted\n * @param vars - Variables to use to format the string\n * @returns formatted JSX elements\n */\nconst formatInlineElements = (str: string, vars: _IObjectMap<JSX.Element>): JSX.Element[] => {\n  if (!str) {\n    return [];\n  }\n  if (!vars) {\n    return [];\n  }\n\n  const elements: JSX.Element[] = [];\n\n  // regex to search for the pattern \"{}\"\n  const placeholdersRegex = /{(\\w+)}/g;\n  const regex = RegExp(placeholdersRegex);\n  let array: RegExpExecArray | null = regex.exec(str);\n  let prev = 0;\n  while (array !== null) {\n    if (prev !== array.index) {\n      elements.push(<Text key={elements.length}>{str.substring(prev, array.index)}</Text>);\n    }\n    elements.push(<Text key={elements.length}>{vars[array[0].substring(1, array[0].length - 1)]}</Text>);\n    prev = regex.lastIndex;\n    array = regex.exec(str);\n  }\n  elements.push(<Text key={elements.length}>{str.substring(prev)}</Text>);\n  return elements;\n};\n"]}

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

@@ -11,9 +11,10 @@ import { UnsupportedEnvironment } from './UnsupportedEnvironment';
 export const UnsupportedBrowser = (props) => {
     const { onTroubleshootingClick, strings } = props;
     const locale = useLocale();
-    return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) });
+    return (React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) }));
 };
 const unsupportedBrowserStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
     return locale.strings.UnsupportedBrowser;
     return {
         primaryText: '',

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":["../../../../../../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,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,CACL,oBAAC,sBAAsB,IACrB,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,kCAAO,mCAAmC,CAAC,MAAM,CAAC,GAAK,OAAO,IACrE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,sDAAsD;IACtD,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 { onTroubleshootingClick, strings } = props;\n  const locale = useLocale();\n  return (\n    <UnsupportedEnvironment\n      onTroubleshootingClick={onTroubleshootingClick}\n      strings={{ ...unsupportedBrowserStringsTrampoline(locale), ...strings }}\n    />\n  );\n};\n\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedBrowser;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\n"]}

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

@@ -12,9 +12,10 @@ import { UnsupportedEnvironment } from './UnsupportedEnvironment';
 export const UnsupportedBrowserVersion = (props) => {
     const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
     const locale = useLocale();
-    return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick });
+    return (React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick }));
 };
 const unsupportedBrowserVersionStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
     return locale.strings.UnsupportedBrowserVersion;
     return {
         primaryText: '',

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":["../../../../../../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,EAAE,sBAAsB,EAAE,OAAO,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,CACL,oBAAC,sBAAsB,IACrB,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,kCAAO,0CAA0C,CAAC,MAAM,CAAC,GAAK,OAAO,GAC5E,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,sDAAsD;IACtD,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 { onTroubleshootingClick, strings, onContinueAnywayClick } = props;\n  const locale = useLocale();\n  return (\n    <UnsupportedEnvironment\n      onTroubleshootingClick={onTroubleshootingClick}\n      strings={{ ...unsupportedBrowserVersionStringsTrampoline(locale), ...strings }}\n      onContinueAnywayClick={onContinueAnywayClick}\n    />\n  );\n};\n\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedBrowserVersion;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};\n"]}

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

@@ -1,23 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(unsupported-browser) */
 import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
 import React from 'react';
+/* @conditional-compile-remove(unsupported-browser) */
 import { useTheme } from '../theming';
+/* @conditional-compile-remove(unsupported-browser) */
 import { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';
+/* @conditional-compile-remove(unsupported-browser) */
 const UnsupportedEnvironmentContainer = (props) => {
     const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
     const theme = useTheme();
-    return React.createElement(Stack, { styles: containerStyles, tokens: {
-            childrenGap: '2rem'
-        } },
+    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(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));
+        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.
@@ -25,6 +25,7 @@ const UnsupportedEnvironmentContainer = (props) => {
  * @private
  */
 export const UnsupportedEnvironment = (props) => {
+    /* @conditional-compile-remove(unsupported-browser) */
     return React.createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
     return React.createElement(React.Fragment, null);
 };

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":["../../../../../../react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sDAAsD;AACtD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sDAAsD;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,sDAAsD;AACtD,OAAO,EACL,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wCAAwC,CAAC;AAqChD,sDAAsD;AACtD,MAAM,+BAA+B,GAAG,CAAC,KAAkC,EAAe,EAAE;IAC1F,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;QAC7D,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,gBAAY,8BAA8B,GAAQ;QAChG,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;YACpE,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,CACzB,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,gBAAa,8BAA8B,IACrG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CACrB,CACR;QACA,qBAAqB,IAAI,CACxB,oBAAC,aAAa,kBACD,+BAA+B,EAC1C,MAAM,EAAE,0BAA0B,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,qBAAqB,IAE7B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CACpB,CACjB,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,sDAAsD;IACtD,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.\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(unsupported-browser) */\nimport {\n  containerStyles,\n  continueAnywayButtonStyles,\n  linkTextStyles,\n  mainTextStyles,\n  secondaryTextStyles,\n  testContainerStyles\n} 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}\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;\n  const theme = useTheme();\n  return (\n    <Stack styles={containerStyles} tokens={{ childrenGap: '2rem' }}>\n      <Icon iconName=\"UnsupportedEnvironmentWarning\" data-ui-id=\"unsupported-environment-icon\"></Icon>\n      <Stack styles={testContainerStyles} tokens={{ childrenGap: '0.25rem' }}>\n        <Text styles={mainTextStyles}>{strings?.primaryText}</Text>\n        <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n      </Stack>\n      {onTroubleshootingClick && (\n        <Link styles={linkTextStyles} onClick={onTroubleshootingClick} data-ui-id=\"unsupported-environment-link\">\n          {strings?.moreHelpLinkText}\n        </Link>\n      )}\n      {onContinueAnywayClick && (\n        <DefaultButton\n          data-ui-id=\"allowUnsupportedBrowserButton\"\n          styles={continueAnywayButtonStyles(theme)}\n          onClick={onContinueAnywayClick}\n        >\n          {strings?.continueAnywayButtonText}\n        </DefaultButton>\n      )}\n    </Stack>\n  );\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  /* @conditional-compile-remove(unsupported-browser) */\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};\n"]}

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

@@ -11,9 +11,10 @@ import { UnsupportedEnvironment } from './UnsupportedEnvironment';
 export const UnsupportedOperatingSystem = (props) => {
     const { onTroubleshootingClick, strings } = props;
     const locale = useLocale();
-    return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedOperatingSystemStringsTrampoline(locale)), strings) });
+    return (React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedOperatingSystemStringsTrampoline(locale)), strings) }));
 };
 const unsupportedOperatingSystemStringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(unsupported-browser) */
     return locale.strings.UnsupportedOperatingSystem;
     return {
         primaryText: '',

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":["../../../../../../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,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,CACL,oBAAC,sBAAsB,IACrB,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,kCAAO,2CAA2C,CAAC,MAAM,CAAC,GAAK,OAAO,IAC7E,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,sDAAsD;IACtD,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 { onTroubleshootingClick, strings } = props;\n  const locale = useLocale();\n  return (\n    <UnsupportedEnvironment\n      onTroubleshootingClick={onTroubleshootingClick}\n      strings={{ ...unsupportedOperatingSystemStringsTrampoline(locale), ...strings }}\n    />\n  );\n};\n\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return locale.strings.UnsupportedOperatingSystem;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};\n"]}

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

@@ -17,10 +17,7 @@ import { _formatString } from "../../../acs-ui-common/src";
 export const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
     const [page, setPage] = useState(1);
-    const [buttonState, setButtonState] = useState({
-        previous: true,
-        next: true
-    });
+    const [buttonState, setButtonState] = useState({ previous: true, next: true });
     const ids = useIdentifiers();
     const numberOfChildren = React.Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
@@ -38,7 +35,7 @@ export const VerticalGallery = (props) => {
     const childrenOnCurrentPage = useMemo(() => {
         var _a;
         if (indexesArray[0] !== undefined) {
-            return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map(index => {
+            return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map((index) => {
                 return React.Children.toArray(children)[index];
             });
         }
@@ -57,44 +54,31 @@ export const VerticalGallery = (props) => {
     useEffect(() => {
         if (page > 1 && page < lastPage && showButtons) {
             // we are somewhere in between first and last pages.
-            setButtonState({
-                previous: false,
-                next: false
-            });
+            setButtonState({ previous: false, next: false });
         }
         else if (page === 1 && showButtons) {
             // we are on the first page.
-            setButtonState({
-                previous: true,
-                next: false
-            });
+            setButtonState({ previous: true, next: false });
         }
         else if (page === lastPage && showButtons) {
             // we are on the last page.
-            setButtonState({
-                previous: false,
-                next: true
-            });
+            setButtonState({ previous: false, next: true });
         }
     }, [page, numberOfChildren, lastPage, showButtons]);
     const childContainerStyle = useMemo(() => {
-        return {
-            root: childrenContainerStyle(2)
-        };
+        return { root: childrenContainerStyle(2) };
     }, []);
     const childrenStyles = useMemo(() => {
-        return {
-            root: styles === null || styles === void 0 ? void 0 : styles.children
-        };
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
     }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+    return (React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         React.createElement(Stack, { styles: childContainerStyle }, childrenOnCurrentPage === null || childrenOnCurrentPage === void 0 ? void 0 : childrenOnCurrentPage.map((child, i) => {
-            return React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child);
+            return (React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
         })),
-        showButtons && React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }));
+        showButtons && (React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
 };
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
@@ -113,22 +97,18 @@ const VerticalGalleryControlBar = (props) => {
     const nextButtonsStyles = useMemo(() => {
         return mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
     }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
-    const controlBarSpacing = {
-        childrenGap: '0.5rem'
-    };
-    const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {
-        current: `${currentPage}`,
-        total: `${totalPages}`
-    }) : undefined;
-    const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {
-        current: `${currentPage}`,
-        total: `${totalPages}`
-    }) : undefined;
-    return React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
+    const controlBarSpacing = { childrenGap: '0.5rem' };
+    const previousButtonAriaLabel = strings.leftNavButtonAriaLabel
+        ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
+    const nextButtonAriaLabel = strings.rightNavButtonAriaLabel
+        ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
+    return (React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
         React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, ariaLabel: previousButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React.createElement(Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
         React.createElement(Text, { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
         React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, ariaLabel: nextButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
-            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles })));
+            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
 };
 //# sourceMappingURL=VerticalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1L,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAwExD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,eAAe,EACf,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAG3C;QACD,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IACH,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,MAAA,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;IAC7D,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACzC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,MAAA,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,0CAAE,GAAG,CAAC,KAAK,CAAC,EAAE;gBAChD,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO;IACT,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,GAAS,EAAE;QACvC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,IAAI,IAAI,GAAG,QAAQ,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC/C,oDAAoD;YACpD,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YACrC,4BAA4B;YAC5B,cAAc,CAAC;gBACb,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC5C,2BAA2B;YAC3B,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;SAChC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACzB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;QACzD,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,IAC/B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,oBAAC,KAAK,CAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,gBAAc,GAAG,CAAC,wBAAwB,IACpF,KAAK,CACK,CAAC;QACpB,CAAC,CAAC,CACM;QACP,WAAW,IAAI,oBAAC,yBAAyB,IAAC,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,GAAI,CAClM,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IACvF,MAAM,EACJ,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,UAAU,EACV,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IACpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO,WAAW,CAAC,sCAAsC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC;IACnB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IACpC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,CAAC;IACtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAChC,MAAM,iBAAiB,GAAG;QACxB,WAAW,EAAE,QAAQ;KACtB,CAAC;IACF,MAAM,uBAAuB,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,sBAAsB,EAAE;QAC7G,OAAO,EAAE,GAAG,WAAW,EAAE;QACzB,KAAK,EAAE,GAAG,UAAU,EAAE;KACvB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,MAAM,mBAAmB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,EAAE;QAC3G,OAAO,EAAE,GAAG,WAAW,EAAE;QACzB,KAAK,EAAE,GAAG,UAAU,EAAE;KACvB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,iBAAiB,EAAE,UAAU,QAAC,SAAS,EAAE,0BAA0B;QAC9G,oBAAC,aAAa,IAAC,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,EAAE,SAAS,EAAE,uBAAuB,gBAAc,GAAG,CAAC,4BAA4B;YAClM,oBAAC,IAAI,IAAC,QAAQ,EAAC,2BAA2B,EAAC,MAAM,EAAE,aAAa,GAAI,CACtD;QAChB,oBAAC,IAAI,kBAAa,GAAG,CAAC,0BAA0B,EAAE,SAAS,EAAE,iBAAiB,IAAG,GAAG,WAAW,MAAM,UAAU,EAAE,CAAQ;QACzH,oBAAC,aAAa,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,gBAAc,GAAG,CAAC,6BAA6B;YACrL,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,MAAM,EAAE,aAAa,GAAI,CACvD,CACV,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: {\n    next: boolean;\n    previous: boolean;\n  };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    styles,\n    childrenPerPage,\n    onFetchTilesToRender\n  } = props;\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{\n    previous: boolean;\n    next: boolean;\n  }>({\n    previous: true,\n    next: true\n  });\n  const ids = useIdentifiers();\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map(index => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n  const showButtons = numberOfChildren > childrenPerPage;\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({\n        previous: false,\n        next: false\n      });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({\n        previous: true,\n        next: false\n      });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({\n        previous: false,\n        next: true\n      });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n  const childContainerStyle = useMemo(() => {\n    return {\n      root: childrenContainerStyle(2)\n    };\n  }, []);\n  const childrenStyles = useMemo(() => {\n    return {\n      root: styles?.children\n    };\n  }, [styles?.children]);\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n  return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n        return <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>;\n      })}\n      </Stack>\n      {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n    </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const {\n    onNextButtonClick,\n    onPreviousButtonClick,\n    buttonsDisabled,\n    currentPage,\n    totalPages,\n    styles\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.verticalGallery;\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n  const controlBarSpacing = {\n    childrenGap: '0.5rem'\n  };\n  const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {\n    current: `${currentPage}`,\n    total: `${totalPages}`\n  }) : undefined;\n  const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {\n    current: `${currentPage}`,\n    total: `${totalPages}`\n  }) : undefined;\n  return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous} ariaLabel={previousButtonAriaLabel} data-ui-id={ids.overflowGalleryLeftNavButton}>\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next} ariaLabel={nextButtonAriaLabel} data-ui-id={ids.overflowGalleryRightNavButton}>\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>;\n};"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map((index) => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  const previousButtonAriaLabel = strings.leftNavButtonAriaLabel\n    ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  const nextButtonAriaLabel = strings.rightNavButtonAriaLabel\n    ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        ariaLabel={previousButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        ariaLabel={nextButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}

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

@@ -54,7 +54,9 @@ const deriveProps = (props, fallbacks) => {
     const tooltipProps = (_c = props.tooltipProps) !== null && _c !== void 0 ? _c : {
         content: (_d = props.title) !== null && _d !== void 0 ? _d : fallbacks.tooltipContent
     };
-    const ariaLabel = ((_e = props.ariaLabel) !== null && _e !== void 0 ? _e : typeof ((_f = props.tooltipProps) === null || _f === void 0 ? void 0 : _f.content) === 'string') ? typeof ((_g = props.tooltipProps) === null || _g === void 0 ? void 0 : _g.content) : (_h = props.title) !== null && _h !== void 0 ? _h : fallbacks.ariaLabel;
+    const ariaLabel = ((_e = props.ariaLabel) !== null && _e !== void 0 ? _e : typeof ((_f = props.tooltipProps) === null || _f === void 0 ? void 0 : _f.content) === 'string')
+        ? typeof ((_g = props.tooltipProps) === null || _g === void 0 ? void 0 : _g.content)
+        : (_h = props.title) !== null && _h !== void 0 ? _h : fallbacks.ariaLabel;
     return Object.assign(Object.assign({}, props), { iconProps,
         title,
         tooltipProps,

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

@@ -1 +1 @@
-{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,SAKnD,EAA0B,EAAE;;IAC3B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ,EAAC,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAC/J,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * 'None' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsNone',\n    title: 'None',\n    tooltipContent: 'Remove Background',\n    ariaLabel: 'Remove Background'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Blur' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsBlur',\n    title: 'Blurred',\n    tooltipContent: 'Blur Background',\n    ariaLabel: 'Blur Background'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Add Image' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsAddImage',\n    title: 'Image',\n    tooltipContent: 'Upload Background Image',\n    ariaLabel: 'Upload Background Image'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (props: _VideoEffectsItemProps, fallbacks: {\n  iconName: string;\n  title: string;\n  tooltipContent: string;\n  ariaLabel: string;\n}): _VideoEffectsItemProps => {\n  const iconProps = props.iconProps ?? {\n    iconName: fallbacks.iconName\n  };\n  const title = props.title ?? fallbacks.title;\n  const tooltipProps = props.tooltipProps ?? {\n    content: props.title ?? fallbacks.tooltipContent\n  };\n  const ariaLabel = props.ariaLabel ?? typeof props.tooltipProps?.content === 'string' ? typeof props.tooltipProps?.content : props.title ?? fallbacks.ariaLabel;\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};"]}
+{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAClB,KAA6B,EAC7B,SAKC,EACuB,EAAE;;IAC1B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GACb,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ;QAChE,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA;QACpC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAEzC,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * 'None' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsNone',\n    title: 'None',\n    tooltipContent: 'Remove Background',\n    ariaLabel: 'Remove Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Blur' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsBlur',\n    title: 'Blurred',\n    tooltipContent: 'Blur Background',\n    ariaLabel: 'Blur Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Add Image' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsAddImage',\n    title: 'Image',\n    tooltipContent: 'Upload Background Image',\n    ariaLabel: 'Upload Background Image'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (\n  props: _VideoEffectsItemProps,\n  fallbacks: {\n    iconName: string;\n    title: string;\n    tooltipContent: string;\n    ariaLabel: string;\n  }\n): _VideoEffectsItemProps => {\n  const iconProps = props.iconProps ?? {\n    iconName: fallbacks.iconName\n  };\n  const title = props.title ?? fallbacks.title;\n  const tooltipProps = props.tooltipProps ?? {\n    content: props.title ?? fallbacks.tooltipContent\n  };\n  const ariaLabel =\n    props.ariaLabel ?? typeof props.tooltipProps?.content === 'string'\n      ? typeof props.tooltipProps?.content\n      : props.title ?? fallbacks.ariaLabel;\n\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};\n"]}