@azure/communication-react 1.20.0-beta.1 → 1.20.0
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.
- package/README.md +2 -2
- package/dist/communication-react.d.ts +245 -1703
- package/dist/dist-cjs/communication-react/index.js +36159 -165
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/common.d.ts +0 -13
- package/dist/dist-esm/acs-ui-common/src/common.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/constants.d.ts +0 -5
- package/dist/dist-esm/acs-ui-common/src/constants.js +0 -5
- package/dist/dist-esm/acs-ui-common/src/constants.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/index.d.ts +0 -4
- package/dist/dist-esm/acs-ui-common/src/index.js +0 -3
- package/dist/dist-esm/acs-ui-common/src/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.d.ts +16 -7
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js +10 -10
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js.map +1 -1
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.d.ts +17 -7
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js +12 -10
- package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js.map +1 -1
- package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.d.ts +13 -7
- package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js +10 -9
- package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js.map +1 -1
- package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.d.ts +16 -7
- package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js +10 -9
- package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/baseSelectors.d.ts +3 -12
- package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js +0 -12
- package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js +1 -1
- package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js +0 -2
- package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/getRemoteParticipantsExcludingConsumers.js +2 -1
- package/dist/dist-esm/calling-component-bindings/src/getRemoteParticipantsExcludingConsumers.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.d.ts +12 -2
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js +26 -6
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/handlers/createHandlers.d.ts +6 -0
- package/dist/dist-esm/calling-component-bindings/src/handlers/createHandlers.js +1 -5
- package/dist/dist-esm/calling-component-bindings/src/handlers/createHandlers.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/handlers/createTeamsCallHandlers.d.ts +2 -0
- package/dist/dist-esm/calling-component-bindings/src/handlers/createTeamsCallHandlers.js +2 -19
- package/dist/dist-esm/calling-component-bindings/src/handlers/createTeamsCallHandlers.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/index.d.ts +2 -2
- package/dist/dist-esm/calling-component-bindings/src/index.js +1 -2
- package/dist/dist-esm/calling-component-bindings/src/index.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/notificationStackSelector.js +1 -35
- package/dist/dist-esm/calling-component-bindings/src/notificationStackSelector.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/participantListSelector.d.ts +0 -1
- package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js +1 -3
- package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.d.ts +1 -2
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js +3 -3
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallAgentDeclarativeCommon.js +0 -4
- package/dist/dist-esm/calling-stateful-client/src/CallAgentDeclarativeCommon.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +2 -79
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +0 -15
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js +32 -107
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallDeclarativeCommon.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.d.ts +0 -5
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +4 -27
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CaptionsSubscriber.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/Converter.js +0 -3
- package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js +58 -52
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/RecordingSubscriber.d.ts +0 -1
- package/dist/dist-esm/calling-stateful-client/src/RecordingSubscriber.js +1 -7
- package/dist/dist-esm/calling-stateful-client/src/RecordingSubscriber.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js +5 -3
- package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/TeamsCallDeclarative.js +0 -17
- package/dist/dist-esm/calling-stateful-client/src/TeamsCallDeclarative.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +0 -3
- package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
- package/dist/dist-esm/chat-component-bindings/src/handlers/createHandlers.d.ts +2 -6
- package/dist/dist-esm/chat-component-bindings/src/handlers/createHandlers.js +2 -35
- package/dist/dist-esm/chat-component-bindings/src/handlers/createHandlers.js.map +1 -1
- package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.d.ts +1 -2
- package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.js +0 -3
- package/dist/dist-esm/chat-component-bindings/src/hooks/usePropsFor.js.map +1 -1
- package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js +2 -25
- package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js.map +1 -1
- package/dist/dist-esm/chat-component-bindings/src/utils/updateMessagesWithAttached.js +3 -3
- package/dist/dist-esm/chat-component-bindings/src/utils/updateMessagesWithAttached.js.map +1 -1
- package/dist/dist-esm/chat-stateful-client/src/ChatClientState.d.ts +1 -15
- package/dist/dist-esm/chat-stateful-client/src/ChatClientState.js.map +1 -1
- package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js +1 -2
- package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js.map +1 -1
- package/dist/dist-esm/chat-stateful-client/src/index.d.ts +0 -1
- package/dist/dist-esm/chat-stateful-client/src/index.js.map +1 -1
- package/dist/dist-esm/communication-react/src/index.d.ts +1 -27
- package/dist/dist-esm/communication-react/src/index.js +0 -6
- package/dist/dist-esm/communication-react/src/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js +3 -2
- package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Attachment/AttachmentDownloadCards.d.ts +0 -2
- package/dist/dist-esm/react-components/src/components/Attachment/AttachmentDownloadCards.js +0 -2
- package/dist/dist-esm/react-components/src/components/Attachment/AttachmentDownloadCards.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.d.ts +1 -13
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.js +3 -9
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts +0 -11
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js +7 -34
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.d.ts +1 -8
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js +5 -9
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.d.ts +1 -2
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js +4 -4
- package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.d.ts +1 -4
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.js +6 -31
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.d.ts +1 -15
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.js +0 -9
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.d.ts +2 -23
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js +6 -17
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.d.ts +1 -8
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js +6 -10
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js +5 -5
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +6 -4
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/GridLayout.js +3 -0
- package/dist/dist-esm/react-components/src/components/GridLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +4 -5
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ImageOverlay.js +0 -2
- package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/InputBoxComponent.d.ts +0 -2
- package/dist/dist-esm/react-components/src/components/InputBoxComponent.js +0 -15
- package/dist/dist-esm/react-components/src/components/InputBoxComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js +3 -0
- package/dist/dist-esm/react-components/src/components/LocalVideoCameraButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.d.ts +1 -0
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.js +4 -4
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js +2 -1
- package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.d.ts +5 -81
- package/dist/dist-esm/react-components/src/components/MessageThread.js +6 -16
- package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts +24 -0
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js +25 -0
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js +2 -1
- package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Notification.js +3 -1
- package/dist/dist-esm/react-components/src/components/Notification.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/NotificationStack.d.ts +0 -20
- package/dist/dist-esm/react-components/src/components/NotificationStack.js +0 -5
- package/dist/dist-esm/react-components/src/components/NotificationStack.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts +0 -15
- package/dist/dist-esm/react-components/src/components/ParticipantList.js +3 -12
- package/dist/dist-esm/react-components/src/components/ParticipantList.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ReactionButton.js +31 -41
- package/dist/dist-esm/react-components/src/components/ReactionButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/SendBox.d.ts +1 -47
- package/dist/dist-esm/react-components/src/components/SendBox.js +6 -57
- package/dist/dist-esm/react-components/src/components/SendBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js +7 -3
- package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedBrowser.js +0 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedBrowser.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedBrowserVersion.js +0 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedBrowserVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedEnvironment.js +0 -19
- package/dist/dist-esm/react-components/src/components/UnsupportedEnvironment.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedOperatingSystem.js +0 -1
- package/dist/dist-esm/react-components/src/components/UnsupportedOperatingSystem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VerticalGallery.js +2 -1
- package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +3 -3
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +6 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js +5 -4
- package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +23 -17
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +3 -3
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js +3 -0
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/index.d.ts +0 -20
- package/dist/dist-esm/react-components/src/components/index.js +0 -7
- package/dist/dist-esm/react-components/src/components/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/styles/AttachmentCardGroup.styles.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.d.ts +3 -3
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js +0 -8
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.d.ts +13 -6
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js +49 -19
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.d.ts +0 -6
- package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js +6 -35
- package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/StreamMedia.styles.js +5 -2
- package/dist/dist-esm/react-components/src/components/styles/StreamMedia.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js +2 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.d.ts +1 -37
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.js +3 -30
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentUtils.d.ts +2 -4
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentUtils.js +2 -9
- package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.d.ts +1 -38
- package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js +4 -131
- package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/common.js +0 -2
- package/dist/dist-esm/react-components/src/components/utils/common.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/getParticipantsWhoHaveReadMessage.d.ts +1 -2
- package/dist/dist-esm/react-components/src/components/utils/getParticipantsWhoHaveReadMessage.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/responsive.js +6 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils.js +1 -6
- package/dist/dist-esm/react-components/src/components/utils.js.map +1 -1
- package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map +1 -1
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.d.ts +0 -4
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js +1 -3
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js.map +1 -1
- package/dist/dist-esm/react-components/src/index.d.ts +0 -1
- package/dist/dist-esm/react-components/src/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/LocalizationProvider.d.ts +0 -54
- package/dist/dist-esm/react-components/src/localization/LocalizationProvider.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/cy-GB/strings.json +1 -1
- package/dist/dist-esm/react-components/src/theming/generateTheme.js +10 -2
- package/dist/dist-esm/react-components/src/theming/generateTheme.js.map +1 -1
- package/dist/dist-esm/react-components/src/theming/icons.d.ts +0 -30
- package/dist/dist-esm/react-components/src/theming/icons.js +0 -91
- package/dist/dist-esm/react-components/src/theming/icons.js.map +1 -1
- package/dist/dist-esm/react-components/src/theming/themes.d.ts +0 -6
- package/dist/dist-esm/react-components/src/theming/themes.js +0 -9
- package/dist/dist-esm/react-components/src/theming/themes.js.map +1 -1
- package/dist/dist-esm/react-components/src/types/Attachment.d.ts +0 -13
- package/dist/dist-esm/react-components/src/types/Attachment.js.map +1 -1
- package/dist/dist-esm/react-components/src/types/ChatMessage.d.ts +1 -20
- package/dist/dist-esm/react-components/src/types/ChatMessage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.d.ts +0 -72
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +13 -23
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +4 -34
- package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +17 -47
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +68 -137
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +26 -24
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallingSoundSubscriber.d.ts +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallingSoundSubscriber.js +6 -7
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallingSoundSubscriber.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.js +9 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/createHandlers.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/createHandlers.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.d.ts +0 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +21 -24
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.d.ts +0 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +50 -13
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.d.ts +0 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js +0 -19
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js +2 -10
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.d.ts +0 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js +0 -19
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.d.ts +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js +41 -25
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +12 -10
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js +7 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js +5 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js +7 -6
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Devices.js +4 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Devices.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/EndCall.d.ts +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/EndCall.js +7 -23
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/EndCall.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.d.ts +3 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js +6 -7
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/ScreenShare.js +5 -5
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/ScreenShare.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useAdaptedSelector.js +1 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useAdaptedSelector.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +9 -5
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +0 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts +0 -7
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +16 -53
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.js +7 -9
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.js +5 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.d.ts +21 -25
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js +16 -16
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/dominantRemoteParticipantSelector.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/dominantRemoteParticipantSelector.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/localPreviewSelector.js +2 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/localPreviewSelector.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js +10 -11
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.d.ts +2 -14
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js +12 -68
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts +0 -65
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +5 -24
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/Strings.d.ts +0 -8
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/Strings.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +5 -22
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +14 -139
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +11 -28
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +13 -9
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.d.ts +4 -10
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.js +2 -14
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.d.ts +11 -11
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.d.ts +0 -5
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js +0 -13
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.d.ts +0 -27
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.js +1 -2
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.d.ts +0 -2
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +49 -234
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/Strings.d.ts +0 -20
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/Strings.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.d.ts +2 -6
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js +0 -36
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/ChatAdapter.d.ts +2 -12
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/ChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useHandlers.js +2 -13
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useHandlers.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.d.ts +6 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.js +11 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/index.d.ts +0 -2
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.d.ts +12 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.js +9 -0
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +28 -15
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/HiddenFocusStartPoint.js +4 -1
- package/dist/dist-esm/react-composites/src/composites/common/HiddenFocusStartPoint.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/MeetingPhoneInfoPaneContent.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/MeetingPhoneInfoPaneContent.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js +5 -6
- package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js +1 -2
- package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.d.ts +3 -0
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js +4 -7
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/SendBoxPicker.d.ts +2 -41
- package/dist/dist-esm/react-composites/src/composites/common/SendBoxPicker.js +0 -21
- package/dist/dist-esm/react-composites/src/composites/common/SendBoxPicker.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +3 -4
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/adapters.d.ts +0 -23
- package/dist/dist-esm/react-composites/src/composites/common/adapters.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/constants.d.ts +0 -5
- package/dist/dist-esm/react-composites/src/composites/common/constants.js +0 -5
- package/dist/dist-esm/react-composites/src/composites/common/constants.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts +6 -32
- package/dist/dist-esm/react-composites/src/composites/common/icons.js +0 -2
- package/dist/dist-esm/react-composites/src/composites/common/icons.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.d.ts +8 -0
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.js +24 -0
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependency.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.d.ts +8 -0
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.js +24 -0
- package/dist/dist-esm/react-composites/src/composites/common/resolveDeepNoiseSuppressionDependencyLazy.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/utils.d.ts +0 -4
- package/dist/dist-esm/react-composites/src/composites/common/utils.js +0 -22
- package/dist/dist-esm/react-composites/src/composites/common/utils.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/index.d.ts +2 -1
- package/dist/dist-esm/react-composites/src/composites/index.js +2 -0
- package/dist/dist-esm/react-composites/src/composites/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ar-SA/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/cs-CZ/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/cy-GB/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/de-DE/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/en-GB/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/es-ES/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/fi-FI/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/fr-FR/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/he-IL/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/it-IT/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ja-JP/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ko-KR/strings.json +1 -0
- package/dist/dist-esm/react-composites/src/composites/localization/locales/nb-NO/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/nl-NL/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/pl-PL/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/pt-BR/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ru-RU/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/sv-SE/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/tr-TR/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-CN/strings.json +2 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-TW/strings.json +2 -1
- package/package.json +8 -9
- package/dist/dist-cjs/communication-react/ChatMessageComponentAsRichTextEditBox-CK3wKmiQ.js +0 -202
- package/dist/dist-cjs/communication-react/ChatMessageComponentAsRichTextEditBox-CK3wKmiQ.js.map +0 -1
- package/dist/dist-cjs/communication-react/RichTextSendBoxWrapper-Duh89Mej.js +0 -50
- package/dist/dist-cjs/communication-react/RichTextSendBoxWrapper-Duh89Mej.js.map +0 -1
- package/dist/dist-cjs/communication-react/index-XC7Z08jO.js +0 -42425
- package/dist/dist-cjs/communication-react/index-XC7Z08jO.js.map +0 -1
- package/dist/dist-esm/acs-ui-common/src/dataConversion.d.ts +0 -6
- package/dist/dist-esm/acs-ui-common/src/dataConversion.js +0 -16
- package/dist/dist-esm/acs-ui-common/src/dataConversion.js.map +0 -1
- package/dist/dist-esm/acs-ui-common/src/removeImageTags.d.ts +0 -7
- package/dist/dist-esm/acs-ui-common/src/removeImageTags.js +0 -18
- package/dist/dist-esm/acs-ui-common/src/removeImageTags.js.map +0 -1
- package/dist/dist-esm/calling-stateful-client/src/BreakoutRoomsSubscriber.d.ts +0 -20
- package/dist/dist-esm/calling-stateful-client/src/BreakoutRoomsSubscriber.js +0 -118
- package/dist/dist-esm/calling-stateful-client/src/BreakoutRoomsSubscriber.js.map +0 -1
- package/dist/dist-esm/calling-stateful-client/src/LocalRecordingSubscriber.d.ts +0 -17
- package/dist/dist-esm/calling-stateful-client/src/LocalRecordingSubscriber.js +0 -33
- package/dist/dist-esm/calling-stateful-client/src/LocalRecordingSubscriber.js.map +0 -1
- package/dist/dist-esm/chat-component-bindings/src/utils/getImageAttachmentsFromHTMLContent.d.ts +0 -6
- package/dist/dist-esm/chat-component-bindings/src/utils/getImageAttachmentsFromHTMLContent.js +0 -20
- package/dist/dist-esm/chat-component-bindings/src/utils/getImageAttachmentsFromHTMLContent.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.d.ts +0 -10
- package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js +0 -15
- package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.d.ts +0 -24
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js +0 -192
- package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.d.ts +0 -69
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js +0 -36
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.d.ts +0 -75
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js +0 -67
- package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.d.ts +0 -105
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.js +0 -51
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.d.ts +0 -86
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js +0 -39
- package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/MentionPopover.d.ts +0 -121
- package/dist/dist-esm/react-components/src/components/MentionPopover.js +0 -119
- package/dist/dist-esm/react-components/src/components/MentionPopover.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.d.ts +0 -9
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.js +0 -29
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.d.ts +0 -30
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js +0 -98
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.d.ts +0 -12
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js +0 -23
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.d.ts +0 -15
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js +0 -42
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.d.ts +0 -24
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js +0 -64
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.d.ts +0 -20
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.js +0 -45
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.d.ts +0 -14
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.js +0 -42
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.d.ts +0 -29
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.js +0 -87
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.d.ts +0 -58
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js +0 -314
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.d.ts +0 -37
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js +0 -78
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.d.ts +0 -211
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js +0 -168
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.d.ts +0 -16
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js +0 -75
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.d.ts +0 -19
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js +0 -221
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.d.ts +0 -7
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.js +0 -51
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.d.ts +0 -15
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.js +0 -64
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.d.ts +0 -6
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.js +0 -13
- package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/SendBoxErrorBar.d.ts +0 -56
- package/dist/dist-esm/react-components/src/components/SendBoxErrorBar.js +0 -75
- package/dist/dist-esm/react-components/src/components/SendBoxErrorBar.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/SendBoxErrors.d.ts +0 -14
- package/dist/dist-esm/react-components/src/components/SendBoxErrors.js +0 -18
- package/dist/dist-esm/react-components/src/components/SendBoxErrors.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.d.ts +0 -24
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js +0 -550
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.d.ts +0 -152
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js +0 -816
- package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/BrowserPermissionDenied.styles.d.ts +0 -58
- package/dist/dist-esm/react-components/src/components/styles/BrowserPermissionDenied.styles.js +0 -144
- package/dist/dist-esm/react-components/src/components/styles/BrowserPermissionDenied.styles.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.d.ts +0 -26
- package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js +0 -69
- package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.d.ts +0 -82
- package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js +0 -320
- package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/RichTextInputBoxComponent.styles.d.ts +0 -21
- package/dist/dist-esm/react-components/src/components/styles/RichTextInputBoxComponent.styles.js +0 -38
- package/dist/dist-esm/react-components/src/components/styles/RichTextInputBoxComponent.styles.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/SitePermissions.styles.d.ts +0 -38
- package/dist/dist-esm/react-components/src/components/styles/SitePermissions.styles.js +0 -99
- package/dist/dist-esm/react-components/src/components/styles/SitePermissions.styles.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/Stack.style.d.ts +0 -5
- package/dist/dist-esm/react-components/src/components/styles/Stack.style.js +0 -32
- package/dist/dist-esm/react-components/src/components/styles/Stack.style.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/styles/UnsupportedEnvironment.styles.d.ts +0 -26
- package/dist/dist-esm/react-components/src/components/styles/UnsupportedEnvironment.styles.js +0 -69
- package/dist/dist-esm/react-components/src/components/styles/UnsupportedEnvironment.styles.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.d.ts +0 -72
- package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js +0 -174
- package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.d.ts +0 -33
- package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js +0 -116
- package/dist/dist-esm/react-components/src/components/utils/RichTextTableUtils.js.map +0 -1
- package/dist/dist-esm/react-components/src/components/utils/merge.d.ts +0 -7
- package/dist/dist-esm/react-components/src/components/utils/merge.js +0 -16
- package/dist/dist-esm/react-components/src/components/utils/merge.js.map +0 -1
- package/dist/dist-esm/react-components/src/theming/icons.styles.d.ts +0 -6
- package/dist/dist-esm/react-components/src/theming/icons.styles.js +0 -25
- package/dist/dist-esm/react-components/src/theming/icons.styles.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Banner.d.ts +0 -47
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Banner.js +0 -48
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Banner.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.d.ts +0 -11
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.js +0 -36
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.d.ts +0 -49
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.js +0 -196
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useCompositeStringsForNotificationStack.d.ts +0 -7
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useCompositeStringsForNotificationStack.js +0 -14
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useCompositeStringsForNotificationStack.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/UnsupportedBrowser.d.ts +0 -15
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/UnsupportedBrowser.js +0 -41
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/UnsupportedBrowser.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/parseTeamsUrl.d.ts +0 -8
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/parseTeamsUrl.js +0 -25
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/parseTeamsUrl.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.d.ts +0 -15
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.js +0 -23
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/AttachmentDownloadErrorBar.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.d.ts +0 -18
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.js +0 -18
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.d.ts +0 -49
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.js +0 -44
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadUtils.d.ts +0 -39
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadUtils.js +0 -253
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadUtils.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUpload.d.ts +0 -80
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUpload.js +0 -36
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUpload.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.d.ts +0 -38
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.js +0 -67
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.d.ts +0 -5
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.js +0 -5
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/Timer.d.ts +0 -12
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/Timer.js +0 -52
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/Timer.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/common/RichTextSendBoxWrapper.d.ts +0 -10
- package/dist/dist-esm/react-composites/src/composites/common/RichTextSendBoxWrapper.js +0 -16
- package/dist/dist-esm/react-composites/src/composites/common/RichTextSendBoxWrapper.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage | BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /**\n * Whether the status indicator for each message is displayed or not.\n */\n showMessageStatus?: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /**\n * Optional callback to override render of the avatar.\n *\n * @param userId - user Id\n */\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /**\n * Optional function to provide customized date format.\n * @beta\n */\n onDisplayDateTimeString?: (messageDate: Date) => string;\n /**\n * Optional props needed to display suggestions in the mention scenario.\n * @internal\n */\n mentionDisplayOptions?: MentionDisplayOptions;\n /**\n * Optional callback called when an inline image is clicked.\n * @beta\n */\n inlineImageOptions?: InlineImageOptions;\n /**\n * Optional callback to render message attachments in the message component.\n */\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /**\n * Optional callback to define custom actions for attachments.\n */\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/** @private */\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n inlineImageOptions,\n mentionDisplayOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment\n } = props;\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\n return customTimestamp || defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement | null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{\n id: string;\n displayName: string;\n }[]>([]);\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n const getContent = useCallback(() => {\n return getMessageBubbleContent(message, strings, userId, inlineImageOptions, mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment);\n }, [actionsForAttachment, inlineImageOptions, mentionDisplayOptions, message, onRenderAttachmentDownloads, strings, userId]);\n const isBlockedMessage = false || message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = <>\n <div key={props.message.messageId}>\n <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, chatMessageCommonStyles.bodyWithPlaceholderImage, chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n },\n ref: messageRef\n }} root={{\n className: chatMyMessageStyles.root,\n onBlur: e => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n }\n }} data-testid=\"chat-composite-message\" author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>} timestamp={<Text className={props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>} details={getMessageDetails()} actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}>\n {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n </>;\n return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}
|
1
|
+
{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AACvI,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAItE,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAKtE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AACvG,OAAO,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAgDhK,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAAiD,EAAe,EAAE;;IACvF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EACJ,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,EACX,uBAAuB,GAAG,CAAC,EAC3B,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACxH,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACjI,OAAO,eAAe,IAAI,gBAAgB,CAAC;IAC7C,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5E,mGAAmG;IACnG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,mDAAmD;IACnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7D,wFAAwF;IACxF,wDAAwD;IACxD,iEAAiE;IACjE,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,sBAAsB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAyD,SAAS,CAAC,CAAC;IACtJ,MAAM,kBAAkB,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;IAC7F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAG7C,EAAE,CAAC,CAAC;IACT,MAAM,eAAe,GAAG,0BAA0B,CAAC;QACjD,SAAS,EAAE,MAAA,OAAO,CAAC,qBAAqB,mCAAI,EAAE;QAC9C,OAAO,EAAE,kBAAkB;QAC3B,aAAa,EAAE,sBAAsB;QACrC,YAAY,EAAE,6BAA6B,KAAK,sBAAsB;QACtE,mBAAmB,EAAE,GAAG,EAAE;YACxB,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;gBACnC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;gBACrD,gCAAgC,CAAC,sBAAsB,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;QACD,KAAK;KACN,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAS,EAAE;QACnD,sFAAsF;QACtF,wFAAwF;QACxF,gCAAgC,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IACvC,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,aAAa,CAAO,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;QACpE,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,OAAO,uBAAuB,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,oBAAoB,CAAC,CAAC;IAClI,CAAC,EAAE,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,OAAO,EAAE,2BAA2B,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACtG,MAAM,gBAAgB,GAAG,KAAK,CAAC;IAC/B,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAC7D,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,MAAM,WAAW,GAAG;QAChB,6BAAK,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS;YAC/B,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE;oBACvE,kGAAkG;oBAClG,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;oBAC3T,KAAK,oBACA,sBAAsB,CAAC,qBAAqB,CAAC,CACjD;oBACD,GAAG,EAAE,UAAU;iBAChB,EAAE,IAAI,EAAE;oBACP,SAAS,EAAE,mBAAmB,CAAC,IAAI;oBACnC,MAAM,EAAE,CAAC,CAAC,EAAE;wBACV,sGAAsG;wBACtG,iGAAiG;wBACjG,IAAI,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,OAAO,EAAE,CAAC;4BAC3C,mHAAmH;4BACnH,OAAO;wBACT,CAAC;wBACD,MAAM,wBAAwB,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;wBAC3E,UAAU,CAAC,wBAAwB,CAAC,CAAC;oBACvC,CAAC;oBACD,OAAO,EAAE,GAAG,EAAE;wBACZ,sFAAsF;wBACtF,qHAAqH;wBACrH,UAAU,CAAC,IAAI,CAAC,CAAC;oBACnB,CAAC;iBACF,iBAAc,wBAAwB,EAAC,MAAM,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,iBAAiB,CAAQ,EAAE,SAAS,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,gBAAc,GAAG,CAAC,gBAAgB,IAC1R,kBAAkB,CACd,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,OAAO,EAAE;oBACpD,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;oBACnC,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI;oBAChD,+EAA+E;oBAC/E,OAAO,KAAI,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,UAAU,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;iBACzL,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE;oBAC3K,IAAI,CAAC,qBAAqB,EAAE,CAAC;wBAC3B,OAAO;oBACT,CAAC;oBACD,oEAAoE;oBACpE,gEAAgE;oBAChE,uCAAuC;oBACvC,yEAAyE;oBACzE,8DAA8D;oBAC9D,gCAAgC,CAAC,UAAU,CAAC,CAAC;oBAC7C,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;wBACnC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;oBACvD,CAAC;gBACH,CAAC,IACI,UAAU,EAAE,CACC,CACZ;QACL,kBAAkB,IAAI,oBAAC,uBAAuB,IAAC,MAAM,EAAE,CAAC,6BAA6B,EAAE,MAAM,EAAE,6BAA6B,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,QAAQ,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CACzf,CAAC;IACN,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /**\n * Whether the status indicator for each message is displayed or not.\n */\n showMessageStatus?: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /**\n * Optional callback to override render of the avatar.\n *\n * @param userId - user Id\n */\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /**\n * Optional function to provide customized date format.\n * @beta\n */\n onDisplayDateTimeString?: (messageDate: Date) => string;\n /**\n * Optional callback called when an inline image is clicked.\n * @beta\n */\n inlineImageOptions?: InlineImageOptions;\n /**\n * Optional callback to render message attachments in the message component.\n */\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /**\n * Optional callback to define custom actions for attachments.\n */\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/** @private */\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n inlineImageOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment\n } = props;\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\n return customTimestamp || defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement | null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n const [messageReadBy, setMessageReadBy] = useState<{\n id: string;\n displayName: string;\n }[]>([]);\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n const getContent = useCallback(() => {\n return getMessageBubbleContent(message, strings, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment);\n }, [actionsForAttachment, inlineImageOptions, message, onRenderAttachmentDownloads, strings, userId]);\n const isBlockedMessage = false;\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = <>\n <div key={props.message.messageId}>\n <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n },\n ref: messageRef\n }} root={{\n className: chatMyMessageStyles.root,\n onBlur: e => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n }\n }} data-testid=\"chat-composite-message\" author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>} timestamp={<Text className={props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>} details={getMessageDetails()} actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}>\n {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n </>;\n return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}
|
@@ -17,7 +17,7 @@ import { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils'
|
|
17
17
|
* @private
|
18
18
|
*/
|
19
19
|
export const FluentChatMyMessageComponent = (props) => {
|
20
|
-
const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick,
|
20
|
+
const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, inlineImageOptions, userId, defaultStatusRenderer, statusToRender, actionsForAttachment, onRenderAttachmentDownloads } = props;
|
21
21
|
const chatMessageRenderStyles = useChatMessageRenderStyles();
|
22
22
|
const onRenderAttachmentDownloadsMemo = useMemo(() => {
|
23
23
|
return onRenderAttachmentDownloads;
|
@@ -26,13 +26,13 @@ export const FluentChatMyMessageComponent = (props) => {
|
|
26
26
|
// To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
|
27
27
|
// needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
|
28
28
|
const defaultChatMessageRenderer = useCallback((messageProps) => {
|
29
|
-
if (messageProps.message.messageType === 'chat'
|
30
|
-
return React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloadsMemo, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick,
|
29
|
+
if (messageProps.message.messageType === 'chat') {
|
30
|
+
return React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloadsMemo, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, inlineImageOptions: inlineImageOptions, actionsForAttachment: actionsForAttachment }));
|
31
31
|
}
|
32
32
|
return React.createElement(React.Fragment, null);
|
33
|
-
}, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId,
|
33
|
+
}, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloadsMemo, actionsForAttachment,
|
34
34
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
35
|
-
new Date().toDateString()
|
35
|
+
new Date().toDateString()]);
|
36
36
|
const messageRenderer = useCallback((messageProps) => {
|
37
37
|
return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
|
38
38
|
}, [defaultChatMessageRenderer, onRenderMessage]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n onDisplayDateTimeString,\n inlineImageOptions,\n mentionOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads,\n isRichTextEditorEnabled,\n onPaste,\n inlineImagesWithProgress,\n onRemoveInlineImage,\n onInsertInlineImage\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n const onRenderAttachmentDownloadsMemo = useMemo(() => {\n return onRenderAttachmentDownloads;\n return undefined;\n }, [onRenderAttachmentDownloads]);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat' || messageProps.message.messageType === 'blocked') {\n return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} onDisplayDateTimeString={onDisplayDateTimeString} inlineImageOptions={inlineImageOptions} mentionOptions={mentionOptions} actionsForAttachment={actionsForAttachment} isRichTextEditorEnabled={isRichTextEditorEnabled} onPaste={onPaste} onRemoveInlineImage={onRemoveInlineImage} onInsertInlineImage={onInsertInlineImage} inlineImagesWithProgress={inlineImagesWithProgress} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, onDisplayDateTimeString, inlineImageOptions, mentionOptions, onRenderAttachmentDownloadsMemo, actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString(), isRichTextEditorEnabled, onPaste, onRemoveInlineImage, onInsertInlineImage, inlineImagesWithProgress]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage | BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>;\n};"]}
|
1
|
+
{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n inlineImageOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n const onRenderAttachmentDownloadsMemo = useMemo(() => {\n return onRenderAttachmentDownloads;\n return undefined;\n }, [onRenderAttachmentDownloads]);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat') {\n return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} inlineImageOptions={inlineImageOptions} actionsForAttachment={actionsForAttachment} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloadsMemo, actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString()]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>;\n};"]}
|
@@ -131,8 +131,9 @@ const DialpadContainer = (props) => {
|
|
131
131
|
}, [textFieldValue]);
|
132
132
|
const onClickDialpad = (input, index) => {
|
133
133
|
setText(plainTextValue + input);
|
134
|
-
|
135
|
-
|
134
|
+
const tone = DtmfTones[index];
|
135
|
+
if (onSendDtmfTone && tone) {
|
136
|
+
onSendDtmfTone(tone);
|
136
137
|
}
|
137
138
|
if (onClickDialpadButton) {
|
138
139
|
onClickDialpadButton(input, index);
|
@@ -145,8 +146,9 @@ const DialpadContainer = (props) => {
|
|
145
146
|
else {
|
146
147
|
setText(plainTextValue + input);
|
147
148
|
}
|
148
|
-
|
149
|
-
|
149
|
+
const tone = DtmfTones[index];
|
150
|
+
if (onSendDtmfTone && tone) {
|
151
|
+
onSendDtmfTone(tone);
|
150
152
|
}
|
151
153
|
if (onClickDialpadButton) {
|
152
154
|
onClickDialpadButton(input, index);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { _formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /**\n * function to send dtmf tones on button click\n */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /**\n * Callback for dialpad button behavior\n */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /**\n * set dialpad textfield content\n */\n textFieldValue?: string;\n /**\n * on change function for text field, provides an unformatted plain text\n */\n onChange?: (input: string) => void;\n /**\n * flag to determine when to show/hide delete button, default true\n */\n showDeleteButton?: boolean;\n /**\n * Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n */\n longPressTrigger?: LongPressTrigger;\n /**\n * Styles for customizing the dialpad component\n */\n styles?: DialpadStyles;\n /**\n * Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n */\n disableDtmfPlayback?: boolean;\n /**\n * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n */\n dialpadMode?: DialpadMode;\n /**\n * Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n */\n dtmfAudioContext?: AudioContext;\n}\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: DtmfFrequenciesKeys;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n digit: '1'\n}, {\n digit: '2',\n letter: 'ABC'\n}, {\n digit: '3',\n letter: 'DEF'\n}], [{\n digit: '4',\n letter: 'GHI'\n}, {\n digit: '5',\n letter: 'JKL'\n}, {\n digit: '6',\n letter: 'MNO'\n}], [{\n digit: '7',\n letter: 'PQRS'\n}, {\n digit: '8',\n letter: 'TUV'\n}, {\n digit: '9',\n letter: 'WXYZ'\n}], [{\n digit: '*'\n}, {\n digit: '0',\n letter: '+'\n}, {\n digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n digit: DtmfFrequenciesKeys;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n const {\n digit,\n index,\n onClick,\n onLongPress,\n longPressTrigger,\n dtmfToneAudioContext,\n disableDtmfPlayback\n } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n const useLongPressProps = React.useMemo(() => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }), [digit, index, longPressTrigger, onClick, onLongPress]);\n const longPressHandlers = useLongPress(useLongPressProps);\n return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n dtmfToneSound.current.stop();\n return;\n }\n longPressHandlers.onKeyDown();\n }} onKeyUp={e => {\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }} onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }} onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }} onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }} onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }} onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}>\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>;\n};\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n const theme = useTheme();\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer',\n dtmfAudioContext\n } = props;\n const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} value={textFieldValue ? textFieldValue : _formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }} onClick={e => {\n e.preventDefault();\n }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n iconName: 'DialpadBackspace'\n }} />}\n </>} />}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n childrenGap: '1rem'\n }}>\n {rows.map((button, columnIndex) => <DialpadButton key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n </Stack>;\n })}\n </FocusZone>\n </Stack>;\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n const localeStrings = useLocale().strings.dialpad;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};"]}
|
1
|
+
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { _formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /**\n * function to send dtmf tones on button click\n */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /**\n * Callback for dialpad button behavior\n */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /**\n * set dialpad textfield content\n */\n textFieldValue?: string;\n /**\n * on change function for text field, provides an unformatted plain text\n */\n onChange?: (input: string) => void;\n /**\n * flag to determine when to show/hide delete button, default true\n */\n showDeleteButton?: boolean;\n /**\n * Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n */\n longPressTrigger?: LongPressTrigger;\n /**\n * Styles for customizing the dialpad component\n */\n styles?: DialpadStyles;\n /**\n * Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n */\n disableDtmfPlayback?: boolean;\n /**\n * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n */\n dialpadMode?: DialpadMode;\n /**\n * Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n */\n dtmfAudioContext?: AudioContext;\n}\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: DtmfFrequenciesKeys;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n digit: '1'\n}, {\n digit: '2',\n letter: 'ABC'\n}, {\n digit: '3',\n letter: 'DEF'\n}], [{\n digit: '4',\n letter: 'GHI'\n}, {\n digit: '5',\n letter: 'JKL'\n}, {\n digit: '6',\n letter: 'MNO'\n}], [{\n digit: '7',\n letter: 'PQRS'\n}, {\n digit: '8',\n letter: 'TUV'\n}, {\n digit: '9',\n letter: 'WXYZ'\n}], [{\n digit: '*'\n}, {\n digit: '0',\n letter: '+'\n}, {\n digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n digit: DtmfFrequenciesKeys;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n const {\n digit,\n index,\n onClick,\n onLongPress,\n longPressTrigger,\n dtmfToneAudioContext,\n disableDtmfPlayback\n } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n const useLongPressProps = React.useMemo(() => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }), [digit, index, longPressTrigger, onClick, onLongPress]);\n const longPressHandlers = useLongPress(useLongPressProps);\n return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n dtmfToneSound.current.stop();\n return;\n }\n longPressHandlers.onKeyDown();\n }} onKeyUp={e => {\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }} onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }} onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }} onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }} onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }} onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}>\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>;\n};\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n const theme = useTheme();\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer',\n dtmfAudioContext\n } = props;\n const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n const tone = DtmfTones[index];\n if (onSendDtmfTone && tone) {\n onSendDtmfTone(tone);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n const tone = DtmfTones[index];\n if (onSendDtmfTone && tone) {\n onSendDtmfTone(tone);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} value={textFieldValue ? textFieldValue : _formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }} onClick={e => {\n e.preventDefault();\n }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n iconName: 'DialpadBackspace'\n }} />}\n </>} />}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n childrenGap: '1rem'\n }}>\n {rows.map((button, columnIndex) => <DialpadButton key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n </Stack>;\n })}\n </FocusZone>\n </Stack>;\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n const localeStrings = useLocale().strings.dialpad;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};"]}
|
@@ -15,6 +15,9 @@ export const GridLayout = (props) => {
|
|
15
15
|
const [currentHeight, setCurrentHeight] = useState(0);
|
16
16
|
const containerRef = useRef(null);
|
17
17
|
const observer = useRef(new ResizeObserver((entries) => {
|
18
|
+
if (!entries[0]) {
|
19
|
+
return;
|
20
|
+
}
|
18
21
|
const { width, height } = entries[0].contentRect;
|
19
22
|
setCurrentWidth(width);
|
20
23
|
setCurrentHeight(height);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n children: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <GridLayout styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n /** Styles for each child of {@link GridLayout} */\n children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n const {\n children,\n styles\n } = props;\n const numberOfChildren = React.Children.count(children);\n const [currentWidth, setCurrentWidth] = useState(0);\n const [currentHeight, setCurrentHeight] = useState(0);\n const containerRef = useRef<HTMLDivElement>(null);\n const observer = useRef(new ResizeObserver((entries): void => {\n const {\n width,\n height\n } = entries[0].contentRect;\n setCurrentWidth(width);\n setCurrentHeight(height);\n }));\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, containerRef]);\n const gridProps = useMemo(() => {\n return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n }, [numberOfChildren, currentWidth, currentHeight]);\n const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n return <div ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)} data-ui-id=\"grid-layout\">\n {children}\n </div>;\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n * ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n * ______________\n * | | | |\n * |____|____| |\n * | | | |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n * _______________\n * | | |\n * |_______|_______|\n * | | | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n fillDirection: FillDirection;\n rows: number;\n columns: number;\n};\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n if (numberOfItems <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: 0,\n columns: 0\n };\n }\n // If width or height are 0 then we return rows and column evenly\n if (width <= 0 || height <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: Math.ceil(Math.sqrt(numberOfItems)),\n columns: Math.ceil(Math.sqrt(numberOfItems))\n };\n }\n const aspectRatio = width / height;\n // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;\n // Make sure rows do not exceed numberOfItems\n rows = Math.min(rows, numberOfItems);\n // Given the rows, get the minimum columns needed to create enough cells for the number of items\n let columns = Math.ceil(numberOfItems / rows);\n\n // Default fill direction to horizontal\n let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n while (rows < numberOfItems) {\n // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n }\n if (numberOfItems < rows * columns) {\n // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n // column of 2 cells which is less by more than 1 compared to the unstretched column.\n // _________\n // |____| |\n // |____|____|\n // |____| |\n // |____|____|\n\n const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n if (!canStretchVertically && !canStretchHorizontally) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n } else if (!canStretchVertically) {\n break;\n } else if (!canStretchHorizontally) {\n fillDirection = 'vertical';\n break;\n }\n\n // We need to figure out whether the big cells should stretch horizontally or vertically\n // to fill in the empty spaces\n // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n // horizontally or vertically\n // ______________________ _______________________\n // | | | | | | | |\n // |_______|_______|______| |_______|_______| |\n // | | | | | | |\n // |___________|__________| |_______|_______|_______|\n\n // Calculate the aspect ratio of big cells stretched horizontally\n const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;\n // Calculate the aspect ratio of big cells stretched vertically\n const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;\n // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n fillDirection = 'vertical';\n }\n }\n }\n break;\n }\n return {\n fillDirection,\n rows,\n columns\n };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n const isHorizontal = gridProps.fillDirection === 'horizontal';\n // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n // Get grid units\n // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n const units = smallCellsPerBlock * bigCellsPerBlock;\n const gridStyles = isHorizontal ? {\n gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n gridAutoFlow: 'row'\n } : {\n gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n gridAutoFlow: 'column'\n };\n const smallCellStyle = isHorizontal ? {\n '> *': {\n gridColumn: `auto / span ${units / smallCellsPerBlock}`\n }\n } : {\n '> *': {\n gridRow: `auto / span ${units / smallCellsPerBlock}`\n }\n };\n\n // If there are big cells, we are choosing to place the latest children into the big cells.\n // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n const bigCellStyle = numBigCells ? {\n [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {\n gridColumn: `auto / span ${units / bigCellsPerBlock}`\n } : {\n gridRow: `auto / span ${units / bigCellsPerBlock}`\n }\n } : {};\n return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};"]}
|
1
|
+
{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/**\n * Props for {@link GridLayout}.\n *\n * @public\n */\nexport interface GridLayoutProps {\n children: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <GridLayout styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: BaseCustomStyles;\n}\n\n/**\n * {@link GridLayout} Component Styles.\n * @public\n */\nexport interface GridLayoutStyles extends BaseCustomStyles {\n /** Styles for each child of {@link GridLayout} */\n children?: IStyle;\n}\n\n/**\n * A component to lay out audio / video participants tiles in a call.\n *\n * @public\n */\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n const {\n children,\n styles\n } = props;\n const numberOfChildren = React.Children.count(children);\n const [currentWidth, setCurrentWidth] = useState(0);\n const [currentHeight, setCurrentHeight] = useState(0);\n const containerRef = useRef<HTMLDivElement>(null);\n const observer = useRef(new ResizeObserver((entries): void => {\n if (!entries[0]) {\n return;\n }\n const {\n width,\n height\n } = entries[0].contentRect;\n setCurrentWidth(width);\n setCurrentHeight(height);\n }));\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, containerRef]);\n const gridProps = useMemo(() => {\n return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n }, [numberOfChildren, currentWidth, currentHeight]);\n const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n return <div ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)} data-ui-id=\"grid-layout\">\n {children}\n </div>;\n};\n\n/**\n * The cell aspect ratio we aim for in a grid\n */\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/**\n * The minimum cell aspect ratio we allow\n */\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/**\n * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n *\n * @Example\n * ```\n * ______________________\n * |_______|_______|______|\n * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.\n * ______________\n * | | | |\n * |____|____| |\n * | | | |\n * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.\n * _______________\n * | | |\n * |_______|_______|\n * | | | If all cells are equal, we default the fill direction as horizontal.\n * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n */\ntype GridProps = {\n fillDirection: FillDirection;\n rows: number;\n columns: number;\n};\ntype FillDirection = 'horizontal' | 'vertical';\n\n/**\n * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n */\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n if (numberOfItems <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: 0,\n columns: 0\n };\n }\n // If width or height are 0 then we return rows and column evenly\n if (width <= 0 || height <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: Math.ceil(Math.sqrt(numberOfItems)),\n columns: Math.ceil(Math.sqrt(numberOfItems))\n };\n }\n const aspectRatio = width / height;\n // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n let rows = Math.floor(Math.sqrt(TARGET_CELL_ASPECT_RATIO / aspectRatio * numberOfItems)) || 1;\n // Make sure rows do not exceed numberOfItems\n rows = Math.min(rows, numberOfItems);\n // Given the rows, get the minimum columns needed to create enough cells for the number of items\n let columns = Math.ceil(numberOfItems / rows);\n\n // Default fill direction to horizontal\n let fillDirection: 'horizontal' | 'vertical' = 'horizontal';\n while (rows < numberOfItems) {\n // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n if (rows / columns * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n }\n if (numberOfItems < rows * columns) {\n // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n // column of 2 cells which is less by more than 1 compared to the unstretched column.\n // _________\n // |____| |\n // |____|____|\n // |____| |\n // |____|____|\n\n const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n if (!canStretchVertically && !canStretchHorizontally) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n } else if (!canStretchVertically) {\n break;\n } else if (!canStretchHorizontally) {\n fillDirection = 'vertical';\n break;\n }\n\n // We need to figure out whether the big cells should stretch horizontally or vertically\n // to fill in the empty spaces\n // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n // horizontally or vertically\n // ______________________ _______________________\n // | | | | | | | |\n // |_______|_______|______| |_______|_______| |\n // | | | | | | |\n // |___________|__________| |_______|_______|_______|\n\n // Calculate the aspect ratio of big cells stretched horizontally\n const horizontallyStretchedCellRatio = rows / (columns - 1) * aspectRatio;\n // Calculate the aspect ratio of big cells stretched vertically\n const verticallyStretchedCellRatio = (rows - 1) / columns * aspectRatio;\n // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n fillDirection = 'vertical';\n }\n }\n }\n break;\n }\n return {\n fillDirection,\n rows,\n columns\n };\n};\n\n/**\n * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n */\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n const isHorizontal = gridProps.fillDirection === 'horizontal';\n // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;\n // Get grid units\n // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n const units = smallCellsPerBlock * bigCellsPerBlock;\n const gridStyles = isHorizontal ? {\n gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n gridAutoFlow: 'row'\n } : {\n gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n gridAutoFlow: 'column'\n };\n const smallCellStyle = isHorizontal ? {\n '> *': {\n gridColumn: `auto / span ${units / smallCellsPerBlock}`\n }\n } : {\n '> *': {\n gridRow: `auto / span ${units / smallCellsPerBlock}`\n }\n };\n\n // If there are big cells, we are choosing to place the latest children into the big cells.\n // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below\n const bigCellStyle = numBigCells ? {\n [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal ? {\n gridColumn: `auto / span ${units / bigCellsPerBlock}`\n } : {\n gridRow: `auto / span ${units / bigCellsPerBlock}`\n }\n } : {};\n return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};"]}
|
@@ -34,12 +34,11 @@ export const HorizontalGallery = (props) => {
|
|
34
34
|
const firstIndexOfCurrentPage = page * childrenPerPage;
|
35
35
|
const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
|
36
36
|
const childrenOnCurrentPage = useMemo(() => {
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
});
|
37
|
+
const indexes = indexesArray === null || indexesArray === void 0 ? void 0 : indexesArray[clippedPage];
|
38
|
+
if (!indexes) {
|
39
|
+
return [];
|
41
40
|
}
|
42
|
-
return [];
|
41
|
+
return indexes.map(index => React.Children.toArray(children)[index]);
|
43
42
|
}, [indexesArray, clippedPage, children]);
|
44
43
|
const showButtons = numberOfChildren > childrenPerPage;
|
45
44
|
const disablePreviousButton = page === 0;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAmCpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,QAAQ,EACR,eAAe,GAAG,yBAAyB,EAC3C,MAAM,EACN,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,MAAA,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,
|
1
|
+
{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAmCpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,QAAQ,EACR,eAAe,GAAG,yBAAyB,EAC3C,MAAM,EACN,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,MAAA,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,MAAM,OAAO,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,IAAI,KAAK,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,KAAK,QAAQ,CAAC;IAC5C,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,yDAAyD;IACzD,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACzB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACzE,WAAW,IAAI,oBAAC,iCAAiC,IAAC,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,GAAG,EAAE,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,GAAG,CAAC,4BAA4B,GAAI;QACxT,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,IAC7D,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACxC,OAAO,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,gBAAc,GAAG,CAAC,0BAA0B,IACtF,KAAK,CACK,CAAC;QACpB,CAAC,CAAC,CACM;QACP,WAAW,IAAI,oBAAC,iCAAiC,IAAC,GAAG,EAAC,iBAAiB,EAAC,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EAAE,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,CAAC,6BAA6B,GAAI,CAC3R,CAAC;AACb,CAAC,CAAC;AACF,MAAM,iCAAiC,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,gBAAc,KAAK,CAAC,UAAU,IACnK,KAAK,CAAC,IAAI,CACG,CAAC;AACrB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n /** Styles for each child of {@link HorizontalGallery} */\n children?: IStyle;\n /** Styles for navigation button to go to previous page */\n previousButton?: IStyle;\n /** Styles for navigation button to go to next page */\n nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n children: React.ReactNode;\n /**\n * Styles for HorizontalGallery\n */\n styles?: HorizontalGalleryStyles;\n /**\n * Children shown per page\n * @defaultValue 5\n */\n childrenPerPage?: number;\n /**\n * helper function to choose which tiles to give video to.\n */\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n const {\n children,\n childrenPerPage = DEFAULT_CHILDREN_PER_PAGE,\n styles,\n onFetchTilesToRender\n } = props;\n const ids = useIdentifiers();\n const [page, setPage] = useState(0);\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page] ?? []);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = page * childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n const indexes = indexesArray?.[clippedPage];\n if (!indexes) {\n return [];\n }\n return indexes.map(index => React.Children.toArray(children)[index]);\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n {showButtons && <HorizontalGalleryNavigationButton key=\"previous-nav-button\" icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />} styles={styles?.previousButton} onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))} disabled={disablePreviousButton} identifier={ids.overflowGalleryLeftNavButton} />}\n <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n {childrenOnCurrentPage.map((child, i) => {\n return <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <HorizontalGalleryNavigationButton key=\"next-nav-button\" icon={<Icon iconName=\"HorizontalGalleryRightButton\" />} styles={styles?.nextButton} onClick={() => setPage(Math.min(lastPage, page + 1))} disabled={disableNextButton} identifier={ids.overflowGalleryRightNavButton} />}\n </Stack>;\n};\nconst HorizontalGalleryNavigationButton = (props: {\n icon: JSX.Element;\n styles: IStyle;\n onClick?: () => void;\n disabled?: boolean;\n identifier?: string;\n}): JSX.Element => {\n const theme = useTheme();\n return <DefaultButton className={mergeStyles(leftRightButtonStyles(theme), props.styles)} onClick={props.onClick} disabled={props.disabled} data-ui-id={props.identifier}>\n {props.icon}\n </DefaultButton>;\n};"]}
|
@@ -5,7 +5,6 @@ import React, { useMemo, useState } from 'react';
|
|
5
5
|
import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
|
6
6
|
import { FluentThemeProvider } from '../theming/FluentThemeProvider';
|
7
7
|
import { useLocale } from '../localization';
|
8
|
-
import { imageOverlayTheme } from '../theming';
|
9
8
|
import { darkTheme } from '../theming';
|
10
9
|
/**
|
11
10
|
* Component to render a fullscreen modal for a selected image.
|
@@ -17,7 +16,6 @@ export const ImageOverlay = (props) => {
|
|
17
16
|
const localeStrings = useLocale().strings.imageOverlay;
|
18
17
|
const [isImageLoaded, setIsImageLoaded] = useState(true);
|
19
18
|
const overlayTheme = useMemo(() => {
|
20
|
-
return imageOverlayTheme;
|
21
19
|
return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
|
22
20
|
}, []);
|
23
21
|
const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAgB,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACtX,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n /**\n * Boolean that controls whether the modal is displayed.\n */\n isOpen: boolean;\n /**\n * Image source used to display the image in a large scale.\n */\n imageSrc: string;\n /**\n * Optional string used as a alt text for the image. @default 'image'\n */\n altText?: string;\n /**\n * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n */\n title?: string;\n /**\n * Optional JSX element used as a title icon and displayed to the left of the title element.\n */\n titleIcon?: JSX.Element;\n /**\n * Callback to invoke when the ImageOverlay modal is dismissed\n */\n onDismiss: () => void;\n /**\n * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n */\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n /**\n * Download button label for ImageOverlay\n */\n downloadButtonLabel: string;\n /**\n * Dismiss button aria label for ImageOverlay\n */\n dismissButtonAriaLabel: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const {\n isOpen,\n imageSrc,\n title,\n titleIcon,\n altText,\n onDownloadButtonClicked,\n onDismiss\n } = props;\n const localeStrings = useLocale().strings.imageOverlay;\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n const overlayTheme = useMemo((): PartialTheme => {\n return {\n ...darkTheme,\n semanticColors: {\n ...darkTheme.semanticColors,\n bodyBackground: 'rgba(0, 0, 0, 0.85)'\n }\n };\n }, []);\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n const renderHeaderBar = (): JSX.Element => {\n return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n </Stack>\n </Stack>;\n };\n const renderBodyWithLightDismiss = (): JSX.Element => {\n return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n setIsImageLoaded(false);\n }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n event.persist();\n }} />}\n </Stack>;\n };\n return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n styles: {\n ...overlayStyles(overlayTheme)\n }\n }} styles={{\n main: focusTrapZoneStyle,\n scrollableContent: scrollableContentStyle\n }} isDarkOverlay={true}>\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>;\n};"]}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React, { ReactNode, FormEvent } from 'react';
|
2
2
|
import { IStyle, ITextField } from '@fluentui/react';
|
3
3
|
import { BaseCustomStyles } from '../types';
|
4
|
-
import { MentionLookupOptions } from './MentionPopover';
|
5
4
|
/**
|
6
5
|
* @private
|
7
6
|
*/
|
@@ -30,7 +29,6 @@ type InputBoxComponentProps = {
|
|
30
29
|
disabled?: boolean;
|
31
30
|
styles?: InputBoxStylesProps;
|
32
31
|
autoFocus?: 'sendBoxTextField';
|
33
|
-
mentionLookupOptions?: MentionLookupOptions;
|
34
32
|
};
|
35
33
|
/**
|
36
34
|
* @private
|
@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
|
|
4
4
|
import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
|
5
5
|
import { isEnterKeyEventFromCompositionSession } from './utils';
|
6
6
|
import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
|
7
|
-
import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
|
8
7
|
/**
|
9
8
|
* @private
|
10
9
|
*/
|
@@ -51,20 +50,6 @@ export const InputBoxComponent = (props) => {
|
|
51
50
|
errorMessage,
|
52
51
|
onRenderSuffix: props.children ? onRenderChildren : undefined
|
53
52
|
};
|
54
|
-
const textFieldWithMentionProps = {
|
55
|
-
textFieldProps: textFieldProps,
|
56
|
-
dataUiId: dataUiId,
|
57
|
-
textValue: textValue,
|
58
|
-
onChange: onChange,
|
59
|
-
onKeyDown: onKeyDown,
|
60
|
-
onEnterKeyDown: onEnterKeyDown,
|
61
|
-
textFieldRef: textFieldRef,
|
62
|
-
supportNewline: supportNewline,
|
63
|
-
mentionLookupOptions: props.mentionLookupOptions
|
64
|
-
};
|
65
|
-
if (props.mentionLookupOptions) {
|
66
|
-
return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
|
67
|
-
}
|
68
53
|
return React.createElement("div", { style: textFieldProps.errorMessage ? {
|
69
54
|
padding: '0 0 5px 5px'
|
70
55
|
} : undefined },
|