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

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

@@ -1 +1 @@
-{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO;YACL,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;SAC7F,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,cAAc,EAAE,CAAC;SAClB;aAAM;YACL,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE;YAC1C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,IAAI,CAAC;AACjL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const {\n    onStartCaptions,\n    onStopCaptions,\n    onSetSpokenLanguage,\n    currentSpokenLanguage,\n    strings\n  } = props;\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n  const options: _captionsOptions = useMemo(() => {\n    return {\n      spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage\n    };\n  }, [currentSpokenLanguage]);\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n  return <ControlBarButton {...props} strings={strings} onClick={onToggleStartCaptions ?? props.onClick} onRenderOnIcon={onRenderStartIcon} onRenderOffIcon={onRenderOffIcon} />;\n};"]}
+{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO;YACL,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;SAC7F,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,IAAI,CAAC;AACjL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const {\n    onStartCaptions,\n    onStopCaptions,\n    onSetSpokenLanguage,\n    currentSpokenLanguage,\n    strings\n  } = props;\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n  const options: _captionsOptions = useMemo(() => {\n    return {\n      spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage\n    };\n  }, [currentSpokenLanguage]);\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n  return <ControlBarButton {...props} strings={strings} onClick={onToggleStartCaptions ?? props.onClick} onRenderOnIcon={onRenderStartIcon} onRenderOffIcon={onRenderOffIcon} />;\n};"]}

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

@@ -4,7 +4,7 @@ import { BaseCustomStyles } from '../types';
  * Whether the stream is loading or not.
  * @public
  */
-export declare type LoadingState = 'loading' | 'none';
+export type LoadingState = 'loading' | 'none';
 /**
  * Props for {@link StreamMedia}.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC7I,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,MAAM,EACN,YAAY,GAAG,MAAM,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;SAC3C;QACD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAE;QAC9B,2CAAgB,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,GAAI;QACrL,YAAY,KAAK,SAAS,IAAI,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACpE,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CACJ,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { invertedVideoInPipStyle, mediaContainer, container, loadingSpinnerContainer, loadSpinnerStyles } from './styles/StreamMedia.styles';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const {\n    isMirrored,\n    videoStreamElement,\n    styles,\n    loadingState = 'none'\n  } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n  return <div className={container()}>\n      <div data-ui-id=\"stream-media-container\" className={mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles?.root)} ref={containerEl} />\n      {loadingState === 'loading' && <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>}\n    </div>;\n};"]}
+{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC7I,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,MAAM,EACN,YAAY,GAAG,MAAM,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;QACD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAE;QAC9B,2CAAgB,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,GAAI;QACrL,YAAY,KAAK,SAAS,IAAI,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACpE,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CACJ,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { invertedVideoInPipStyle, mediaContainer, container, loadingSpinnerContainer, loadSpinnerStyles } from './styles/StreamMedia.styles';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const {\n    isMirrored,\n    videoStreamElement,\n    styles,\n    loadingState = 'none'\n  } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n  return <div className={container()}>\n      <div data-ui-id=\"stream-media-container\" className={mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles?.root)} ref={containerEl} />\n      {loadingState === 'loading' && <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>}\n    </div>;\n};"]}

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

@@ -5,11 +5,11 @@ import { ComponentSlotStyle } from '../types';
  *
  * @private
  */
-export declare type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit';
+export type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit';
 /**
  * @private
  */
-export declare type SystemMessageProps = {
+export type SystemMessageProps = {
     /**
      * Icon name for the system message.
      */

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';\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=\"error-bar-stack\">\n      {toShow.map(error => {\n      const devicePermissionErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onPermissionsTroubleshootingClick && <Link onClick={() => {\n          onPermissionsTroubleshootingClick(permissionsState);\n        }} underline>\n                <span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>\n              </Link>}\n          </div>;\n      const networkErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\n                <span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>\n              </Link>}\n          </div>;\n      return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={error.type} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n        setDismissedErrors(dismissError(dismissedErrors, error));\n      }} ariaLabel={strings.dismissButtonAriaLabel} />} isMultiline={false}>\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":["../../../../../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';\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=\"error-bar-stack\">\n      {toShow.map(error => {\n      const devicePermissionErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onPermissionsTroubleshootingClick && <Link onClick={() => {\n          onPermissionsTroubleshootingClick(permissionsState);\n        }} underline>\n                <span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>\n              </Link>}\n          </div>;\n      const networkErrorBar = <div>\n            {strings[error.type]}{' '}\n            {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\n                <span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>\n              </Link>}\n          </div>;\n      return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={error.type} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n        setDismissedErrors(dismissError(dismissedErrors, error));\n      }} ariaLabel={strings.dismissButtonAriaLabel} />} isMultiline={false}>\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};"]}

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};\"../../../acs-ui-common/src\""]}
+{"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};"]}

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

@@ -14,8 +14,6 @@ export const UnsupportedBrowser = (props) => {
     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: '',
         secondaryText: '',

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

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

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

@@ -15,8 +15,6 @@ export const UnsupportedBrowserVersion = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick });
 };
 const unsupportedBrowserVersionStringsTrampoline = (locale) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    return locale.strings.UnsupportedBrowserVersion;
     return {
         primaryText: '',
         secondaryText: '',

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

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

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

@@ -1,36 +1,12 @@
 // 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'
-        } },
-        React.createElement(Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
-        React.createElement(Stack, { styles: testContainerStyles, tokens: {
-                childrenGap: '0.25rem'
-            } },
-            React.createElement(Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
-            React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
-        onTroubleshootingClick && React.createElement(Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText),
-        onContinueAnywayClick && React.createElement(DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText));
-};
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
  *
  * @private
  */
 export const UnsupportedEnvironment = (props) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    return React.createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=UnsupportedEnvironment.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;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,EAAE,eAAe,EAAE,0BAA0B,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAqC/K,sDAAsD;AACtD,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,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 { 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}\n\n/* @conditional-compile-remove(unsupported-browser) */\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  /* @conditional-compile-remove(unsupported-browser) */\n  return <UnsupportedEnvironmentContainer {...props} />;\n  return <></>;\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\n/**\n * @private\n */\nexport interface UnsupportedEnvironmentStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue anyway button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedEnvironment} UI\n *\n * @private\n */\nexport interface UnsupportedEnvironmentProps {\n  /**\n   * Handler to perform a action when the help link is actioned\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * String overrides for the component\n   */\n  strings?: UnsupportedEnvironmentStrings;\n  /**\n   * CallBack for the continue anyay button. Use this as a mechanism to allow users into\n   * a call with a unsupported browser version.\n   */\n  onContinueAnywayClick?: () => void;\n}\n/**\n * UI to display to the user that the environment they are using is not supported by calling application.\n *\n * @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n  return <></>;\n};"]}

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

@@ -14,8 +14,6 @@ export const UnsupportedOperatingSystem = (props) => {
     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: '',
         secondaryText: '',

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(vertical-gallery) */\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';\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\n  /* @conditional-compile-remove(vertical-gallery) */\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}\n        /* @conditional-compile-remove(vertical-gallery) */ 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  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\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  return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.leftNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryLeftNavButton}>\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.rightNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>;\n};"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(vertical-gallery) */\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';\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\n  /* @conditional-compile-remove(vertical-gallery) */\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}\n        /* @conditional-compile-remove(vertical-gallery) */ 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  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\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  return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.leftNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryLeftNavButton}>\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.rightNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts

@@ -44,7 +44,7 @@ export interface _VideoBackgroundEffectsPickerProps {
  * Option for the {@link _VideoBackgroundEffectsPicker}.
  * @internal
  */
-export declare type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+export type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
 /**
  * Styles for the {@link _VideoBackgroundEffectsPicker}.
  * @internal

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

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string | undefined>(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n      childrenGap: '0.5rem'\n    }} data-ui-id=\"video-effects-picker-row\">\n          {options.map((option, i) => {\n        if (i === 0 && rowIndex === 0) {\n          return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />;\n        }\n        return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n      })}\n          {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n        length: fillCount\n      }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n        </Stack>)}\n    </Stack>;\n};"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string | undefined>(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n      childrenGap: '0.5rem'\n    }} data-ui-id=\"video-effects-picker-row\">\n          {options.map((option, i) => {\n        if (i === 0 && rowIndex === 0) {\n          return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />;\n        }\n        return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n      })}\n          {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n        length: fillCount\n      }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n        </Stack>)}\n    </Stack>;\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback, useEffect } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Should focus on mounting of the picker item\n   */\n  focusOnMount?: boolean;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  const componentRef = React.createRef<IButton>();\n  useEffect(() => {\n    if (props.focusOnMount && componentRef.current) {\n      componentRef.current.focus();\n    }\n  }, [componentRef, props.focusOnMount]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`} aria-label={props.ariaLabel ?? props.itemKey} aria-disabled={props.disabled}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={componentRef} autoFocus={props.focusOnMount} onKeyDown={disabled ? undefined : e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          props.onSelect?.(props.itemKey);\n        }\n      }}>\n          <Stack horizontalAlign={'center'} tokens={{\n          childrenGap: '0.15rem'\n        }}>\n            {props.iconProps && <Stack.Item styles={{\n            root: props.styles?.iconContainer\n          }}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item styles={{\n            root: props.styles?.textContainer\n          }}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAmG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,EAAW,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAC/C,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IACvC,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB,gBAAc,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,OAAO,mBAAiB,KAAK,CAAC,QAAQ;YAClO,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;oBAClN,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAC;oBAClC,CAAC;gBACH,CAAC;gBACG,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE;wBAC1C,WAAW,EAAE,SAAS;qBACvB;oBACI,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;4BACxC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;yBAClC;wBACK,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;4BACpC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;yBAClC;wBACK,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback, useEffect } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Should focus on mounting of the picker item\n   */\n  focusOnMount?: boolean;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  const componentRef = React.createRef<IButton>();\n  useEffect(() => {\n    if (props.focusOnMount && componentRef.current) {\n      componentRef.current.focus();\n    }\n  }, [componentRef, props.focusOnMount]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`} aria-label={props.ariaLabel ?? props.itemKey} aria-disabled={props.disabled}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={componentRef} autoFocus={props.focusOnMount} onKeyDown={disabled ? undefined : e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          props.onSelect?.(props.itemKey);\n        }\n      }}>\n          <Stack horizontalAlign={'center'} tokens={{\n          childrenGap: '0.15rem'\n        }}>\n            {props.iconProps && <Stack.Item styles={{\n            root: props.styles?.iconContainer\n          }}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item styles={{\n            root: props.styles?.textContainer\n          }}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}

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

@@ -2,6 +2,8 @@
 // Licensed under the MIT License.
 const VideoEffectsItemContainerHeight = '3.375rem';
 const VideoEffectsItemContainerWidth = '4.83rem';
+const VideoEffectsItemContainerBorderHeight = '3.373rem';
+const VideoEffectsItemContainerBorderWidth = '4.85rem';
 const VideoEffectsItemContainerBorderSize = '2px';
 /** @private */
 export const hiddenVideoEffectsItemContainerStyles = {
@@ -35,19 +37,32 @@ export const videoEffectsItemContainerStyles = (args) => {
             ':after': {
                 content: '""',
                 boxSizing: 'border-box',
-                height: '100%',
-                width: '100%',
-                borderRadius: '0.25rem'
+                height: VideoEffectsItemContainerBorderHeight,
+                width: VideoEffectsItemContainerBorderWidth,
+                borderRadius: '0.25rem',
+                transform: 'translate(-1rem, -3.3rem)',
+                display: 'flex'
             },
             ':hover': {
                 ':after': {
-                    border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                    border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`,
+                    transform: 'translate(-1rem, -3.3rem)'
+                }
+            },
+            ':focus': {
+                ':after': {
+                    outline: 'none',
+                    transform: 'translate(-0.1rem, -0.2rem)',
+                    ':hover': {
+                        transform: 'translate(-0.1rem, -0.2rem)'
+                    }
+                }
+            },
+            ':active': {
+                ':after': {
+                    outline: 'none',
+                    transform: 'translate(-1rem, -3.3rem)'
                 }
-            }
-        },
-        rootFocused: {
-            ':after': {
-                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
             }
         }
     };