@azure/communication-react 1.24.0-alpha-202502080015 → 1.24.0-beta.1

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

@@ -1,14 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(rtt) */
 import { Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';
-/* @conditional-compile-remove(rtt) */
 import React from 'react';
-/* @conditional-compile-remove(rtt) */
 import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName, isTypingClassName, rttContainerClassName } from './styles/Captions.style';
-/* @conditional-compile-remove(rtt) */
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(rtt) */
 /**
  * @beta
  * A component for displaying a single line of RealTimeText
@@ -32,12 +27,12 @@ export const RealTimeText = (props) => {
         }
     };
     const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
-    return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start", className: rttContainerClassName(theme, isTyping !== null && isTyping !== void 0 ? isTyping : false) },
+    return React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start", className: rttContainerClassName(theme, isTyping !== null && isTyping !== void 0 ? isTyping : false) },
         React.createElement(Stack.Item, { className: iconClassName }, userIcon),
         React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
             React.createElement(Stack, { className: displayNameContainerClassName, horizontal: true },
                 React.createElement(Text, { className: displayNameClassName }, displayName),
                 isTyping && React.createElement(Text, { className: isTypingClassName(theme) }, strings === null || strings === void 0 ? void 0 : strings.isTypingText)),
-            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, message))));
+            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, message)));
 };
 //# sourceMappingURL=RealTimeText.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RealTimeText.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RealTimeText.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,sCAAsC;AACtC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,sCAAsC;AACtC,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAwD5C,sCAAsC;AACtC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,aAAa,EAAC,OAAO,EACrB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC;QAE1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,IAAC,SAAS,EAAE,6BAA6B,EAAE,UAAU;gBACzD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ;gBAC1D,QAAQ,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAQ,CAChF;YACR,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,OAAO,CACG,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport { IPersona, Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport React from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(rtt) */\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName,\n  isTypingClassName,\n  rttContainerClassName\n} from './styles/Captions.style';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * strings for rtt\n */\nexport interface RealTimeTextStrings {\n  /**\n   * String indicating that the user is typing\n   */\n  isTypingText?: string;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * Props for a single line of RealTimeText.\n */\nexport interface RealTimeTextProps {\n  /**\n   * RealTimeText id\n   */\n  id: number;\n  /**\n   * Display name of the user\n   */\n  displayName: string;\n  /**\n   * RealTimeText content\n   */\n  message: string;\n  /**\n   * user id of the user\n   */\n  userId?: string;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Boolean indicating whether the RealTimeText is still in progress\n   */\n  isTyping?: boolean;\n  /**\n   * Boolean indicating whether the RealTimeText is from the local user\n   */\n  isMe?: boolean;\n  /**\n   * Strings for RealTimeText\n   */\n  strings?: RealTimeTextStrings;\n}\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * A component for displaying a single line of RealTimeText\n */\nexport const RealTimeText = (props: RealTimeTextProps): JSX.Element => {\n  const { displayName, userId, message, onRenderAvatar, isTyping } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.realTimeText;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack\n      horizontal\n      verticalAlign=\"start\"\n      horizontalAlign=\"start\"\n      className={rttContainerClassName(theme, isTyping ?? false)}\n    >\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack className={displayNameContainerClassName} horizontal>\n          <Text className={displayNameClassName}>{displayName}</Text>\n          {isTyping && <Text className={isTypingClassName(theme)}>{strings?.isTypingText}</Text>}\n        </Stack>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {message}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RealTimeText.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RealTimeText.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC5M,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAmD5C;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,cAAc,EACd,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO,EAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,CAAC;QAC7H,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,IAAC,SAAS,EAAE,6BAA6B,EAAE,UAAU;gBACzD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ;gBAC1D,QAAQ,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAQ,CAChF;YACR,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,OAAO,CACG,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IPersona, Persona, Stack, PersonaSize, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName, isTypingClassName, rttContainerClassName } from './styles/Captions.style';\nimport { useLocale } from '../localization';\n/**\n * @beta\n * strings for rtt\n */\nexport interface RealTimeTextStrings {\n  /**\n   * String indicating that the user is typing\n   */\n  isTypingText?: string;\n}\n/**\n * @beta\n * Props for a single line of RealTimeText.\n */\nexport interface RealTimeTextProps {\n  /**\n   * RealTimeText id\n   */\n  id: number;\n  /**\n   * Display name of the user\n   */\n  displayName: string;\n  /**\n   * RealTimeText content\n   */\n  message: string;\n  /**\n   * user id of the user\n   */\n  userId?: string;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Boolean indicating whether the RealTimeText is still in progress\n   */\n  isTyping?: boolean;\n  /**\n   * Boolean indicating whether the RealTimeText is from the local user\n   */\n  isMe?: boolean;\n  /**\n   * Strings for RealTimeText\n   */\n  strings?: RealTimeTextStrings;\n}\n/**\n * @beta\n * A component for displaying a single line of RealTimeText\n */\nexport const RealTimeText = (props: RealTimeTextProps): JSX.Element => {\n  const {\n    displayName,\n    userId,\n    message,\n    onRenderAvatar,\n    isTyping\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.realTimeText;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n  return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\" className={rttContainerClassName(theme, isTyping ?? false)}>\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack className={displayNameContainerClassName} horizontal>\n          <Text className={displayNameClassName}>{displayName}</Text>\n          {isTyping && <Text className={isTypingClassName(theme)}>{strings?.isTypingText}</Text>}\n        </Stack>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {message}\n        </Stack.Item>\n      </Stack>\n    </Stack>;\n};"]}

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

@@ -9,17 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(rtt) */
 import React, { useCallback } from 'react';
-/* @conditional-compile-remove(rtt) */
 import { useMemo } from 'react';
-/* @conditional-compile-remove(rtt) */
 import { Modal, Stack, useTheme, Text, IconButton, DefaultButton, PrimaryButton } from '@fluentui/react';
-/* @conditional-compile-remove(rtt) */
 import { buttonsContainerClassName, buttonStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
-/* @conditional-compile-remove(rtt) */
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(rtt) */
 /**
  * @beta
  * a component for realTimeText modal
@@ -41,15 +35,19 @@ export const RealTimeTextModal = (props) => {
         onDismiss();
     }), [onDismiss, onStartRealTimeText]);
     const RealTimeTextModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
-    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: RealTimeTextModalStyle },
+    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: RealTimeTextModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
             React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalTitle),
-            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.realTimeTextCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
+            React.createElement(IconButton, { iconProps: {
+                    iconName: 'Cancel'
+                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.realTimeTextCloseModalButtonAriaLabel, onClick: onDismiss, style: {
+                    color: theme.palette.black
+                } })),
         React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalText),
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
             React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                 React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextConfirmButtonLabel)),
             React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
-                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextCancelButtonLabel))))));
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextCancelButtonLabel)))));
 };
 //# sourceMappingURL=RealTimeTextModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RealTimeTextModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RealTimeTextModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, DefaultButton, PrimaryButton } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rtt) */\nimport {\n  buttonsContainerClassName,\n  buttonStyles,\n  themedCaptionsSettingsModalStyle,\n  titleClassName,\n  titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * strings for realTimeText modal\n */\nexport interface RealTimeTextModalStrings {\n  /** The title of the RealTimeText modal */\n  realTimeTextModalTitle?: string;\n  /** The text of the RealTimeText modal */\n  realTimeTextModalText?: string;\n  /** The label for the confirm button */\n  realTimeTextConfirmButtonLabel?: string;\n  /** The label for the cancel button */\n  realTimeTextCancelButtonLabel?: string;\n  /** The aria label for the modal */\n  realTimeTextModalAriaLabel?: string;\n  /** The aria label for the close button */\n  realTimeTextCloseModalButtonAriaLabel?: string;\n}\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * RealTimeTextModal Component Props.\n */\nexport interface RealTimeTextModalProps {\n  /** The strings for the RealTimeText modal */\n  strings?: RealTimeTextModalStrings;\n  /** The flag to show the modal */\n  showModal?: boolean;\n  /** The function to dismiss the modal */\n  onDismissModal?: () => void;\n  /**\n   * Use this function to show RealTimeText UI in the calling experience.\n   * Note that real time text should not be started for everyone in the call until the first real time text is received.\n   */\n  onStartRealTimeText?: () => void;\n}\n/* @conditional-compile-remove(rtt) */\n/**\n * @beta\n * a component for realTimeText modal\n */\nexport const RealTimeTextModal = (props: RealTimeTextModalProps): JSX.Element => {\n  const { showModal, onDismissModal, onStartRealTimeText } = props;\n  const localeStrings = useLocale().strings.realTimeTextModal;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissModal) {\n      onDismissModal();\n    }\n  }, [onDismissModal]);\n\n  const onConfirm = useCallback(async (): Promise<void> => {\n    if (onStartRealTimeText) {\n      await onStartRealTimeText();\n    }\n    onDismiss();\n  }, [onDismiss, onStartRealTimeText]);\n\n  const RealTimeTextModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings?.realTimeTextModalAriaLabel}\n          isOpen={showModal}\n          onDismiss={onDismiss}\n          isBlocking={true}\n          styles={RealTimeTextModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.realTimeTextModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings?.realTimeTextCloseModalButtonAriaLabel}\n              onClick={onDismiss}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n          <Text>{strings?.realTimeTextModalText}</Text>\n\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.realTimeTextConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n              <span>{strings?.realTimeTextCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n"]}
+{"version":3,"file":"RealTimeTextModal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RealTimeTextModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, DefaultButton, PrimaryButton } from '@fluentui/react';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { buttonsContainerClassName, buttonStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';\nimport { useLocale } from '../localization';\n/**\n * @beta\n * strings for realTimeText modal\n */\nexport interface RealTimeTextModalStrings {\n  /** The title of the RealTimeText modal */\n  realTimeTextModalTitle?: string;\n  /** The text of the RealTimeText modal */\n  realTimeTextModalText?: string;\n  /** The label for the confirm button */\n  realTimeTextConfirmButtonLabel?: string;\n  /** The label for the cancel button */\n  realTimeTextCancelButtonLabel?: string;\n  /** The aria label for the modal */\n  realTimeTextModalAriaLabel?: string;\n  /** The aria label for the close button */\n  realTimeTextCloseModalButtonAriaLabel?: string;\n}\n/**\n * @beta\n * RealTimeTextModal Component Props.\n */\nexport interface RealTimeTextModalProps {\n  /** The strings for the RealTimeText modal */\n  strings?: RealTimeTextModalStrings;\n  /** The flag to show the modal */\n  showModal?: boolean;\n  /** The function to dismiss the modal */\n  onDismissModal?: () => void;\n  /**\n   * Use this function to show RealTimeText UI in the calling experience.\n   * Note that real time text should not be started for everyone in the call until the first real time text is received.\n   */\n  onStartRealTimeText?: () => void;\n}\n/**\n * @beta\n * a component for realTimeText modal\n */\nexport const RealTimeTextModal = (props: RealTimeTextModalProps): JSX.Element => {\n  const {\n    showModal,\n    onDismissModal,\n    onStartRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.realTimeTextModal;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const onDismiss = useCallback((): void => {\n    if (onDismissModal) {\n      onDismissModal();\n    }\n  }, [onDismissModal]);\n  const onConfirm = useCallback(async (): Promise<void> => {\n    if (onStartRealTimeText) {\n      await onStartRealTimeText();\n    }\n    onDismiss();\n  }, [onDismiss, onStartRealTimeText]);\n  const RealTimeTextModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);\n  return <>\n      {<Modal titleAriaId={strings?.realTimeTextModalAriaLabel} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={RealTimeTextModalStyle}>\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.realTimeTextModalTitle}</Text>\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings?.realTimeTextCloseModalButtonAriaLabel} onClick={onDismiss} style={{\n          color: theme.palette.black\n        }} />\n          </Stack>\n          <Text>{strings?.realTimeTextModalText}</Text>\n\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.realTimeTextConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n              <span>{strings?.realTimeTextCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>}\n    </>;\n};"]}

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

@@ -20,7 +20,8 @@ import { MeetingReactionOverlay } from './MeetingReactionOverlay';
  */
 export const _RemoteVideoTile = React.memo((props) => {
     var _a, _b;
-    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
+    const { isAvailable, isReceiving = true, 
+    // default to true to prevent any breaking change
     isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -34,19 +35,7 @@ export const _RemoteVideoTile = React.memo((props) => {
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
         streamId,
         isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true
-    }), [
-        isAvailable,
-        isReceiving,
-        isScreenSharingOn,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
-        renderElement,
-        userId,
-        streamId,
-        remoteParticipant.mediaAccess
-    ]);
+    }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode, renderElement, userId, streamId, remoteParticipant.mediaAccess]);
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
@@ -88,7 +77,7 @@ export const _RemoteVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React.createElement(StreamMedia, { videoStreamElement: renderElement !== null && renderElement !== void 0 ? renderElement : null, loadingState: showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none' }));
+        return React.createElement(StreamMedia, { videoStreamElement: renderElement !== null && renderElement !== void 0 ? renderElement : null, loadingState: showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none' });
     }, [isReconnecting, renderElement, showLoadingIndicator]);
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
@@ -98,31 +87,33 @@ export const _RemoteVideoTile = React.memo((props) => {
     const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
     const formatDisplayName = (displayName, role) => {
         if (displayName && role) {
-            return _formatString(displayName, { AttendeeRole: role });
+            return _formatString(displayName, {
+                AttendeeRole: role
+            });
         }
         return displayName;
     };
     const displayName = formatDisplayName(remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder, attendeeRoleString);
     const formatInitialsName = () => {
         if (remoteParticipant.displayName && attendeeRoleString) {
-            return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });
+            return _formatString(remoteParticipant.displayName, {
+                AttendeeRole: attendeeRoleString
+            });
         }
         return remoteParticipant.displayName;
     };
-    const reactionOverlay = reactionResources && (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: remoteParticipant.reaction, reactionResources: reactionResources }));
-    return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch
-                ? props.onLongTouch
-                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay, mediaAccess: remoteParticipant.mediaAccess })),
-        drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+    const reactionOverlay = reactionResources && React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: remoteParticipant.reaction, reactionResources: reactionResources });
+    return React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch ? props.onLongTouch : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay, mediaAccess: remoteParticipant.mediaAccess })),
+        drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))));
 });
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
-    return contextualMenuProps.items.map((item) => {
+    return contextualMenuProps.items.map(item => {
         return {
             itemKey: item.key,
             text: item.text,

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AACpH,OAAO,EAEL,uCAAuC,EACxC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,gDAAgD,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAyCA,EAAE,EAAE;;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,6BAA6B,EAC7B,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QAChD,QAAQ;QACR,gBAAgB,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;QACN,QAAQ;QACR,iBAAiB,CAAC,WAAW;KAC9B,CACF,CAAC;IAEF,yEAAyE;IACzE,MAAM,uBAAuB,GAAG,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAChG,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;QAC1D,WAAW,EAAE,iBAAiB;QAC9B,IAAI,EAAE,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI;QACnC,OAAO,oBAAO,KAAK,CAAC,OAAO,CAAE;QAC7B,QAAQ;QACR,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,qBAAqB;QACrB,6BAA6B;QAC7B,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,0BAA0B;QAC1B,iBAAiB;QACjB,aAAa;QACb,aAAa;QACb,aAAa;QACb,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,QAAQ,KAAK,YAAY,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO;YACL,cAAc,EAAE,mBAAmB;SACpC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,gBAAgB,KAAK,cAAc,CAAC;IACzG,MAAM,cAAc,GAAG,gBAAgB,KAAK,cAAc,CAAC;IAE3D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjG,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5E,2EAA2E;YAC3E,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,CACL,oBAAC,WAAW,IACV,kBAAkB,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,IAAI,EACzC,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,GACzF,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAC9C,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEvD,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,IAAY,EAAU,EAAE;QACtE,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO,aAAa,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,iBAAiB,CACnC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,EAC9F,kBAAkB,CACnB,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAuB,EAAE;QAClD,IAAI,iBAAiB,CAAC,WAAW,IAAI,kBAAkB,EAAE,CAAC;YACxD,OAAO,aAAa,CAAC,iBAAiB,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAC5F,CAAC;QACD,OAAO,iBAAiB,CAAC,WAAW,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAC3C,oBAAC,sBAAsB,IACrB,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,EACpC,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE,2BAA2B;QAElC,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAA,kBAAkB,EAAE,mCAAI,EAAE,EACxC,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAClC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAC1D,gBAAgB,EAAE,gBAAgB,IAC9B,4BAA4B,IAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EACT,KAAK,CAAC,WAAW;gBACf,CAAC,CAAC,KAAK,CAAC,WAAW;gBACnB,CAAC,CAAC,GAAG,EAAE,CACH,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CACxE,sBAAsB,CAAC,EAAE,CAAC,CAC3B,CACF,EAET,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,iBAAiB,CAAC,WAAW,IAC1C;QACD,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,gBAAgB;YACnC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;gBACpC,oBAAC,WAAW,IACV,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAChD,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,WAAW,GACpB,CACI,CACF,CACT,CACK,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,+CAA+C,GAAG,CACtD,mBAA0C,EAC1C,cAA2B,EACH,EAAE;IAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;gBACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    streamId?: number;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    alwaysShowLabelBackground?: boolean;\n    personaMinSize?: number;\n    strings: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    spotlightedParticipantUserIds?: string[];\n    isSpotlighted?: boolean;\n    onStartSpotlight?: (userIds: string[]) => void;\n    onStopSpotlight?: (userIds: string[]) => void;\n    maxParticipantsToSpotlight?: number;\n    onMuteParticipant?: (userId: string) => void;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    reactionResources?: ReactionResources;\n    onLongTouch?: (() => void) | undefined;\n    onForbidAudio?: (userIds: string[]) => Promise<void>;\n    onPermitAudio?: (userIds: string[]) => Promise<void>;\n    onForbidVideo?: (userIds: string[]) => Promise<void>;\n    onPermitVideo?: (userIds: string[]) => Promise<void>;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      spotlightedParticipantUserIds,\n      isSpotlighted,\n      onStartSpotlight,\n      onStopSpotlight,\n      maxParticipantsToSpotlight,\n      onMuteParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      reactionResources,\n      streamId,\n      onForbidAudio,\n      onPermitAudio,\n      onForbidVideo,\n      onPermitVideo\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode,\n        streamId,\n        isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId,\n        streamId,\n        remoteParticipant.mediaAccess\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: remoteParticipant,\n      view: createVideoStreamResult?.view,\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      spotlightedParticipantUserIds,\n      isSpotlighted,\n      onStartSpotlight,\n      onStopSpotlight,\n      maxParticipantsToSpotlight,\n      onMuteParticipant,\n      onForbidAudio,\n      onPermitAudio,\n      onForbidVideo,\n      onPermitVideo\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n    const isReconnecting = participantState === 'Reconnecting';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if ((!renderElement || !renderElement.childElementCount) && !isReconnecting) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <StreamMedia\n          videoStreamElement={renderElement ?? null}\n          loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'}\n        />\n      );\n    }, [isReconnecting, renderElement, showLoadingIndicator]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    const attendeeRoleString = props.strings?.attendeeRole;\n\n    const formatDisplayName = (displayName: string, role: string): string => {\n      if (displayName && role) {\n        return _formatString(displayName, { AttendeeRole: role });\n      }\n      return displayName;\n    };\n    const displayName = formatDisplayName(\n      remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder,\n      attendeeRoleString\n    );\n    const formatInitialsName = (): string | undefined => {\n      if (remoteParticipant.displayName && attendeeRoleString) {\n        return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return remoteParticipant.displayName;\n    };\n\n    const reactionOverlay = reactionResources && (\n      <MeetingReactionOverlay\n        overlayMode=\"grid-tiles\"\n        reaction={remoteParticipant.reaction}\n        reactionResources={reactionResources}\n      />\n    );\n\n    return (\n      <Stack\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={formatInitialsName() ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          raisedHand={remoteParticipant.raisedHand}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          isPinned={props.isPinned}\n          onLongTouch={\n            props.onLongTouch\n              ? props.onLongTouch\n              : () =>\n                  setDrawerMenuItemProps(\n                    convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () =>\n                      setDrawerMenuItemProps([])\n                    )\n                  )\n          }\n          isSpotlighted={isSpotlighted}\n          overlay={reactionOverlay}\n          mediaAccess={remoteParticipant.mediaAccess}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\n  }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoGalleryRemoteParticipant, VideoStreamOptions, ViewScalingMode } from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport { RemoteVideoStreamLifecycleMaintainerProps, useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo((props: {\n  userId: string;\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  isAvailable?: boolean;\n  isReceiving?: boolean;\n  streamId?: number;\n  isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n  renderElement?: HTMLElement;\n  remoteVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMuteIndicator?: boolean;\n  showLabel?: boolean;\n  alwaysShowLabelBackground?: boolean;\n  personaMinSize?: number;\n  strings: VideoGalleryStrings;\n  participantState?: ParticipantState;\n  menuKind?: 'contextual' | 'drawer';\n  drawerMenuHostId?: string;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  isPinned?: boolean;\n  spotlightedParticipantUserIds?: string[];\n  isSpotlighted?: boolean;\n  onStartSpotlight?: (userIds: string[]) => void;\n  onStopSpotlight?: (userIds: string[]) => void;\n  maxParticipantsToSpotlight?: number;\n  onMuteParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  reactionResources?: ReactionResources;\n  onLongTouch?: (() => void) | undefined;\n  onForbidAudio?: (userIds: string[]) => Promise<void>;\n  onPermitAudio?: (userIds: string[]) => Promise<void>;\n  onForbidVideo?: (userIds: string[]) => Promise<void>;\n  onPermitVideo?: (userIds: string[]) => Promise<void>;\n}) => {\n  const {\n    isAvailable,\n    isReceiving = true,\n    // default to true to prevent any breaking change\n    isScreenSharingOn,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    renderElement,\n    userId,\n    onRenderAvatar,\n    showMuteIndicator,\n    remoteParticipant,\n    participantState,\n    menuKind,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    spotlightedParticipantUserIds,\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    onMuteParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    strings,\n    reactionResources,\n    streamId,\n    onForbidAudio,\n    onPermitAudio,\n    onForbidVideo,\n    onPermitVideo\n  } = props;\n  const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: remoteVideoViewOptions?.isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable: isAvailable,\n    isStreamReceiving: isReceiving,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteParticipantId: userId,\n    renderElementExists: !!renderElement,\n    scalingMode: remoteVideoViewOptions?.scalingMode,\n    streamId,\n    isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true\n  }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions?.isMirrored, remoteVideoViewOptions?.scalingMode, renderElement, userId, streamId, remoteParticipant.mediaAccess]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n  const contextualMenuProps = useVideoTileContextualMenuProps({\n    participant: remoteParticipant,\n    view: createVideoStreamResult?.view,\n    strings: {\n      ...props.strings\n    },\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    spotlightedParticipantUserIds,\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    onMuteParticipant,\n    onForbidAudio,\n    onPermitAudio,\n    onForbidVideo,\n    onPermitVideo\n  });\n  const videoTileContextualMenuProps = useMemo(() => {\n    if (menuKind !== 'contextual' || !contextualMenuProps) {\n      return {};\n    }\n    return {\n      contextualMenu: contextualMenuProps\n    };\n  }, [contextualMenuProps, menuKind]);\n  const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n  const isReconnecting = participantState === 'Reconnecting';\n  const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if ((!renderElement || !renderElement.childElementCount) && !isReconnecting) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <StreamMedia videoStreamElement={renderElement ?? null} loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'} />;\n  }, [isReconnecting, renderElement, showLoadingIndicator]);\n  const onKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));\n    }\n  }, [setDrawerMenuItemProps, contextualMenuProps]);\n  const attendeeRoleString = props.strings?.attendeeRole;\n  const formatDisplayName = (displayName: string, role: string): string => {\n    if (displayName && role) {\n      return _formatString(displayName, {\n        AttendeeRole: role\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder, attendeeRoleString);\n  const formatInitialsName = (): string | undefined => {\n    if (remoteParticipant.displayName && attendeeRoleString) {\n      return _formatString(remoteParticipant.displayName, {\n        AttendeeRole: attendeeRoleString\n      });\n    }\n    return remoteParticipant.displayName;\n  };\n  const reactionOverlay = reactionResources && <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={remoteParticipant.reaction} reactionResources={reactionResources} />;\n  return <Stack tabIndex={menuKind === 'drawer' ? 0 : undefined} onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined} style={remoteVideoTileWrapperStyle}>\n        <VideoTile key={userId} userId={userId} initialsName={formatInitialsName() ?? ''} renderElement={renderVideoStreamElement} displayName={displayName} onRenderPlaceholder={onRenderAvatar} isMuted={remoteParticipant.isMuted} raisedHand={remoteParticipant.raisedHand} isSpeaking={remoteParticipant.isSpeaking} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} showLabel={props.showLabel} alwaysShowLabelBackground={props.alwaysShowLabelBackground} participantState={participantState} {...videoTileContextualMenuProps} isPinned={props.isPinned} onLongTouch={props.onLongTouch ? props.onLongTouch : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])))} isSpotlighted={isSpotlighted} overlay={reactionOverlay} mediaAccess={remoteParticipant.mediaAccess} />\n        {drawerMenuItemProps.length > 0 && <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} heading={displayName} />\n            </Stack>\n          </Layer>}\n      </Stack>;\n});\nconst convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps?: IContextualMenuProps, onLightDismiss?: () => void): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map(item => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};"]}

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

@@ -26,7 +26,7 @@ export const ResponsiveHorizontalGallery = (props) => {
         buttonWidthRem
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return (React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
-        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
+    return React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children));
 };
 //# sourceMappingURL=ResponsiveHorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,IAAI,4BAA4B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IACnG,IAAI,MAAM,CAAC,KAAK,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC/C,4BAA4B,GAAG,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,4BAA4B;QAC5C,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAE3C,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n  let containerWidthWithoutPadding = Math.max((containerWidth ?? 0) - leftPadding - rightPadding, 0);\n  if (Number.isNaN(containerWidthWithoutPadding)) {\n    containerWidthWithoutPadding = 0;\n  }\n\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: containerWidthWithoutPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n\n  return (\n    <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery\n        childrenPerPage={childrenPerPage}\n        styles={props.horizontalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EACJ,WAAW,EACX,cAAc,GAAG,CAAC,EAClB,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,IAAI,4BAA4B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IACnG,IAAI,MAAM,CAAC,KAAK,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC/C,4BAA4B,GAAG,CAAC,CAAC;IACnC,CAAC;IACD,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,4BAA4B;QAC5C,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnH,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,oBAAoB,IACnI,KAAK,CAAC,QAAQ,CACG,CAChB,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const {\n    gapWidthRem,\n    buttonWidthRem = 0,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n  let containerWidthWithoutPadding = Math.max((containerWidth ?? 0) - leftPadding - rightPadding, 0);\n  if (Number.isNaN(containerWidthWithoutPadding)) {\n    containerWidthWithoutPadding = 0;\n  }\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: containerWidthWithoutPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery childrenPerPage={childrenPerPage} styles={props.horizontalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n        {props.children}\n      </HorizontalGallery>\n    </div>;\n};"]}

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

@@ -31,7 +31,7 @@ export const ResponsiveVerticalGallery = (props) => {
         isShort: isShort !== null && isShort !== void 0 ? isShort : false
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return (React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
-        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
+    return React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
+        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children));
 };
 //# sourceMappingURL=ResponsiveVerticalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,IAAI,6BAA6B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa,EAAE,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAChD,6BAA6B,GAAG,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,6BAA6B;QAC9C,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,CACL,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACtG,oBAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,qBAAqB,EAC7B,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n  let containerHeightWithoutPadding = Math.max((containerHeight ?? 0) - topPadding - bottomPadding, 0);\n  if (Number.isNaN(containerHeightWithoutPadding)) {\n    containerHeightWithoutPadding = 0;\n  }\n\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: containerHeightWithoutPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return (\n    <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery\n        childrenPerPage={childrenPerPage}\n        styles={verticalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {children}\n      </VerticalGallery>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,IAAI,6BAA6B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa,EAAE,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAChD,6BAA6B,GAAG,CAAC,CAAC;IACpC,CAAC;IACD,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,6BAA6B;QAC9C,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QAC3G,oBAAC,eAAe,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,oBAAoB,IACzH,QAAQ,CACO,CACd,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n  let containerHeightWithoutPadding = Math.max((containerHeight ?? 0) - topPadding - bottomPadding, 0);\n  if (Number.isNaN(containerHeightWithoutPadding)) {\n    containerHeightWithoutPadding = 0;\n  }\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: containerHeightWithoutPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery childrenPerPage={childrenPerPage} styles={verticalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n        {children}\n      </VerticalGallery>\n    </div>;\n};"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,qBAA0C;IAC/E,YACE,QAA+F,EAC/F,SAAqB;QAErB,KAAK,CAAC;YACJ;;;;;eAKG;YACH,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA+B,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;gBACzF,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACxD,CAAC;YACD;;eAEG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,SAAS,EAAE,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';\nimport type { IContextualMenuItem } from '@fluentui/react/';\n\n/**\n * Represents a plugin that adds a context menu to the rich text editor.\n */\nexport class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {\n  constructor(\n    onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void,\n    onDismiss: () => void\n  ) {\n    super({\n      /**\n       * Renders the context menu in the specified container with the provided items.\n       * @param container - The container element where the context menu should be rendered.\n       * @param items - The items to be displayed in the context menu.\n       * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.\n       */\n      render: (container, items, onDismissCallback) => {\n        const filteredItems = items.filter((item): item is IContextualMenuItem => item !== null);\n        onRender(container, filteredItems, onDismissCallback);\n      },\n      /**\n       * Dismisses the context menu.\n       */\n      dismiss: () => {\n        onDismiss();\n      }\n    });\n  }\n}\n"]}
+{"version":3,"file":"ContextMenuPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,qBAA0C;IAC/E,YAAY,QAA+F,EAAE,SAAqB;QAChI,KAAK,CAAC;YACJ;;;;;eAKG;YACH,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA+B,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;gBACzF,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACxD,CAAC;YACD;;eAEG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,SAAS,EAAE,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';\nimport type { IContextualMenuItem } from '@fluentui/react/';\n\n/**\n * Represents a plugin that adds a context menu to the rich text editor.\n */\nexport class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {\n  constructor(onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void, onDismiss: () => void) {\n    super({\n      /**\n       * Renders the context menu in the specified container with the provided items.\n       * @param container - The container element where the context menu should be rendered.\n       * @param items - The items to be displayed in the context menu.\n       * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.\n       */\n      render: (container, items, onDismissCallback) => {\n        const filteredItems = items.filter((item): item is IContextualMenuItem => item !== null);\n        onRender(container, filteredItems, onDismissCallback);\n      },\n      /**\n       * Dismisses the context menu.\n       */\n      dismiss: () => {\n        onDismiss();\n      }\n    });\n  }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js

@@ -7,14 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-/* @conditional-compile-remove(rich-text-editor) */
 import { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';
 import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from "../../../../../acs-ui-common/src";
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { v1 as generateGUID } from 'uuid';
 /**
  * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
@@ -22,20 +18,15 @@ import { v1 as generateGUID } from 'uuid';
 export default class CopyPastePlugin {
     constructor() {
         this.editor = null;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.imageBase64DataMap = {};
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.handleInlineImage = (event) => {
             if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {
-                event.fragment.querySelectorAll('img').forEach((image) => {
+                event.fragment.querySelectorAll('img').forEach(image => {
                     // Assign a unique id to the image element so Contosos can identify the image element.
                     // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images
                     image.id = generateGUID();
                     const clipboardImage = event.clipboardData.image;
-                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) ||
-                        (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) ||
-                        image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||
-                        '';
+                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) || (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) || image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) || '';
                     // If the image src is an external url, call the onInsertInlineImage callback with the url.
                     let imageUrl = image.src;
                     if (image.src.startsWith('data:image/')) {
@@ -60,7 +51,6 @@ export default class CopyPastePlugin {
     }
     dispose() { }
     onPluginEvent(event) {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (event.eventType === PluginEventType.BeforeCutCopy) {
             event.clonedRoot.querySelectorAll('img').forEach((image) => __awaiter(this, void 0, void 0, function* () {
                 if (image.src.startsWith('blob:')) {
@@ -68,15 +58,13 @@ export default class CopyPastePlugin {
                     image.src = base64Data || image.src;
                 }
             }));
-        }
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
+        } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
         if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {
-            removeImageTags({ content: event.fragment });
+            removeImageTags({
+                content: event.fragment
+            });
         }
-        handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
+        handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
         if (this.onInsertInlineImage) {
             this.handleInlineImage(event);
         }
@@ -90,12 +78,11 @@ export default class CopyPastePlugin {
  * @internal
  * Exported only for unit testing
  */
-export const handleBeforePasteEvent = (event, 
-/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
+export const handleBeforePasteEvent = (event, onPaste) => {
     if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onPaste === null || onPaste === void 0 ? void 0 : onPaste({ content: event.fragment });
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onPaste === null || onPaste === void 0 ? void 0 : onPaste({
+            content: event.fragment
+        });
         return;
     }
 };
@@ -105,7 +92,6 @@ export const handleBeforePasteEvent = (event,
  */
 export const scrollToBottomAfterContentPaste = (event) => {
     if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
-        /* @conditional-compile-remove(rich-text-editor) */
         scrollToBottomRichTextEditor();
     }
 };

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\n/* @conditional-compile-remove(rich-text-editor) */\nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { v1 as generateGUID } from 'uuid';\n\n/**\n * CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n */\nexport default class CopyPastePlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  private imageBase64DataMap: Record<string, string> = {};\n\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  private handleInlineImage = (event: PluginEvent): void => {\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n      event.fragment.querySelectorAll('img').forEach((image) => {\n        // Assign a unique id to the image element so Contosos can identify the image element.\n        // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n        image.id = generateGUID();\n\n        const clipboardImage = event.clipboardData.image;\n        const fileName =\n          clipboardImage?.name ||\n          clipboardImage?.type.replace('/', '.') ||\n          image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||\n          '';\n        // If the image src is an external url, call the onInsertInlineImage callback with the url.\n        let imageUrl = image.src;\n        if (image.src.startsWith('data:image/')) {\n          this.imageBase64DataMap[image.id] = image.src;\n\n          const blobImage = _base64ToBlob(image.src);\n          imageUrl = URL.createObjectURL(blobImage);\n        }\n\n        image.src = imageUrl;\n        image.alt = image.alt || 'image';\n\n        image.dataset.imageFileName = fileName;\n\n        const imageAttributes = getInlineImageAttributes(image);\n\n        this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n      });\n    }\n  };\n\n  onPluginEvent(event: PluginEvent): void {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (event.eventType === PluginEventType.BeforeCutCopy) {\n      event.clonedRoot.querySelectorAll('img').forEach(async (image) => {\n        if (image.src.startsWith('blob:')) {\n          const base64Data = this.imageBase64DataMap[image.id];\n          image.src = base64Data || image.src;\n        }\n      });\n    }\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n      removeImageTags({ content: event.fragment });\n    }\n\n    handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n    if (this.onInsertInlineImage) {\n      this.handleInlineImage(event);\n    }\n\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event);\n    }\n  }\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const handleBeforePasteEvent = (\n  event: PluginEvent,\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void\n): void => {\n  if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste?.({ content: event.fragment });\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    return;\n  }\n};\n\n/**\n * Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    /* @conditional-compile-remove(rich-text-editor) */\n    scrollToBottomRichTextEditor();\n  }\n};\n"]}
+{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\nimport { v1 as generateGUID } from 'uuid';\n\n/**\n * CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n */\nexport default class CopyPastePlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  private imageBase64DataMap: Record<string, string> = {};\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n  dispose(): void {}\n  private handleInlineImage = (event: PluginEvent): void => {\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n      event.fragment.querySelectorAll('img').forEach(image => {\n        // Assign a unique id to the image element so Contosos can identify the image element.\n        // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n        image.id = generateGUID();\n        const clipboardImage = event.clipboardData.image;\n        const fileName = clipboardImage?.name || clipboardImage?.type.replace('/', '.') || image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) || '';\n        // If the image src is an external url, call the onInsertInlineImage callback with the url.\n        let imageUrl = image.src;\n        if (image.src.startsWith('data:image/')) {\n          this.imageBase64DataMap[image.id] = image.src;\n          const blobImage = _base64ToBlob(image.src);\n          imageUrl = URL.createObjectURL(blobImage);\n        }\n        image.src = imageUrl;\n        image.alt = image.alt || 'image';\n        image.dataset.imageFileName = fileName;\n        const imageAttributes = getInlineImageAttributes(image);\n        this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n      });\n    }\n  };\n  onPluginEvent(event: PluginEvent): void {\n    if (event.eventType === PluginEventType.BeforeCutCopy) {\n      event.clonedRoot.querySelectorAll('img').forEach(async image => {\n        if (image.src.startsWith('blob:')) {\n          const base64Data = this.imageBase64DataMap[image.id];\n          image.src = base64Data || image.src;\n        }\n      });\n    } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n      removeImageTags({\n        content: event.fragment\n      });\n    }\n    handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n    if (this.onInsertInlineImage) {\n      this.handleInlineImage(event);\n    }\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event);\n    }\n  }\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const handleBeforePasteEvent = (event: PluginEvent, onPaste?: (event: {\n  content: DocumentFragment;\n}) => void): void => {\n  if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n    onPaste?.({\n      content: event.fragment\n    });\n    return;\n  }\n};\n\n/**\n * Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    scrollToBottomRichTextEditor();\n  }\n};"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js

@@ -22,7 +22,9 @@ export class KeyboardInputPlugin {
     initialize(editor) {
         this.editor = editor;
         this.disposer = this.editor.attachDomEvent({
-            compositionupdate: { beforeDispatch: this.onCompositionUpdate }
+            compositionupdate: {
+                beforeDispatch: this.onCompositionUpdate
+            }
         });
     }
     dispose() {

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;QAC3D,wBAAmB,GAAyB,IAAI,CAAC;IA8BnD,CAAC;IA5BC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD;;;OAGG;IACH,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACzC,iBAAiB,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE;SAChE,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  private disposer: (() => void) | null = null;\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onKeyDown?: ((event: KeyboardEvent) => void) | null = null;\n  onCompositionUpdate?: (() => void) | null = null;\n\n  getName(): string {\n    return 'KeyboardInputPlugin';\n  }\n  /**\n   * Initialize this plugin\n   * @param editor The editor instance\n   */\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.disposer = this.editor.attachDomEvent({\n      compositionupdate: { beforeDispatch: this.onCompositionUpdate }\n    });\n  }\n\n  dispose(): void {\n    this.editor = null;\n\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n  }\n\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n      this.onKeyDown(event.rawEvent);\n    }\n  }\n}\n"]}
+{"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;QAC3D,wBAAmB,GAAyB,IAAI,CAAC;IA4BnD,CAAC;IA3BC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD;;;OAGG;IACH,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACzC,iBAAiB,EAAE;gBACjB,cAAc,EAAE,IAAI,CAAC,mBAAmB;aACzC;SACF,CAAC,CAAC;IACL,CAAC;IACD,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IACD,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  private disposer: (() => void) | null = null;\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onKeyDown?: ((event: KeyboardEvent) => void) | null = null;\n  onCompositionUpdate?: (() => void) | null = null;\n  getName(): string {\n    return 'KeyboardInputPlugin';\n  }\n  /**\n   * Initialize this plugin\n   * @param editor The editor instance\n   */\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.disposer = this.editor.attachDomEvent({\n      compositionupdate: {\n        beforeDispatch: this.onCompositionUpdate\n      }\n    });\n  }\n  dispose(): void {\n    this.editor = null;\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n  }\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n      this.onKeyDown(event.rawEvent);\n    }\n  }\n}"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IAiC7C,CAAC;IA/BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IAES,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n  private isPlaceholderShown: boolean = false;\n  private editorValue: IEditor | null = null;\n\n  updatePlaceholder(placeholder: string): void {\n    this.watermark = placeholder;\n    // hide and show the placeholder to show the latest one\n    // this needs to be done only if the placeholder is currently shown\n    if (this.editorValue && this.isPlaceholderShown) {\n      this.hide(this.editorValue);\n      this.show(this.editorValue);\n    }\n  }\n  initialize(editor: IEditor): void {\n    this.editorValue = editor;\n    super.initialize(editor);\n\n    // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n    this.hide(this.editorValue);\n    this.show(this.editorValue);\n  }\n\n  dispose(): void {\n    this.editorValue = null;\n    super.dispose();\n  }\n\n  protected show(editor: IEditor): void {\n    super.show(editor);\n    this.isPlaceholderShown = true;\n  }\n  protected hide(editor: IEditor): void {\n    super.hide(editor);\n    this.isPlaceholderShown = false;\n  }\n}\n"]}
+{"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA8B7C,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n  private isPlaceholderShown: boolean = false;\n  private editorValue: IEditor | null = null;\n  updatePlaceholder(placeholder: string): void {\n    this.watermark = placeholder;\n    // hide and show the placeholder to show the latest one\n    // this needs to be done only if the placeholder is currently shown\n    if (this.editorValue && this.isPlaceholderShown) {\n      this.hide(this.editorValue);\n      this.show(this.editorValue);\n    }\n  }\n  initialize(editor: IEditor): void {\n    this.editorValue = editor;\n    super.initialize(editor);\n\n    // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n    this.hide(this.editorValue);\n    this.show(this.editorValue);\n  }\n  dispose(): void {\n    this.editorValue = null;\n    super.dispose();\n  }\n  protected show(editor: IEditor): void {\n    super.show(editor);\n    this.isPlaceholderShown = true;\n  }\n  protected hide(editor: IEditor): void {\n    super.hide(editor);\n    this.isPlaceholderShown = false;\n  }\n}"]}