@azure/communication-react 1.20.0-alpha-202410090016 → 1.20.0-alpha-202410110016

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/communication-react.d.ts +3 -25
  2. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-CJavB0fv.js → ChatMessageComponentAsRichTextEditBox-B1i-YRoN.js} +2 -2
  3. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-CJavB0fv.js.map → ChatMessageComponentAsRichTextEditBox-B1i-YRoN.js.map} +1 -1
  4. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-DopZRsd3.js → RichTextSendBoxWrapper-D5odi2AE.js} +2 -2
  5. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-DopZRsd3.js.map → RichTextSendBoxWrapper-D5odi2AE.js.map} +1 -1
  6. package/dist/dist-cjs/communication-react/{index-X1fv8B3Q.js → index-BYN3MK0Z.js} +192 -135
  7. package/dist/dist-cjs/communication-react/index-BYN3MK0Z.js.map +1 -0
  8. package/dist/dist-cjs/communication-react/index.js +1 -1
  9. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  10. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  11. package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.d.ts +1 -1
  12. package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js.map +1 -1
  13. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js +3 -2
  14. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js.map +1 -1
  15. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js +6 -3
  16. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map +1 -1
  17. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +6 -4
  18. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
  19. package/dist/dist-esm/react-components/src/components/GridLayout.js +3 -0
  20. package/dist/dist-esm/react-components/src/components/GridLayout.js.map +1 -1
  21. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +4 -5
  22. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
  23. package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js +3 -0
  24. package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js.map +1 -1
  25. package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js +2 -1
  26. package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map +1 -1
  27. package/dist/dist-esm/react-components/src/components/MessageThread.js +3 -3
  28. package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
  29. package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts +0 -9
  30. package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map +1 -1
  31. package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js +2 -1
  32. package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js.map +1 -1
  33. package/dist/dist-esm/react-components/src/components/ParticipantItem.js +1 -1
  34. package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
  35. package/dist/dist-esm/react-components/src/components/ReactionButton.js +27 -35
  36. package/dist/dist-esm/react-components/src/components/ReactionButton.js.map +1 -1
  37. package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js +9 -3
  38. package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js.map +1 -1
  39. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js +1 -1
  40. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js.map +1 -1
  41. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js +10 -11
  42. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js.map +1 -1
  43. package/dist/dist-esm/react-components/src/components/VerticalGallery.js +2 -1
  44. package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -1
  45. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +3 -3
  46. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -1
  47. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +6 -2
  48. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -1
  49. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js +5 -4
  50. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js.map +1 -1
  51. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +15 -18
  52. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
  53. package/dist/dist-esm/react-components/src/components/VideoGallery.js +3 -3
  54. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  55. package/dist/dist-esm/react-components/src/components/VideoTile.js +3 -0
  56. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  57. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.d.ts +13 -6
  58. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js +47 -19
  59. package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js.map +1 -1
  60. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.d.ts +0 -6
  61. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js +6 -41
  62. package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js.map +1 -1
  63. package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js +4 -1
  64. package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js.map +1 -1
  65. package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js +3 -0
  66. package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js.map +1 -1
  67. package/dist/dist-esm/react-components/src/components/utils/responsive.js +6 -0
  68. package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
  69. package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map +1 -1
  70. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +0 -1
  71. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
  72. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +0 -5
  73. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
  74. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +3 -1
  75. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
  76. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +0 -4
  77. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
  78. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.d.ts +0 -3
  79. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.js.map +1 -1
  80. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +3 -1
  81. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
  82. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.d.ts +1 -1
  83. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.js +1 -1
  84. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.js.map +1 -1
  85. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.d.ts +1 -1
  86. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.js +1 -1
  87. package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.js.map +1 -1
  88. package/package.json +1 -1
  89. package/dist/dist-cjs/communication-react/index-X1fv8B3Q.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DirectionalHint,\n Icon,\n IconButton,\n IContextualMenuProps,\n IStyle,\n mergeStyles,\n Persona,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n /** Aria label for announcing the remote video tile drawer menu */\n moreOptionsButtonAriaLabel: string;\n /** String for displaying the Ringing of the remote participant */\n participantStateRinging: string;\n /** String for displaying the Hold state of the remote participant */\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /**\n * Overlay component responsible for rendering reaction\n */\n overlay?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Show label background on the VideoTile\n * @defaultValue false\n */\n alwaysShowLabelBackground?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n raisedHand?: RaisedHand;\n\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /**\n * Strings to override in the component.\n */\n strings?: VideoTileStrings;\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n /**\n * If true, the video tile will show the spotlighted icon.\n */\n isSpotlighted?: boolean;\n /**\n * Reactions resources' url and metadata.\n */\n reactionResources?: ReactionResources;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n {coinSize && (\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n )}\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\nconst VideoTileMoreOptionsButton = (props: {\n contextualMenu?: IContextualMenuProps;\n canShowContextMenuButton: boolean;\n}): JSX.Element => {\n const locale = useLocale();\n const theme = useTheme();\n const strings = { ...locale.strings.videoTile };\n\n const { contextualMenu, canShowContextMenuButton } = props;\n if (!contextualMenu) {\n return <></>;\n }\n\n const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n ariaLabel={strings?.moreOptionsButtonAriaLabel}\n styles={moreButtonStyles(theme)}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n iconProps={{ iconName: optionsIcon }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n isSpotlighted,\n isPinned,\n onRenderPlaceholder,\n renderElement,\n overlay: reactionOverlay,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n raisedHand,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n contextualMenu\n } = props;\n\n const [isHovered, setIsHovered] = useState<boolean>(false);\n const [isFocused, setIsFocused] = useState<boolean>(false);\n // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n const [personaSize, setPersonaSize] = useState<number>(1);\n\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n const personaCalcSize = Math.min(width, height) / 3;\n // we only want to set the persona size if it has changed\n if (personaCalcSize !== personaSize) {\n setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n }\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [videoTileRef]);\n\n // TODO: Remove after calling sdk fix the keybaord focus\n useEffect(() => {\n // PPTLive stream id is null\n if (videoTileRef.current?.id) {\n return;\n }\n let observer: MutationObserver | undefined;\n if (videoTileRef.current) {\n observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const iframe = document.querySelector('iframe');\n if (iframe) {\n if (!iframe.getAttribute('tabIndex')) {\n iframe.setAttribute('tabIndex', '-1');\n }\n }\n }\n }\n });\n\n observer.observe(videoTileRef.current, { childList: true, subtree: true });\n }\n\n return () => {\n observer?.disconnect();\n };\n }, [displayName, renderElement]);\n\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n const longPressHandlers = useLongPress(useLongPressProps);\n\n const hoverHandlers = useMemo(() => {\n return {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: () => setIsFocused(true),\n onBlur: () => setIsFocused(false)\n };\n }, []);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(disabledVideoHint, {\n borderRadius: theme.effects.roundedCorner4,\n backgroundColor: callingPalette.videoTileLabelBackgroundLight\n });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint,\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = getParticipantStateString(props, locale);\n const canShowContextMenuButton = isHovered || isFocused;\n let raisedHandBackgroundColor = '';\n raisedHandBackgroundColor = callingPalette.raiseHandGold;\n\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4\n },\n (isSpeaking || raisedHand) && {\n '&::after': {\n content: `''`,\n position: 'absolute',\n border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }\n },\n styles?.root\n )}\n {...longPressHandlers}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack\n className={mergeStyles(videoContainerStyles, {\n opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n })}\n >\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n {reactionOverlay}\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n data-ui-id=\"video-tile-display-name\"\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {isSpotlighted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>\n )}\n {isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )}\n <VideoTileMoreOptionsButton\n contextualMenu={contextualMenu}\n canShowContextMenuButton={canShowContextMenuButton}\n />\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n {raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n className={raiseHandContainerStyles(theme, !canShowLabel)}\n >\n <Stack.Item>\n <Text>{raisedHand.raisedHandOrderPosition}</Text>\n </Stack.Item>\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n const strings = { ...locale.strings.videoTile, ...props.strings };\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n};\n\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
1
+ {"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DirectionalHint,\n Icon,\n IconButton,\n IContextualMenuProps,\n IStyle,\n mergeStyles,\n Persona,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n /** Aria label for announcing the remote video tile drawer menu */\n moreOptionsButtonAriaLabel: string;\n /** String for displaying the Ringing of the remote participant */\n participantStateRinging: string;\n /** String for displaying the Hold state of the remote participant */\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /**\n * Overlay component responsible for rendering reaction\n */\n overlay?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Show label background on the VideoTile\n * @defaultValue false\n */\n alwaysShowLabelBackground?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n raisedHand?: RaisedHand;\n\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /**\n * Strings to override in the component.\n */\n strings?: VideoTileStrings;\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n /**\n * If true, the video tile will show the spotlighted icon.\n */\n isSpotlighted?: boolean;\n /**\n * Reactions resources' url and metadata.\n */\n reactionResources?: ReactionResources;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n {coinSize && (\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n )}\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\nconst VideoTileMoreOptionsButton = (props: {\n contextualMenu?: IContextualMenuProps;\n canShowContextMenuButton: boolean;\n}): JSX.Element => {\n const locale = useLocale();\n const theme = useTheme();\n const strings = { ...locale.strings.videoTile };\n\n const { contextualMenu, canShowContextMenuButton } = props;\n if (!contextualMenu) {\n return <></>;\n }\n\n const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n ariaLabel={strings?.moreOptionsButtonAriaLabel}\n styles={moreButtonStyles(theme)}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n iconProps={{ iconName: optionsIcon }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n isSpotlighted,\n isPinned,\n onRenderPlaceholder,\n renderElement,\n overlay: reactionOverlay,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n raisedHand,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n contextualMenu\n } = props;\n\n const [isHovered, setIsHovered] = useState<boolean>(false);\n const [isFocused, setIsFocused] = useState<boolean>(false);\n // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n const [personaSize, setPersonaSize] = useState<number>(1);\n\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n if (!entries[0]) {\n return;\n }\n const { width, height } = entries[0].contentRect;\n const personaCalcSize = Math.min(width, height) / 3;\n // we only want to set the persona size if it has changed\n if (personaCalcSize !== personaSize) {\n setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n }\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [videoTileRef]);\n\n // TODO: Remove after calling sdk fix the keybaord focus\n useEffect(() => {\n // PPTLive stream id is null\n if (videoTileRef.current?.id) {\n return;\n }\n let observer: MutationObserver | undefined;\n if (videoTileRef.current) {\n observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const iframe = document.querySelector('iframe');\n if (iframe) {\n if (!iframe.getAttribute('tabIndex')) {\n iframe.setAttribute('tabIndex', '-1');\n }\n }\n }\n }\n });\n\n observer.observe(videoTileRef.current, { childList: true, subtree: true });\n }\n\n return () => {\n observer?.disconnect();\n };\n }, [displayName, renderElement]);\n\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n const longPressHandlers = useLongPress(useLongPressProps);\n\n const hoverHandlers = useMemo(() => {\n return {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: () => setIsFocused(true),\n onBlur: () => setIsFocused(false)\n };\n }, []);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(disabledVideoHint, {\n borderRadius: theme.effects.roundedCorner4,\n backgroundColor: callingPalette.videoTileLabelBackgroundLight\n });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint,\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = getParticipantStateString(props, locale);\n const canShowContextMenuButton = isHovered || isFocused;\n let raisedHandBackgroundColor = '';\n raisedHandBackgroundColor = callingPalette.raiseHandGold;\n\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4\n },\n (isSpeaking || raisedHand) && {\n '&::after': {\n content: `''`,\n position: 'absolute',\n border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }\n },\n styles?.root\n )}\n {...longPressHandlers}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack\n className={mergeStyles(videoContainerStyles, {\n opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n })}\n >\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n {reactionOverlay}\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n data-ui-id=\"video-tile-display-name\"\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {isSpotlighted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>\n )}\n {isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )}\n <VideoTileMoreOptionsButton\n contextualMenu={contextualMenu}\n canShowContextMenuButton={canShowContextMenuButton}\n />\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n {raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n className={raiseHandContainerStyles(theme, !canShowLabel)}\n >\n <Stack.Item>\n <Text>{raisedHand.raisedHandOrderPosition}</Text>\n </Stack.Item>\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n const strings = { ...locale.strings.videoTile, ...props.strings };\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n};\n\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
@@ -1,4 +1,4 @@
1
- import { ITooltipHostStyles, IStyle } from '@fluentui/react';
1
+ import { ITooltipHostStyles, IStyle, IButtonStyles, Theme, ICalloutContentStyles } from '@fluentui/react';
2
2
  import React from 'react';
3
3
  /**
4
4
  * @private
@@ -11,11 +11,6 @@ export declare const playFrames: () => string;
11
11
  * @private
12
12
  */
13
13
  export declare const emojiStyles: (backgroundImage: string, frameCount: number) => IStyle;
14
- /**
15
- *
16
- * @private
17
- */
18
- export declare const reactionEmojiMenuStyles: () => IStyle;
19
14
  /**
20
15
  *
21
16
  * @private
@@ -33,4 +28,16 @@ export declare const mobileViewMenuItemStyle: () => React.CSSProperties;
33
28
  * @private
34
29
  */
35
30
  export declare const mobileViewEmojiStyles: (backgroundImage: string, animationPlayState: string) => React.CSSProperties;
31
+ /**
32
+ * @private
33
+ */
34
+ export declare const reactionButtonStyles: (theme: Theme) => IButtonStyles;
35
+ /**
36
+ * @private
37
+ */
38
+ export declare const reactionItemButtonStyles: IButtonStyles;
39
+ /**
40
+ * @private
41
+ */
42
+ export declare const reactionButtonCalloutStyles: ICalloutContentStyles;
36
43
  //# sourceMappingURL=ReactionButton.styles.d.ts.map
@@ -31,6 +31,7 @@ export const emojiStyles = (backgroundImage, frameCount) => {
31
31
  alignItems: 'center',
32
32
  backgroundSize: `2.75rem 133.875rem`,
33
33
  transition: 'opacity 2s',
34
+ minWidth: '2.75rem',
34
35
  backgroundColor: 'transparent',
35
36
  transform: 'scale(0.6)',
36
37
  ':hover': {
@@ -46,24 +47,6 @@ export const emojiStyles = (backgroundImage, frameCount) => {
46
47
  }
47
48
  };
48
49
  };
49
- /**
50
- *
51
- * @private
52
- */
53
- export const reactionEmojiMenuStyles = () => {
54
- return {
55
- display: 'flex',
56
- justifyContent: 'center',
57
- alignItems: 'center',
58
- flexDirection: 'row',
59
- width: '13.75rem',
60
- height: '2.625rem',
61
- // Ensure that when one emoji is hovered, the other emojis are partially faded out
62
- ':hover > :not(:hover)': {
63
- opacity: '0.5'
64
- }
65
- };
66
- };
67
50
  /**
68
51
  *
69
52
  * @private
@@ -74,7 +57,7 @@ export const reactionToolTipHostStyle = () => {
74
57
  display: 'flex',
75
58
  flexDirection: 'column',
76
59
  height: '100%',
77
- width: '100%'
60
+ width: '2.75rem'
78
61
  }
79
62
  };
80
63
  };
@@ -120,4 +103,49 @@ export const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
120
103
  transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
121
104
  };
122
105
  };
106
+ /**
107
+ * @private
108
+ */
109
+ export const reactionButtonStyles = (theme) => ({
110
+ rootChecked: {
111
+ background: theme.palette.themePrimary,
112
+ color: theme.palette.white
113
+ },
114
+ rootCheckedHovered: {
115
+ background: theme.palette.themePrimary,
116
+ color: theme.palette.white
117
+ },
118
+ labelChecked: { color: theme.palette.white }
119
+ });
120
+ /**
121
+ * @private
122
+ */
123
+ export const reactionItemButtonStyles = {
124
+ root: {
125
+ border: 'none',
126
+ height: '2.75rem',
127
+ width: '2.75rem'
128
+ }
129
+ };
130
+ /**
131
+ * @private
132
+ */
133
+ export const reactionButtonCalloutStyles = {
134
+ container: {},
135
+ root: {},
136
+ beak: {},
137
+ beakCurtain: {},
138
+ calloutMain: {
139
+ display: 'flex',
140
+ justifyContent: 'center',
141
+ alignItems: 'center',
142
+ flexDirection: 'row',
143
+ width: '13.75rem',
144
+ height: '2.625rem',
145
+ // Ensure that when one emoji is hovered, the other emojis are partially faded out
146
+ ':hover > :not(:hover)': {
147
+ opacity: '0.5'
148
+ }
149
+ }
150
+ };
123
151
  //# sourceMappingURL=ReactionButton.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ITooltipHostStyles, keyframes, memoizeFunction, IStyle } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n keyframes({\n from: {\n backgroundPosition: '0px 8568px'\n },\n to: {\n backgroundPosition: '0px 0px'\n }\n })\n);\n\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, frameCount: number): IStyle => {\n const imageResourceUrl = `url(${backgroundImage})`;\n const steps = frameCount ?? 51;\n return {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '100%',\n backgroundImage: imageResourceUrl,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundSize: `2.75rem 133.875rem`,\n transition: 'opacity 2s',\n backgroundColor: 'transparent',\n transform: 'scale(0.6)',\n ':hover': {\n transform: 'scale(0.8)',\n animationName: playFrames(),\n animationDuration: '8.12s',\n animationTimingFunction: `steps(${steps})`,\n animationIterationCount: 'infinite',\n backgroundColor: 'transparent'\n },\n ':active': {\n backgroundColor: 'transparent'\n }\n };\n};\n\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): IStyle => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n width: '13.75rem',\n height: '2.625rem',\n\n // Ensure that when one emoji is hovered, the other emojis are partially faded out\n ':hover > :not(:hover)': {\n opacity: '0.5'\n }\n };\n};\n\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n return {\n root: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '100%'\n }\n };\n};\n\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n return {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row',\n width: '100%',\n height: '2.625rem'\n };\n};\n\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n const imageResourceUrl = `url(${backgroundImage})`;\n return {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '2.75rem',\n backgroundImage: imageResourceUrl,\n animationName: playFrames(),\n animationDuration: '8.12s',\n animationTimingFunction: `steps(102)`,\n animationPlayState: animationPlayState,\n animationIterationCount: 'infinite',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundPosition: 'center',\n backgroundSize: `2.75rem 133.875rem`,\n transition: 'opacity 2s',\n backgroundColor: 'transparent',\n transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n };\n};\n"]}
1
+ {"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ITooltipHostStyles,\n keyframes,\n memoizeFunction,\n IStyle,\n IButtonStyles,\n Theme,\n ICalloutContentStyles\n} from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n keyframes({\n from: {\n backgroundPosition: '0px 8568px'\n },\n to: {\n backgroundPosition: '0px 0px'\n }\n })\n);\n\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, frameCount: number): IStyle => {\n const imageResourceUrl = `url(${backgroundImage})`;\n const steps = frameCount ?? 51;\n return {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '100%',\n backgroundImage: imageResourceUrl,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundSize: `2.75rem 133.875rem`,\n transition: 'opacity 2s',\n minWidth: '2.75rem',\n backgroundColor: 'transparent',\n transform: 'scale(0.6)',\n ':hover': {\n transform: 'scale(0.8)',\n animationName: playFrames(),\n animationDuration: '8.12s',\n animationTimingFunction: `steps(${steps})`,\n animationIterationCount: 'infinite',\n backgroundColor: 'transparent'\n },\n ':active': {\n backgroundColor: 'transparent'\n }\n };\n};\n\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n return {\n root: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '2.75rem'\n }\n };\n};\n\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n return {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row',\n width: '100%',\n height: '2.625rem'\n };\n};\n\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n const imageResourceUrl = `url(${backgroundImage})`;\n return {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '2.75rem',\n backgroundImage: imageResourceUrl,\n animationName: playFrames(),\n animationDuration: '8.12s',\n animationTimingFunction: `steps(102)`,\n animationPlayState: animationPlayState,\n animationIterationCount: 'infinite',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundPosition: 'center',\n backgroundSize: `2.75rem 133.875rem`,\n transition: 'opacity 2s',\n backgroundColor: 'transparent',\n transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n };\n};\n/**\n * @private\n */\nexport const reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: theme.palette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: theme.palette.white\n },\n labelChecked: { color: theme.palette.white }\n});\n\n/**\n * @private\n */\nexport const reactionItemButtonStyles: IButtonStyles = {\n root: {\n border: 'none',\n height: '2.75rem',\n width: '2.75rem'\n }\n};\n\n/**\n * @private\n */\nexport const reactionButtonCalloutStyles: ICalloutContentStyles = {\n container: {},\n root: {},\n beak: {},\n beakCurtain: {},\n calloutMain: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n width: '13.75rem',\n height: '2.625rem',\n // Ensure that when one emoji is hovered, the other emojis are partially faded out\n ':hover > :not(:hover)': {\n opacity: '0.5'\n }\n }\n};\n"]}
@@ -38,12 +38,6 @@ export interface IReactionStyleBucket {
38
38
  * @private
39
39
  */
40
40
  export declare function getReactionStyleBucket(): IReactionStyleBucket;
41
- /**
42
- * Return a style bucket for burst scenario
43
- * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.
44
- * @private
45
- */
46
- export declare function getReactionBurstStyleBucket(): IReactionStyleBucket;
47
41
  /**
48
42
  * @private
49
43
  */
@@ -106,36 +106,11 @@ function scaleStartPos(index) {
106
106
  * It is for the ease of testing and implementation.
107
107
  * @private
108
108
  */
109
- const ReactionStyleBuckets = [
110
- {
111
- sizeScale: 0.9,
112
- heightMaxScale: 0.7 * 0.95,
113
- opacityMax: 0.9
114
- }
115
- ];
116
- /**
117
- * @private
118
- */
119
- const ReactionBurstStyleBuckets = [
120
- {
121
- sizeScale: 0.6,
122
- opacityMax: 0.75,
123
- heightMaxScale: 0.93,
124
- heightMinScale: 0.27
125
- },
126
- {
127
- sizeScale: 0.6,
128
- opacityMax: 0.75,
129
- heightMaxScale: 0.8,
130
- heightMinScale: 0.13
131
- },
132
- {
133
- sizeScale: 0.6,
134
- opacityMax: 0.75,
135
- heightMaxScale: 0.67,
136
- heightMinScale: 0
137
- }
138
- ];
109
+ const ReactionStyleBucket = {
110
+ sizeScale: 0.9,
111
+ heightMaxScale: 0.7 * 0.95,
112
+ opacityMax: 0.9
113
+ };
139
114
  /**
140
115
  * Return a style bucket based on the number of active sprites.
141
116
  * For example, the first three reactions should appear at maximum
@@ -145,17 +120,7 @@ const ReactionBurstStyleBuckets = [
145
120
  export function getReactionStyleBucket() {
146
121
  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.
147
122
  // So we are choosing to use a fixed size for all cases.
148
- const index = 0;
149
- return ReactionStyleBuckets[index];
150
- }
151
- /**
152
- * Return a style bucket for burst scenario
153
- * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.
154
- * @private
155
- */
156
- export function getReactionBurstStyleBucket() {
157
- const index = getRandomInt(0, ReactionBurstStyleBuckets.length - 1);
158
- return ReactionBurstStyleBuckets[index];
123
+ return ReactionStyleBucket;
159
124
  }
160
125
  /**
161
126
  * @private
@@ -1 +1 @@
1
- {"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\n/**\n * Generate random float between two numbers, including min and max\n * @private\n */\nexport function getRandomFloat(minValue: number, maxValue: number): number {\n return minValue + Math.random() * (maxValue - minValue);\n}\n\n/**\n * Generate random int between two numbers, including min and max\n * @private\n */\nexport function getRandomInt(minValue: number, maxValue: number): number {\n return Math.floor(getRandomFloat(minValue, maxValue + 1));\n}\n\n/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(\n index: number,\n halfCanvasWidth: number,\n isOriginAtCanvasCenter: boolean = true\n): number {\n const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;\n\n // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.\n // Otherwise, every other reaction goes right, left in alternating directions.\n // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2\n // and subtract 1, which will result in -1 or 1\n const direction = index === 0 ? 0 : (index % 2) * 2 - 1;\n if (direction === 0) {\n return midPointCoordinate;\n }\n\n // Now we get how far the reaction starts from center\n const adjustment = scaleStartPos(index);\n return midPointCoordinate + direction * adjustment * halfCanvasWidth;\n}\n\n/**\n * @private\n */\nexport const reactionOverlayStyle: React.CSSProperties = {\n bottom: '0',\n height: '50%',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%'\n};\n\n/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n return {\n position: 'absolute',\n left: `${reactionXPoint}px`\n };\n}\n\n/**\n * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.\n * @private\n */\nfunction scaleStartPos(index: number): number {\n switch (index) {\n case 1:\n case 2:\n return 0.3;\n case 3:\n case 4:\n return 0.6;\n case 5:\n case 6:\n return 0.9;\n case 7:\n case 8:\n return 0.75;\n case 9:\n case 18:\n return 0.375;\n case 10:\n case 23:\n return 0.525;\n case 11:\n case 16:\n return 0.15;\n case 12:\n case 15:\n return 0.225;\n case 13:\n case 14:\n return 0.075;\n case 17:\n case 24:\n return 0.45;\n case 19:\n case 20:\n return 0.675;\n case 21:\n case 22:\n return 0.825;\n default:\n return 0;\n }\n}\n\n/**\n * We have only one bucket item for presentation style of the reaction animation.\n * We are choosing to keep the array so that, in future, with styles needed to get updated, one\n * can add new styles and apply from here, rather than updating over the same style. Later we can remove\n * the old ones.\n * It is for the ease of testing and implementation.\n * @private\n */\nconst ReactionStyleBuckets: Array<IReactionStyleBucket> = [\n {\n sizeScale: 0.9,\n heightMaxScale: 0.7 * 0.95,\n opacityMax: 0.9\n }\n];\n\n/**\n * @private\n */\nconst ReactionBurstStyleBuckets: Array<IReactionStyleBucket> = [\n {\n sizeScale: 0.6,\n opacityMax: 0.75,\n heightMaxScale: 0.93,\n heightMinScale: 0.27\n },\n {\n sizeScale: 0.6,\n opacityMax: 0.75,\n heightMaxScale: 0.8,\n heightMinScale: 0.13\n },\n {\n sizeScale: 0.6,\n opacityMax: 0.75,\n heightMaxScale: 0.67,\n heightMinScale: 0\n }\n];\n\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n sizeScale: number;\n opacityMax: number;\n heightMaxScale: number;\n heightMinScale?: number;\n}\n\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function getReactionStyleBucket(): IReactionStyleBucket {\n // Having dynamic emoji size on rendering animation impacts performance of the animation itself.\n // So we are choosing to use a fixed size for all cases.\n const index = 0;\n return ReactionStyleBuckets[index];\n}\n\n/**\n * Return a style bucket for burst scenario\n * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.\n * @private\n */\nexport function getReactionBurstStyleBucket(): IReactionStyleBucket {\n const index = getRandomInt(0, ReactionBurstStyleBuckets.length - 1);\n return ReactionBurstStyleBuckets[index];\n}\n\n/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) =>\n keyframes({\n '0%': {\n transform: `translateY(${maxHeight}px)`\n },\n '100%': {\n transform: `translateY(${travelHeight}px)`\n }\n })\n);\n\n/**\n * @private\n */\nexport const moveAnimationStyles = (maxHeight: number, travelHeight: number): React.CSSProperties => {\n return {\n animationName: moveFrames(maxHeight, travelHeight),\n animationFillMode: 'forwards',\n animationDuration: `4.133s`,\n animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'\n };\n};\n\n/**\n * @private\n */\nexport const opacityTransition = memoizeFunction((maxOpacity) =>\n keyframes({\n '0%': {\n opacity: 0\n },\n '31.2%': {\n opacity: maxOpacity\n },\n '67.2%': {\n opacity: maxOpacity\n },\n '100%': {\n opacity: 0,\n display: 'none',\n visibility: 'hidden'\n }\n })\n);\n\n/**\n * @private\n */\nexport const opacityAnimationStyles = (maxOpacity: number): React.CSSProperties => {\n return {\n animationName: opacityTransition(maxOpacity),\n animationFillMode: 'forwards',\n animationDuration: `4.133s`\n };\n};\n\n/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) =>\n keyframes({\n from: {\n backgroundPosition: '0px 0px'\n },\n to: {\n backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n }\n })\n);\n\n/**\n * @private\n */\nexport const spriteAnimationStyles = (\n numOfFrames: number,\n displaySizePx: number,\n imageUrl: string\n): React.CSSProperties => {\n return {\n height: `${displaySizePx}px`,\n width: `${displaySizePx}px`,\n backgroundImage: `url(${imageUrl})`,\n backgroundRepeat: 'no-repeat',\n animationName: spriteFrames(numOfFrames, displaySizePx),\n animationDuration: `${numOfFrames / 24}s`,\n animationFillMode: `forwards`,\n animationIterationCount: 'infinite',\n animationTimingFunction: `steps(${numOfFrames})`,\n backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,\n transform: `scale(${displaySizePx}/128)`\n };\n};\n"]}
1
+ {"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\n/**\n * Generate random float between two numbers, including min and max\n * @private\n */\nexport function getRandomFloat(minValue: number, maxValue: number): number {\n return minValue + Math.random() * (maxValue - minValue);\n}\n\n/**\n * Generate random int between two numbers, including min and max\n * @private\n */\nexport function getRandomInt(minValue: number, maxValue: number): number {\n return Math.floor(getRandomFloat(minValue, maxValue + 1));\n}\n\n/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(\n index: number,\n halfCanvasWidth: number,\n isOriginAtCanvasCenter: boolean = true\n): number {\n const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;\n\n // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.\n // Otherwise, every other reaction goes right, left in alternating directions.\n // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2\n // and subtract 1, which will result in -1 or 1\n const direction = index === 0 ? 0 : (index % 2) * 2 - 1;\n if (direction === 0) {\n return midPointCoordinate;\n }\n\n // Now we get how far the reaction starts from center\n const adjustment = scaleStartPos(index);\n return midPointCoordinate + direction * adjustment * halfCanvasWidth;\n}\n\n/**\n * @private\n */\nexport const reactionOverlayStyle: React.CSSProperties = {\n bottom: '0',\n height: '50%',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%'\n};\n\n/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n return {\n position: 'absolute',\n left: `${reactionXPoint}px`\n };\n}\n\n/**\n * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.\n * @private\n */\nfunction scaleStartPos(index: number): number {\n switch (index) {\n case 1:\n case 2:\n return 0.3;\n case 3:\n case 4:\n return 0.6;\n case 5:\n case 6:\n return 0.9;\n case 7:\n case 8:\n return 0.75;\n case 9:\n case 18:\n return 0.375;\n case 10:\n case 23:\n return 0.525;\n case 11:\n case 16:\n return 0.15;\n case 12:\n case 15:\n return 0.225;\n case 13:\n case 14:\n return 0.075;\n case 17:\n case 24:\n return 0.45;\n case 19:\n case 20:\n return 0.675;\n case 21:\n case 22:\n return 0.825;\n default:\n return 0;\n }\n}\n\n/**\n * We have only one bucket item for presentation style of the reaction animation.\n * We are choosing to keep the array so that, in future, with styles needed to get updated, one\n * can add new styles and apply from here, rather than updating over the same style. Later we can remove\n * the old ones.\n * It is for the ease of testing and implementation.\n * @private\n */\nconst ReactionStyleBucket: IReactionStyleBucket = {\n sizeScale: 0.9,\n heightMaxScale: 0.7 * 0.95,\n opacityMax: 0.9\n};\n\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n sizeScale: number;\n opacityMax: number;\n heightMaxScale: number;\n heightMinScale?: number;\n}\n\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function getReactionStyleBucket(): IReactionStyleBucket {\n // Having dynamic emoji size on rendering animation impacts performance of the animation itself.\n // So we are choosing to use a fixed size for all cases.\n return ReactionStyleBucket;\n}\n\n/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) =>\n keyframes({\n '0%': {\n transform: `translateY(${maxHeight}px)`\n },\n '100%': {\n transform: `translateY(${travelHeight}px)`\n }\n })\n);\n\n/**\n * @private\n */\nexport const moveAnimationStyles = (maxHeight: number, travelHeight: number): React.CSSProperties => {\n return {\n animationName: moveFrames(maxHeight, travelHeight),\n animationFillMode: 'forwards',\n animationDuration: `4.133s`,\n animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'\n };\n};\n\n/**\n * @private\n */\nexport const opacityTransition = memoizeFunction((maxOpacity) =>\n keyframes({\n '0%': {\n opacity: 0\n },\n '31.2%': {\n opacity: maxOpacity\n },\n '67.2%': {\n opacity: maxOpacity\n },\n '100%': {\n opacity: 0,\n display: 'none',\n visibility: 'hidden'\n }\n })\n);\n\n/**\n * @private\n */\nexport const opacityAnimationStyles = (maxOpacity: number): React.CSSProperties => {\n return {\n animationName: opacityTransition(maxOpacity),\n animationFillMode: 'forwards',\n animationDuration: `4.133s`\n };\n};\n\n/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) =>\n keyframes({\n from: {\n backgroundPosition: '0px 0px'\n },\n to: {\n backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n }\n })\n);\n\n/**\n * @private\n */\nexport const spriteAnimationStyles = (\n numOfFrames: number,\n displaySizePx: number,\n imageUrl: string\n): React.CSSProperties => {\n return {\n height: `${displaySizePx}px`,\n width: `${displaySizePx}px`,\n backgroundImage: `url(${imageUrl})`,\n backgroundRepeat: 'no-repeat',\n animationName: spriteFrames(numOfFrames, displaySizePx),\n animationDuration: `${numOfFrames / 24}s`,\n animationFillMode: `forwards`,\n animationIterationCount: 'infinite',\n animationTimingFunction: `steps(${numOfFrames})`,\n backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,\n transform: `scale(${displaySizePx}/128)`\n };\n};\n"]}
@@ -82,7 +82,7 @@ export const getPreviousInlineImages = (content) => {
82
82
  export const getRemovedInlineImages = (content, previousInlineImages) => {
83
83
  const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
84
84
  const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);
85
- previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
85
+ previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !!img.id && !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
86
86
  const removedInlineImages = [...previousInlineImages];
87
87
  return removedInlineImages;
88
88
  };
@@ -158,6 +158,9 @@ export const scrollToBottomRichTextEditor = () => {
158
158
  */
159
159
  export const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
160
160
  removedInlineImages.forEach((image) => {
161
+ if (!image.id) {
162
+ return;
163
+ }
161
164
  removeSingleLocalBlob(currentLocalBlobMap, image.id);
162
165
  });
163
166
  };
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextEditorUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextEditorUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';\n\n/**\n * Plugin event type for RoosterJS plugins\n * @private\n */\nexport enum PluginEventType {\n EditorReady = 'editorReady',\n BeforeDispose = 'beforeDispose',\n ContentChanged = 'contentChanged',\n BeforeSetContent = 'beforeSetContent',\n Input = 'input',\n KeyDown = 'keyDown',\n BeforeCutCopy = 'beforeCutCopy',\n BeforePaste = 'beforePaste',\n ZoomChanged = 'zoomChanged',\n MouseUp = 'mouseUp'\n}\n\n/**\n * ContentChanged event source for RoosterJS\n * @private\n */\nexport enum ContentChangedEventSource {\n Paste = 'Paste'\n}\n\n/**\n * Applies the border format to the specified element.\n * If the element is an HTMLTableCellElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, the default format applier is used.\n */\nexport const borderApplier = (format: BorderFormat, element: HTMLElement, context: ModelToDomContext): void => {\n if (element instanceof HTMLTableCellElement) {\n // don't set format for table cell\n // as it will set inline styles for them\n // we want to use classes instead\n } else if (context.defaultFormatAppliers.border) {\n // apply default formats for all other cases\n context.defaultFormatAppliers.border(format, element, context);\n }\n};\n\n/**\n * Applies the dataset format to the given HTML element.\n * If the element is an HTMLTableElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, it applies the default formats.\n */\nexport const dataSetApplier = (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext): void => {\n if (element instanceof HTMLTableElement) {\n // don't set editing info for tables\n // as it will set inline styles for them\n // we want to use classes instead\n } else if (context.defaultFormatAppliers.dataset) {\n // apply default formats for all other cases\n context.defaultFormatAppliers.dataset(format, element, context);\n }\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getPreviousInlineImages = (content?: string): Record<string, string>[] => {\n if (!content) {\n return [];\n }\n const previousInlineImages: Record<string, string>[] = [];\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n document.querySelectorAll('img').forEach((img) => {\n const imageAttributes = getInlineImageAttributes(img);\n previousInlineImages.push(imageAttributes);\n });\n return previousInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getRemovedInlineImages = (\n content: string,\n previousInlineImages: Record<string, string>[]\n): Record<string, string>[] => {\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);\n previousInlineImages = previousInlineImages?.filter((img) => !currentContentIds?.includes(img.id));\n\n const removedInlineImages = [...previousInlineImages];\n return removedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInsertedInlineImages = (\n content: string,\n previousInlineImages: NodeListOf<HTMLImageElement>\n): HTMLImageElement[] => {\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n const currentContentInlineImages = Array.from(document.querySelectorAll('img'));\n const previousContentIds = Array.from(previousInlineImages).map((img) => img.id);\n // if check is updated, also update getRemovedInlineImages\n const insertedInlineImages = currentContentInlineImages.filter((img) => !previousContentIds.includes(img.id));\n return insertedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInlineImageAttributes = (image: HTMLImageElement): Record<string, string> => {\n const imageAttributes: Record<string, string> = {};\n image.getAttributeNames().forEach((attrName) => {\n const attrValue = image.getAttribute(attrName);\n if (attrValue) {\n imageAttributes[attrName] = attrValue;\n }\n });\n return imageAttributes;\n};\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * @internal\n */\n/**\n * Update the scroll position of the editor to ensure the content is visible.\n */\nexport const scrollToBottomRichTextEditor = (): void => {\n // Get the current selection in the document\n const selection = document.getSelection();\n\n // Check if a selection exists and it has at least one range\n if (!selection || selection.rangeCount <= 0) {\n // If no selection or range, exit the function\n return;\n }\n\n // Get the first range of the selection\n // A user can normally only select one range at a time, so the rangeCount will usually be 1\n const range = selection.getRangeAt(0);\n\n // If the common ancestor container of the range is the document itself,\n // it might mean that the editable element is getting removed from the DOM\n // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error\n if (range.commonAncestorContainer === document) {\n return;\n }\n\n // Create a temporary span element to use as an anchor for scrolling\n // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error\n const tempElement = document.createElement('span');\n // Collapse the range to its end point\n // This means the start and end points of the range will be the same, and it will not contain any content\n range.collapse(false);\n // Insert the temporary element at the cursor's position at the end of the range\n range.insertNode(tempElement);\n // Scroll the temporary element into view\n // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly\n tempElement.scrollIntoView({\n block: 'center'\n });\n tempElement.remove();\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap\n * @internal\n */\nexport const removeLocalBlobs = (\n currentLocalBlobMap: Record<string, string>,\n removedInlineImages: Record<string, string>[]\n): void => {\n removedInlineImages.forEach((image) => {\n removeSingleLocalBlob(currentLocalBlobMap, image.id);\n });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap\n * @internal\n */\nexport const cleanAllLocalBlobs = (currentLocalBlobMap: Record<string, string>): void => {\n Object.keys(currentLocalBlobMap).forEach((imageId) => {\n removeSingleLocalBlob(currentLocalBlobMap, imageId);\n });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nconst removeSingleLocalBlob = (currentLocalBlobMap: Record<string, string>, imageId: string): void => {\n const blobUrl = currentLocalBlobMap[imageId];\n if (blobUrl) {\n URL.revokeObjectURL(blobUrl);\n delete currentLocalBlobMap[imageId];\n }\n};\n"]}
1
+ {"version":3,"file":"RichTextEditorUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextEditorUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';\n\n/**\n * Plugin event type for RoosterJS plugins\n * @private\n */\nexport enum PluginEventType {\n EditorReady = 'editorReady',\n BeforeDispose = 'beforeDispose',\n ContentChanged = 'contentChanged',\n BeforeSetContent = 'beforeSetContent',\n Input = 'input',\n KeyDown = 'keyDown',\n BeforeCutCopy = 'beforeCutCopy',\n BeforePaste = 'beforePaste',\n ZoomChanged = 'zoomChanged',\n MouseUp = 'mouseUp'\n}\n\n/**\n * ContentChanged event source for RoosterJS\n * @private\n */\nexport enum ContentChangedEventSource {\n Paste = 'Paste'\n}\n\n/**\n * Applies the border format to the specified element.\n * If the element is an HTMLTableCellElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, the default format applier is used.\n */\nexport const borderApplier = (format: BorderFormat, element: HTMLElement, context: ModelToDomContext): void => {\n if (element instanceof HTMLTableCellElement) {\n // don't set format for table cell\n // as it will set inline styles for them\n // we want to use classes instead\n } else if (context.defaultFormatAppliers.border) {\n // apply default formats for all other cases\n context.defaultFormatAppliers.border(format, element, context);\n }\n};\n\n/**\n * Applies the dataset format to the given HTML element.\n * If the element is an HTMLTableElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, it applies the default formats.\n */\nexport const dataSetApplier = (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext): void => {\n if (element instanceof HTMLTableElement) {\n // don't set editing info for tables\n // as it will set inline styles for them\n // we want to use classes instead\n } else if (context.defaultFormatAppliers.dataset) {\n // apply default formats for all other cases\n context.defaultFormatAppliers.dataset(format, element, context);\n }\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getPreviousInlineImages = (content?: string): Record<string, string>[] => {\n if (!content) {\n return [];\n }\n const previousInlineImages: Record<string, string>[] = [];\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n document.querySelectorAll('img').forEach((img) => {\n const imageAttributes = getInlineImageAttributes(img);\n previousInlineImages.push(imageAttributes);\n });\n return previousInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getRemovedInlineImages = (\n content: string,\n previousInlineImages: Record<string, string>[]\n): Record<string, string>[] => {\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);\n previousInlineImages = previousInlineImages?.filter((img) => !!img.id && !currentContentIds?.includes(img.id));\n\n const removedInlineImages = [...previousInlineImages];\n return removedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInsertedInlineImages = (\n content: string,\n previousInlineImages: NodeListOf<HTMLImageElement>\n): HTMLImageElement[] => {\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n const currentContentInlineImages = Array.from(document.querySelectorAll('img'));\n const previousContentIds = Array.from(previousInlineImages).map((img) => img.id);\n // if check is updated, also update getRemovedInlineImages\n const insertedInlineImages = currentContentInlineImages.filter((img) => !previousContentIds.includes(img.id));\n return insertedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInlineImageAttributes = (image: HTMLImageElement): Record<string, string> => {\n const imageAttributes: Record<string, string> = {};\n image.getAttributeNames().forEach((attrName) => {\n const attrValue = image.getAttribute(attrName);\n if (attrValue) {\n imageAttributes[attrName] = attrValue;\n }\n });\n return imageAttributes;\n};\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * @internal\n */\n/**\n * Update the scroll position of the editor to ensure the content is visible.\n */\nexport const scrollToBottomRichTextEditor = (): void => {\n // Get the current selection in the document\n const selection = document.getSelection();\n\n // Check if a selection exists and it has at least one range\n if (!selection || selection.rangeCount <= 0) {\n // If no selection or range, exit the function\n return;\n }\n\n // Get the first range of the selection\n // A user can normally only select one range at a time, so the rangeCount will usually be 1\n const range = selection.getRangeAt(0);\n\n // If the common ancestor container of the range is the document itself,\n // it might mean that the editable element is getting removed from the DOM\n // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error\n if (range.commonAncestorContainer === document) {\n return;\n }\n\n // Create a temporary span element to use as an anchor for scrolling\n // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error\n const tempElement = document.createElement('span');\n // Collapse the range to its end point\n // This means the start and end points of the range will be the same, and it will not contain any content\n range.collapse(false);\n // Insert the temporary element at the cursor's position at the end of the range\n range.insertNode(tempElement);\n // Scroll the temporary element into view\n // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly\n tempElement.scrollIntoView({\n block: 'center'\n });\n tempElement.remove();\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap\n * @internal\n */\nexport const removeLocalBlobs = (\n currentLocalBlobMap: Record<string, string>,\n removedInlineImages: Record<string, string>[]\n): void => {\n removedInlineImages.forEach((image) => {\n if (!image.id) {\n return;\n }\n removeSingleLocalBlob(currentLocalBlobMap, image.id);\n });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap\n * @internal\n */\nexport const cleanAllLocalBlobs = (currentLocalBlobMap: Record<string, string>): void => {\n Object.keys(currentLocalBlobMap).forEach((imageId) => {\n removeSingleLocalBlob(currentLocalBlobMap, imageId);\n });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nconst removeSingleLocalBlob = (currentLocalBlobMap: Record<string, string>, imageId: string): void => {\n const blobUrl = currentLocalBlobMap[imageId];\n if (blobUrl) {\n URL.revokeObjectURL(blobUrl);\n delete currentLocalBlobMap[imageId];\n }\n};\n"]}
@@ -23,6 +23,9 @@ export function createKey(row, column) {
23
23
  */
24
24
  export function parseKey(key) {
25
25
  const [row, column] = key.split(',');
26
+ if (row === undefined || column === undefined) {
27
+ throw new Error('Invalid key format');
28
+ }
26
29
  return {
27
30
  row: parseInt(row),
28
31
  column: parseInt(column)
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextTableUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextTableUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { editTable } from 'roosterjs-content-model-api';\nimport { tableContextMenuIconStyles } from '../styles/RichTextEditor.styles';\nimport { RichTextStrings } from '../RichTextEditor/RichTextSendBox';\nimport { IEditor } from 'roosterjs-content-model-types';\nimport { IContextualMenuItem } from '@fluentui/react';\n\n/**\n * @private\n *\n * String to be replaces by actual values of row and column.\n */\nexport const ColumnRowReplaceString = '{column} x {row}';\n\n/**\n * @private\n *\n * Function to create key pair for the selected table size.\n */\nexport function createKey(row: number, column: number): string {\n return `${row},${column}`;\n}\n\n/**\n * @private\n *\n * Function to parse key to the selected table size valules.\n */\nexport function parseKey(key: string): { row: number; column: number } {\n const [row, column] = key.split(',');\n return {\n row: parseInt(row),\n column: parseInt(column)\n };\n}\n\n/**\n * Returns an array of context menu items for editing a rich text table.\n *\n * @param editor - The editor instance.\n * @param strings - An object containing localized strings for the context menu items.\n * @returns An array of context menu items.\n */\nexport const getTableEditContextMenuItems = (\n editor: IEditor,\n strings: Partial<RichTextStrings>\n): IContextualMenuItem[] => {\n return [\n {\n key: 'RichTextTableEditMenuTableInsert',\n text: strings.richTextInsertRowOrColumnMenu,\n ariaLabel: strings.richTextInsertRowOrColumnMenu,\n iconProps: {\n iconName: 'RichTextTableInsertMenuIcon',\n styles: { root: tableContextMenuIconStyles }\n },\n subMenuProps: {\n items: [\n {\n key: 'RichTextTableEditMenuTableInsertRowAbove',\n text: strings.richTextInsertRowAboveMenu,\n ariaLabel: strings.richTextInsertRowAboveMenu,\n onClick: () => {\n editTable(editor, 'insertAbove');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertRowBelow',\n text: strings.richTextInsertRowBelowMenu,\n ariaLabel: strings.richTextInsertRowBelowMenu,\n onClick: () => {\n editTable(editor, 'insertBelow');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertColumnLeft',\n text: strings.richTextInsertColumnLeftMenu,\n ariaLabel: strings.richTextInsertColumnLeftMenu,\n onClick: () => {\n editTable(editor, 'insertLeft');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertColumnRight',\n text: strings.richTextInsertColumnRightMenu,\n ariaLabel: strings.richTextInsertColumnRightMenu,\n onClick: () => {\n editTable(editor, 'insertRight');\n }\n }\n ]\n }\n },\n {\n key: 'RichTextTableEditMenuTableDelete',\n text: strings.richTextDeleteRowOrColumnMenu,\n ariaLabel: strings.richTextDeleteRowOrColumnMenu,\n iconProps: {\n iconName: 'RichTextTableDeleteMenuIcon',\n styles: { root: tableContextMenuIconStyles }\n },\n subMenuProps: {\n items: [\n {\n key: 'RichTextTableEditMenuTableDeleteRow',\n text: strings.richTextDeleteRowMenu,\n ariaLabel: strings.richTextDeleteRowMenu,\n onClick: () => {\n editTable(editor, 'deleteRow');\n }\n },\n {\n key: 'RichTextTableEditMenuTableDeleteColumn',\n text: strings.richTextDeleteColumnMenu,\n ariaLabel: strings.richTextDeleteColumnMenu,\n onClick: () => {\n editTable(editor, 'deleteColumn');\n }\n },\n {\n key: 'RichTextTableEditMenuTableDeleteTable',\n text: strings.richTextDeleteTableMenu,\n ariaLabel: strings.richTextDeleteTableMenu,\n onClick: () => {\n editTable(editor, 'deleteTable');\n }\n }\n ]\n }\n }\n ];\n};\n"]}
1
+ {"version":3,"file":"RichTextTableUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextTableUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAK7E;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,kBAAkB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,GAAW,EAAE,MAAc;IACnD,OAAO,GAAG,GAAG,IAAI,MAAM,EAAE,CAAC;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,GAAW;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAErC,IAAI,GAAG,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9C,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACxC,CAAC;IAED,OAAO;QACL,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC;QAClB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;KACzB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,MAAe,EACf,OAAiC,EACV,EAAE;IACzB,OAAO;QACL;YACE,GAAG,EAAE,kCAAkC;YACvC,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,SAAS,EAAE,OAAO,CAAC,6BAA6B;YAChD,SAAS,EAAE;gBACT,QAAQ,EAAE,6BAA6B;gBACvC,MAAM,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE;aAC7C;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE;oBACL;wBACE,GAAG,EAAE,0CAA0C;wBAC/C,IAAI,EAAE,OAAO,CAAC,0BAA0B;wBACxC,SAAS,EAAE,OAAO,CAAC,0BAA0B;wBAC7C,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;wBACnC,CAAC;qBACF;oBACD;wBACE,GAAG,EAAE,0CAA0C;wBAC/C,IAAI,EAAE,OAAO,CAAC,0BAA0B;wBACxC,SAAS,EAAE,OAAO,CAAC,0BAA0B;wBAC7C,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;wBACnC,CAAC;qBACF;oBACD;wBACE,GAAG,EAAE,4CAA4C;wBACjD,IAAI,EAAE,OAAO,CAAC,4BAA4B;wBAC1C,SAAS,EAAE,OAAO,CAAC,4BAA4B;wBAC/C,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;wBAClC,CAAC;qBACF;oBACD;wBACE,GAAG,EAAE,6CAA6C;wBAClD,IAAI,EAAE,OAAO,CAAC,6BAA6B;wBAC3C,SAAS,EAAE,OAAO,CAAC,6BAA6B;wBAChD,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;wBACnC,CAAC;qBACF;iBACF;aACF;SACF;QACD;YACE,GAAG,EAAE,kCAAkC;YACvC,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,SAAS,EAAE,OAAO,CAAC,6BAA6B;YAChD,SAAS,EAAE;gBACT,QAAQ,EAAE,6BAA6B;gBACvC,MAAM,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE;aAC7C;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE;oBACL;wBACE,GAAG,EAAE,qCAAqC;wBAC1C,IAAI,EAAE,OAAO,CAAC,qBAAqB;wBACnC,SAAS,EAAE,OAAO,CAAC,qBAAqB;wBACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;wBACjC,CAAC;qBACF;oBACD;wBACE,GAAG,EAAE,wCAAwC;wBAC7C,IAAI,EAAE,OAAO,CAAC,wBAAwB;wBACtC,SAAS,EAAE,OAAO,CAAC,wBAAwB;wBAC3C,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;wBACpC,CAAC;qBACF;oBACD;wBACE,GAAG,EAAE,uCAAuC;wBAC5C,IAAI,EAAE,OAAO,CAAC,uBAAuB;wBACrC,SAAS,EAAE,OAAO,CAAC,uBAAuB;wBAC1C,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;wBACnC,CAAC;qBACF;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { editTable } from 'roosterjs-content-model-api';\nimport { tableContextMenuIconStyles } from '../styles/RichTextEditor.styles';\nimport { RichTextStrings } from '../RichTextEditor/RichTextSendBox';\nimport { IEditor } from 'roosterjs-content-model-types';\nimport { IContextualMenuItem } from '@fluentui/react';\n\n/**\n * @private\n *\n * String to be replaces by actual values of row and column.\n */\nexport const ColumnRowReplaceString = '{column} x {row}';\n\n/**\n * @private\n *\n * Function to create key pair for the selected table size.\n */\nexport function createKey(row: number, column: number): string {\n return `${row},${column}`;\n}\n\n/**\n * @private\n *\n * Function to parse key to the selected table size valules.\n */\nexport function parseKey(key: string): { row: number; column: number } {\n const [row, column] = key.split(',');\n\n if (row === undefined || column === undefined) {\n throw new Error('Invalid key format');\n }\n\n return {\n row: parseInt(row),\n column: parseInt(column)\n };\n}\n\n/**\n * Returns an array of context menu items for editing a rich text table.\n *\n * @param editor - The editor instance.\n * @param strings - An object containing localized strings for the context menu items.\n * @returns An array of context menu items.\n */\nexport const getTableEditContextMenuItems = (\n editor: IEditor,\n strings: Partial<RichTextStrings>\n): IContextualMenuItem[] => {\n return [\n {\n key: 'RichTextTableEditMenuTableInsert',\n text: strings.richTextInsertRowOrColumnMenu,\n ariaLabel: strings.richTextInsertRowOrColumnMenu,\n iconProps: {\n iconName: 'RichTextTableInsertMenuIcon',\n styles: { root: tableContextMenuIconStyles }\n },\n subMenuProps: {\n items: [\n {\n key: 'RichTextTableEditMenuTableInsertRowAbove',\n text: strings.richTextInsertRowAboveMenu,\n ariaLabel: strings.richTextInsertRowAboveMenu,\n onClick: () => {\n editTable(editor, 'insertAbove');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertRowBelow',\n text: strings.richTextInsertRowBelowMenu,\n ariaLabel: strings.richTextInsertRowBelowMenu,\n onClick: () => {\n editTable(editor, 'insertBelow');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertColumnLeft',\n text: strings.richTextInsertColumnLeftMenu,\n ariaLabel: strings.richTextInsertColumnLeftMenu,\n onClick: () => {\n editTable(editor, 'insertLeft');\n }\n },\n {\n key: 'RichTextTableEditMenuTableInsertColumnRight',\n text: strings.richTextInsertColumnRightMenu,\n ariaLabel: strings.richTextInsertColumnRightMenu,\n onClick: () => {\n editTable(editor, 'insertRight');\n }\n }\n ]\n }\n },\n {\n key: 'RichTextTableEditMenuTableDelete',\n text: strings.richTextDeleteRowOrColumnMenu,\n ariaLabel: strings.richTextDeleteRowOrColumnMenu,\n iconProps: {\n iconName: 'RichTextTableDeleteMenuIcon',\n styles: { root: tableContextMenuIconStyles }\n },\n subMenuProps: {\n items: [\n {\n key: 'RichTextTableEditMenuTableDeleteRow',\n text: strings.richTextDeleteRowMenu,\n ariaLabel: strings.richTextDeleteRowMenu,\n onClick: () => {\n editTable(editor, 'deleteRow');\n }\n },\n {\n key: 'RichTextTableEditMenuTableDeleteColumn',\n text: strings.richTextDeleteColumnMenu,\n ariaLabel: strings.richTextDeleteColumnMenu,\n onClick: () => {\n editTable(editor, 'deleteColumn');\n }\n },\n {\n key: 'RichTextTableEditMenuTableDeleteTable',\n text: strings.richTextDeleteTableMenu,\n ariaLabel: strings.richTextDeleteTableMenu,\n onClick: () => {\n editTable(editor, 'deleteTable');\n }\n }\n ]\n }\n }\n ];\n};\n"]}
@@ -11,6 +11,9 @@ import { _convertRemToPx as convertRemToPx } from "../../../../acs-ui-common/src
11
11
  export const _useContainerWidth = (containerRef) => {
12
12
  const [width, setWidth] = useState(undefined);
13
13
  const observer = useRef(new ResizeObserver((entries) => {
14
+ if (!entries[0]) {
15
+ return;
16
+ }
14
17
  const { width } = entries[0].contentRect;
15
18
  if (Number.isNaN(width)) {
16
19
  setWidth(0);
@@ -39,6 +42,9 @@ export const _useContainerWidth = (containerRef) => {
39
42
  export const _useContainerHeight = (containerRef) => {
40
43
  const [height, setHeight] = useState(undefined);
41
44
  const observer = useRef(new ResizeObserver((entries) => {
45
+ if (!entries[0]) {
46
+ return;
47
+ }
42
48
  const { height } = entries[0].contentRect;
43
49
  if (Number.isNaN(height)) {
44
50
  setHeight(0);
@@ -1 +1 @@
1
- {"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/responsive.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,sCAAgC;AAE5E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACzC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YACxB,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC9F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAC1C,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACzB,SAAS,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,MAAM,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,iBAAyB,EAAW,EAAE,CAClE,iBAAiB,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,kBAA0B,EAAW,EAAE,CACnE,kBAAkB,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { RefObject, useEffect, useState, useRef } from 'react';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\n\n/**\n * A utility hook for providing the width of a parent element.\n * Returns updated width if parent/window resizes.\n * @param containerRef - Ref of a parent element whose width will be returned.\n * @internal\n */\nexport const _useContainerWidth = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [width, setWidth] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { width } = entries[0].contentRect;\n if (Number.isNaN(width)) {\n setWidth(0);\n } else {\n setWidth(width);\n }\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return width;\n};\n\n/**\n * A utility hook for providing the height of a parent element.\n * Returns updated height if parent/window resizes.\n * @param containerRef - Ref of a parent element whose height will be returned.\n * @internal\n */\nexport const _useContainerHeight = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [height, setHeight] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { height } = entries[0].contentRect;\n if (Number.isNaN(height)) {\n setHeight(0);\n } else {\n setHeight(height);\n }\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return height;\n};\n\nconst NARROW_WIDTH_REM = 30;\n\nconst SHORT_HEIGHT_REM = 23.75;\n\n/**\n * Utility function to determine if container width is narrow\n * @param containerWidthRem container width in rem\n * @returns boolean\n */\nexport const isNarrowWidth = (containerWidthRem: number): boolean =>\n containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);\n\n/**\n * Utility function to determine if container width is short\n * @param containerWidthRem container height in rem\n * @returns boolean\n */\nexport const isShortHeight = (containerHeightRem: number): boolean =>\n containerHeightRem <= convertRemToPx(SHORT_HEIGHT_REM);\n"]}
1
+ {"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/responsive.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { RefObject, useEffect, useState, useRef } from 'react';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\n\n/**\n * A utility hook for providing the width of a parent element.\n * Returns updated width if parent/window resizes.\n * @param containerRef - Ref of a parent element whose width will be returned.\n * @internal\n */\nexport const _useContainerWidth = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [width, setWidth] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n if (!entries[0]) {\n return;\n }\n const { width } = entries[0].contentRect;\n if (Number.isNaN(width)) {\n setWidth(0);\n } else {\n setWidth(width);\n }\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return width;\n};\n\n/**\n * A utility hook for providing the height of a parent element.\n * Returns updated height if parent/window resizes.\n * @param containerRef - Ref of a parent element whose height will be returned.\n * @internal\n */\nexport const _useContainerHeight = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [height, setHeight] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n if (!entries[0]) {\n return;\n }\n const { height } = entries[0].contentRect;\n if (Number.isNaN(height)) {\n setHeight(0);\n } else {\n setHeight(height);\n }\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return height;\n};\n\nconst NARROW_WIDTH_REM = 30;\n\nconst SHORT_HEIGHT_REM = 23.75;\n\n/**\n * Utility function to determine if container width is narrow\n * @param containerWidthRem container width in rem\n * @returns boolean\n */\nexport const isNarrowWidth = (containerWidthRem: number): boolean =>\n containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);\n\n/**\n * Utility function to determine if container width is short\n * @param containerWidthRem container height in rem\n * @returns boolean\n */\nexport const isShortHeight = (containerHeightRem: number): boolean =>\n containerHeightRem <= convertRemToPx(SHORT_HEIGHT_REM);\n"]}