@azure/communication-react 1.22.0-alpha-202411190017 → 1.22.0-alpha-202411220017

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../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 {\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle,\n  chatMessageDateFailedStyle\n} 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';\n/* @conditional-compile-remove(data-loss-prevention) */\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';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n  generateCustomizedTimestamp,\n  generateDefaultTimestamp,\n  getMessageBubbleContent,\n  getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ 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: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => 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  /* @conditional-compile-remove(mention) */\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\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    /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions,\n    onDisplayDateTimeString,\n    onRenderAttachmentDownloads,\n    actionsForAttachment\n  } = props;\n\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn\n      ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n      : undefined;\n\n    const customTimestamp = message.createdOn\n      ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n      : '';\n\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<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; 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\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\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message as ChatMessage);\n  }, [message]);\n\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\n  const getContent = useCallback(() => {\n    return getMessageBubbleContent(\n      message,\n      strings,\n      userId,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionDisplayOptions,\n      onRenderAttachmentDownloads,\n      actionsForAttachment\n    );\n  }, [\n    actionsForAttachment,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions,\n    message,\n    onRenderAttachmentDownloads,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = (\n    <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage\n          attached={attached}\n          key={props.message.messageId}\n          body={{\n            // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n            className: mergeClasses(\n              chatMessageCommonStyles.body,\n              chatMyMessageStyles.body,\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              chatMessageCommonStyles.bodyWithPlaceholderImage,\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              chatMyMessageStyles.bodyWithPlaceholderImage,\n              isBlockedMessage\n                ? chatMessageCommonStyles.blocked\n                : props.message.status === 'failed'\n                  ? chatMessageCommonStyles.failed\n                  : undefined,\n              attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n              /* @conditional-compile-remove(file-sharing-acs) */\n              hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined,\n              mergeStyles(messageContainerStyle)\n            ),\n            style: { ...createStyleFromV8Style(messageContainerStyle) },\n            ref: messageRef\n          }}\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          }}\n          data-testid=\"chat-composite-message\"\n          author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>}\n          timestamp={\n            <Text\n              className={\n                props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)\n              }\n              data-ui-id={ids.messageTimestamp}\n            >\n              {formattedTimestamp}\n            </Text>\n          }\n          details={getMessageDetails()}\n          actions={{\n            children: actionMenuProps?.children,\n            className: mergeClasses(\n              chatMyMessageStyles.menu,\n              // Make actions menu visible when the message is focused or the flyout is shown\n              focused || chatMessageActionFlyoutTarget?.current\n                ? chatMyMessageStyles.menuVisible\n                : chatMyMessageStyles.menuHidden,\n              attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n            )\n          }}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          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        >\n          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
+{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../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 {\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle,\n  chatMessageDateFailedStyle\n} 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';\n/* @conditional-compile-remove(data-loss-prevention) */\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';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n  generateCustomizedTimestamp,\n  generateDefaultTimestamp,\n  getMessageBubbleContent,\n  getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ 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: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => 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  /* @conditional-compile-remove(mention) */\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\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    /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions,\n    onDisplayDateTimeString,\n    onRenderAttachmentDownloads,\n    actionsForAttachment\n  } = props;\n\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn\n      ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n      : undefined;\n\n    const customTimestamp = message.createdOn\n      ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n      : '';\n\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<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; 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\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\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message as ChatMessage);\n  }, [message]);\n\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\n  const getContent = useCallback(() => {\n    return getMessageBubbleContent(\n      message,\n      strings,\n      userId,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionDisplayOptions,\n      onRenderAttachmentDownloads,\n      actionsForAttachment\n    );\n  }, [\n    actionsForAttachment,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions,\n    message,\n    onRenderAttachmentDownloads,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = (\n    <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage\n          attached={attached}\n          key={props.message.messageId}\n          body={{\n            // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n            className: mergeClasses(\n              chatMessageCommonStyles.body,\n              chatMyMessageStyles.body,\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              chatMessageCommonStyles.bodyWithPlaceholderImage,\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              chatMyMessageStyles.bodyWithPlaceholderImage,\n              isBlockedMessage\n                ? chatMessageCommonStyles.blocked\n                : props.message.status === 'failed'\n                  ? chatMessageCommonStyles.failed\n                  : undefined,\n              attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n              /* @conditional-compile-remove(file-sharing-acs) */\n              hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined,\n              mergeStyles(messageContainerStyle)\n            ),\n            style: { ...createStyleFromV8Style(messageContainerStyle) },\n            ref: messageRef\n          }}\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          }}\n          data-testid=\"chat-composite-message\"\n          author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>}\n          timestamp={\n            <Text\n              className={\n                props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)\n              }\n              data-testid={ids.messageTimestamp}\n            >\n              {formattedTimestamp}\n            </Text>\n          }\n          details={getMessageDetails()}\n          actions={{\n            children: actionMenuProps?.children,\n            className: mergeClasses(\n              chatMyMessageStyles.menu,\n              // Make actions menu visible when the message is focused or the flyout is shown\n              focused || chatMessageActionFlyoutTarget?.current\n                ? chatMyMessageStyles.menuVisible\n                : chatMyMessageStyles.menuHidden,\n              attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n            )\n          }}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          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        >\n          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { DefaultButton, Dropdown, Stack, Text } from '@fluentui/react';
+import { Dropdown, Stack, Text, mergeStyleSets } from '@fluentui/react';
 import React from 'react';
 /**
  * A dropdown to trigger device permission prompt
@@ -8,35 +8,46 @@ import React from 'react';
  * @internal
  */
 export const _DevicePermissionDropdown = (props) => {
-    const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;
+    const { icon, askDevicePermission, onClick, constrain, strings, options } = props;
     const onRenderPlaceholder = () => {
-        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center" },
+        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
             icon,
-            React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)));
+            React.createElement(Stack.Item, { styles: {
+                    root: {
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                        flex: 1
+                    }
+                } },
+                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)),
+            React.createElement(Stack.Item, { shrink: 0, styles: {
+                    root: {
+                        paddingLeft: '0.5rem'
+                    }
+                } },
+                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent))));
     };
-    const onRenderCaretDown = () => {
-        return React.createElement(DefaultButton, { styles: actionButtonStyles }, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
+    const showAsAllowPrompt = !options && !!askDevicePermission;
+    const styles = mergeStyleSets(showAsAllowPrompt
+        ? {
+            title: {
+                paddingRight: '0.625rem'
+            }
+        }
+        : {}, props.styles);
+    const click = () => {
+        if (askDevicePermission) {
+            void askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (React.createElement(Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
-            if (askDevicePermission) {
-                askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
+    return (React.createElement(Dropdown, { role: showAsAllowPrompt ? 'button' : undefined, "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: showAsAllowPrompt ? () => React.createElement(React.Fragment, null) : undefined, onClick: showAsAllowPrompt ? click : undefined, onKeyDown: showAsAllowPrompt
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    click();
+                }
             }
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
-};
-const actionButtonStyles = {
-    root: {
-        border: 'none',
-        height: '2rem',
-        padding: '0 0',
-        paddingTop: '0.1rem',
-        position: 'absolute',
-        right: '0',
-        lineHeight: '2rem',
-        minWidth: '3rem'
-    },
-    label: {
-        fontWeight: 400
-    }
+            : undefined, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 //# sourceMappingURL=DevicePermissionDropdown.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAmD,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxH,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1F,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YACrC,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,aAAa,IAAC,MAAM,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAiB,CAAC;IACnG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,kBACK,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,qBACJ,KAAK,CAAC,cAAc,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,mBAAmB,EAAE,CAAC;gBACxB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YACjE,CAAC;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EACD,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAYF,MAAM,kBAAkB,GAAkB;IACxC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,GAAG;QACV,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG;KAChB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Dropdown, IButtonStyles, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n  /**\n   * Aria-labelledby for the dropdown\n   */\n  ariaLabelledby?: string;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\">\n        {icon}\n        <Text>{strings?.placeHolderText}</Text>\n      </Stack>\n    );\n  };\n\n  const onRenderCaretDown = (): JSX.Element => {\n    return <DefaultButton styles={actionButtonStyles}>{strings?.actionButtonContent}</DefaultButton>;\n  };\n\n  return (\n    <Dropdown\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      aria-labelledby={props.ariaLabelledby}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={onRenderCaretDown}\n      onClick={() => {\n        if (askDevicePermission) {\n          askDevicePermission(constrain ?? { video: true, audio: true });\n        }\n        onClick?.();\n      }}\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n\nconst actionButtonStyles: IButtonStyles = {\n  root: {\n    border: 'none',\n    height: '2rem',\n    padding: '0 0',\n    paddingTop: '0.1rem',\n    position: 'absolute',\n    right: '0',\n    lineHeight: '2rem',\n    minWidth: '3rem'\n  },\n  label: {\n    fontWeight: 400\n  }\n};\n"]}
+{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElF,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,eAAe;YACrE,IAAI;YACL,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,UAAU;wBACxB,IAAI,EAAE,CAAC;qBACR;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CAC5B;YACb,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;qBACtB;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAChC,CACP,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC;IAC5D,MAAM,MAAM,GAAG,cAAc,CAC3B,iBAAiB;QACf,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,YAAY,EAAE,UAAU;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACN,KAAK,CAAC,MAAM,CACb,CAAC;IAEF,MAAM,KAAK,GAAG,GAAS,EAAE;QACvB,IAAI,mBAAmB,EAAE,CAAC;YACxB,KAAK,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAClC,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,qBACJ,KAAK,CAAC,cAAc,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,yCAAK,CAAC,CAAC,CAAC,SAAS,EAC9D,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EACP,iBAAiB;YACf,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,KAAK,EAAE,CAAC;gBACV,CAAC;YACH,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text, mergeStyleSets } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n  /**\n   * Aria-labelledby for the dropdown\n   */\n  ariaLabelledby?: string;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {icon}\n        <Stack.Item\n          styles={{\n            root: {\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n              textOverflow: 'ellipsis',\n              flex: 1\n            }\n          }}\n        >\n          <Text>{strings?.placeHolderText}</Text>\n        </Stack.Item>\n        <Stack.Item\n          shrink={0}\n          styles={{\n            root: {\n              paddingLeft: '0.5rem'\n            }\n          }}\n        >\n          <Text>{strings?.actionButtonContent}</Text>\n        </Stack.Item>\n      </Stack>\n    );\n  };\n\n  const showAsAllowPrompt = !options && !!askDevicePermission;\n  const styles = mergeStyleSets(\n    showAsAllowPrompt\n      ? {\n          title: {\n            paddingRight: '0.625rem'\n          }\n        }\n      : {},\n    props.styles\n  );\n\n  const click = (): void => {\n    if (askDevicePermission) {\n      void askDevicePermission(constrain ?? { video: true, audio: true });\n    }\n    onClick?.();\n  };\n\n  return (\n    <Dropdown\n      role={showAsAllowPrompt ? 'button' : undefined}\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      aria-labelledby={props.ariaLabelledby}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={showAsAllowPrompt ? () => <></> : undefined}\n      onClick={showAsAllowPrompt ? click : undefined}\n      onKeyDown={\n        showAsAllowPrompt\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                click();\n              }\n            }\n          : undefined\n      }\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js

@@ -14,6 +14,7 @@ export const SitePermissionsContainer = (props) => {
     var _a, _b;
     const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
     const theme = useTheme();
+    const showPrimaryButton = onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText);
     return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
         React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
             props.cameraIconName && (React.createElement(Stack, null,
@@ -23,9 +24,9 @@ export const SitePermissionsContainer = (props) => {
             props.microphoneIconName && (React.createElement(Stack, null,
                 React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
         React.createElement(Stack, { styles: textContainerStyles },
-            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React.createElement(Text, { styles: primaryTextStyles }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React.createElement(Text, { styles: primaryTextStyles, role: "alert", "aria-live": "assertive" }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
             strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
-            onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick })),
-            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
+            showPrimaryButton && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick, autoFocus: true })),
+            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick, autoFocus: !showPrimaryButton }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
 };
 //# sourceMappingURL=SitePermissionsScaffolding.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js.map

@@ -1 +1 @@
-{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  Stack,\n  Text,\n  Link,\n  Icon,\n  useTheme,\n  PrimaryButton,\n  ILinkStyles,\n  IButtonStyles,\n  mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  iconBannerContainerStyles,\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  sparkleIconBackdropStyles,\n  textContainerStyles\n} from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n  const theme = useTheme();\n\n  return (\n    <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>\n        )}\n        {props.connectorIconName && (\n          <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>\n        )}\n        {props.microphoneIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>\n        )}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && (\n          <Text styles={primaryTextStyles}>\n            {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n          </Text>\n        )}\n        {strings && isValidString(strings?.secondaryText) && (\n          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n        )}\n\n        {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onPrimaryButtonClick}\n          />\n        )}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link\n            styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n            onClick={onTroubleshootingClick}\n          >\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  Stack,\n  Text,\n  Link,\n  Icon,\n  useTheme,\n  PrimaryButton,\n  ILinkStyles,\n  IButtonStyles,\n  mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  iconBannerContainerStyles,\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  sparkleIconBackdropStyles,\n  textContainerStyles\n} from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n  const theme = useTheme();\n\n  const showPrimaryButton = onPrimaryButtonClick && isValidString(strings?.primaryButtonText);\n\n  return (\n    <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>\n        )}\n        {props.connectorIconName && (\n          <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>\n        )}\n        {props.microphoneIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>\n        )}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && (\n          <Text styles={primaryTextStyles} role=\"alert\" aria-live=\"assertive\">\n            {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n          </Text>\n        )}\n        {strings && isValidString(strings?.secondaryText) && (\n          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n        )}\n\n        {showPrimaryButton && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onPrimaryButtonClick}\n            autoFocus\n          />\n        )}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link\n            styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n            onClick={onTroubleshootingClick}\n            autoFocus={!showPrimaryButton}\n          >\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -41,6 +41,7 @@ const useComponentRef = (props, focusTrapZone) => {
     }), [focusTrapZone]);
 };
 const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
+    var _a;
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
     const { allowTouchBodyScroll, className, children, containerClassName, scrollableContentClassName, elementToFocusOnDismiss, firstFocusableSelector, forceFocusInsideTrap, ignoreExternalFocusing, isBlocking, isAlert, isClickableOutsideFocusTrap, isDarkOverlay, onDismiss, layerProps, overlay, isOpen, titleAriaId, styles, subtitleAriaId, theme, topOffsetFixed, responsiveMode, onLayerDidMount, isModeless, dragOptions, onDismissed, minDragPosition, maxDragPosition, dataUiId } = props;
     const rootRef = React.useRef(null);
@@ -277,7 +278,7 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         internalState.events.dispose();
     });
     useComponentRef(props, focusTrapZone);
-    const modalContent = (React.createElement(FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, "data-ui-id": dataUiId },
+    const modalContent = (React.createElement(FocusTrapZone, Object.assign({ disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, "data-ui-id": dataUiId }, ((_a = props.focusTrapZoneProps) !== null && _a !== void 0 ? _a : {})),
         dragOptions && internalState.isInKeyboardMoveMode && (React.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React.createElement(Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React.createElement(Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
         React.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
             dragOptions && isModalMenuOpen && (React.createElement(dragOptions.menu, { items: [

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

@@ -1 +1 @@
-{"version":3,"file":"ModalClone.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ModalClone/ModalClone.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* eslint-disable react/prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react';\nimport { useBoolean, useMergedRefs, useConst, useSetTimeout, useId, useUnmount } from '@fluentui/react-hooks';\nimport {\n  allowOverscrollOnElement,\n  allowScrollOnElement,\n  AnimationVariables,\n  classNamesFunction,\n  DirectionalHint,\n  elementContains,\n  EventGroup,\n  FocusTrapZone,\n  getGlobalClassNames,\n  getPropsWithDefaults,\n  Icon,\n  IDragOptions,\n  IFocusTrapZone,\n  ILayerProps,\n  IModalProps,\n  IModalStyleProps,\n  IModalStyles,\n  KeyCodes,\n  Layer,\n  memoizeFunction,\n  mergeStyles,\n  on,\n  Overlay,\n  Popup,\n  ResponsiveMode,\n  styled,\n  useResponsiveMode,\n  ZIndexes\n} from '@fluentui/react';\nimport { useWindow } from '@fluentui/react-window-provider';\n\n// @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)\n\n/** @internal */\nexport interface _ExtendedIModalProps extends IModalProps {\n  minDragPosition?: _ICoordinates;\n  maxDragPosition?: _ICoordinates;\n  dataUiId?: string;\n}\n\nconst animationDuration = AnimationVariables.durationValue2;\n/** @internal */\nexport type _ICoordinates = { x: number; y: number };\n\ninterface IModalInternalState {\n  onModalCloseTimer: number;\n  allowTouchBodyScroll?: boolean;\n  scrollableContent: HTMLDivElement | null;\n  lastSetCoordinates: _ICoordinates;\n  /** Minimum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n  minPosition?: _ICoordinates;\n  /** Maximum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n  maxPosition?: _ICoordinates;\n  events: EventGroup;\n  /** Ensures we dispose the same keydown callback as was registered */\n  disposeOnKeyDown?: () => void;\n  /** Ensures we dispose the same keyup callback as was registered (also tracks whether keyup has been registered) */\n  disposeOnKeyUp?: () => void;\n  isInKeyboardMoveMode?: boolean;\n  hasBeenOpened?: boolean;\n}\n\nconst ZERO: _ICoordinates = { x: 0, y: 0 };\n\nconst DEFAULT_PROPS: Partial<_ExtendedIModalProps> = {\n  isOpen: false,\n  isDarkOverlay: true,\n  className: '',\n  containerClassName: '',\n  enableAriaHiddenSiblings: true\n};\n\nconst getModalClassNames = classNamesFunction<IModalStyleProps, IModalStyles>();\n\nconst getMoveDelta = (ev: React.KeyboardEvent<HTMLElement>): number => {\n  let delta = 10;\n  if (ev.shiftKey) {\n    if (!ev.ctrlKey) {\n      delta = 50;\n    }\n  } else if (ev.ctrlKey) {\n    delta = 1;\n  }\n\n  return delta;\n};\n\nconst useComponentRef = (props: IModalProps, focusTrapZone: React.RefObject<IFocusTrapZone>) => {\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        if (focusTrapZone.current) {\n          focusTrapZone.current.focus();\n        }\n      }\n    }),\n    [focusTrapZone]\n  );\n};\n\nconst ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRef<HTMLDivElement, _ExtendedIModalProps>(\n  (propsWithoutDefaults, ref) => {\n    const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n    const {\n      allowTouchBodyScroll,\n      className,\n      children,\n      containerClassName,\n      scrollableContentClassName,\n      elementToFocusOnDismiss,\n      firstFocusableSelector,\n      forceFocusInsideTrap,\n      ignoreExternalFocusing,\n      isBlocking,\n      isAlert,\n      isClickableOutsideFocusTrap,\n      isDarkOverlay,\n      onDismiss,\n      layerProps,\n      overlay,\n      isOpen,\n      titleAriaId,\n      styles,\n      subtitleAriaId,\n      theme,\n      topOffsetFixed,\n      responsiveMode,\n      onLayerDidMount,\n      isModeless,\n      dragOptions,\n      onDismissed,\n      minDragPosition,\n      maxDragPosition,\n      dataUiId\n    } = props;\n\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const focusTrapZone = React.useRef<IFocusTrapZone>(null);\n    const focusTrapZoneElm = React.useRef<HTMLDivElement>(null);\n    const mergedRef = useMergedRefs(rootRef, ref);\n\n    const modalResponsiveMode = useResponsiveMode(mergedRef);\n\n    const focusTrapZoneId = useId('ModalFocusTrapZone');\n\n    const win = useWindow();\n\n    const { setTimeout, clearTimeout } = useSetTimeout();\n\n    const [isModalOpen, setIsModalOpen] = React.useState(isOpen);\n    const [isVisible, setIsVisible] = React.useState(isOpen);\n    const [coordinates, setCoordinates] = React.useState<_ICoordinates>(ZERO);\n    const [modalRectangleTop, setModalRectangleTop] = React.useState<number | undefined>();\n\n    const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);\n\n    const internalState = useConst<IModalInternalState>(() => ({\n      onModalCloseTimer: 0,\n      allowTouchBodyScroll,\n      scrollableContent: null,\n      lastSetCoordinates: ZERO,\n      events: new EventGroup({})\n    }));\n\n    const { keepInBounds } = dragOptions || ({} as IDragOptions);\n    const isAlertRole = isAlert ?? (isBlocking && !isModeless);\n\n    const layerClassName = layerProps === undefined ? '' : layerProps.className;\n    const classNames = getModalClassNames(styles, {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      theme: theme!,\n      className,\n      containerClassName,\n      scrollableContentClassName,\n      isOpen,\n      isVisible,\n      hasBeenOpened: internalState.hasBeenOpened,\n      modalRectangleTop,\n      topOffsetFixed,\n      isModeless,\n      layerClassName,\n      windowInnerHeight: win?.innerHeight,\n      isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector\n    });\n\n    const mergedLayerProps: ILayerProps = {\n      eventBubblingEnabled: false,\n      ...layerProps,\n      onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount,\n      insertFirst: isModeless,\n      className: classNames.layer\n    };\n\n    // Allow the user to scroll within the modal but not on the body\n    const allowScrollOnModal = React.useCallback(\n      (elt: HTMLDivElement | null): void => {\n        if (elt) {\n          if (internalState.allowTouchBodyScroll) {\n            allowOverscrollOnElement(elt, internalState.events);\n          } else {\n            allowScrollOnElement(elt, internalState.events);\n          }\n        } else {\n          internalState.events.off(internalState.scrollableContent);\n        }\n        internalState.scrollableContent = elt;\n      },\n      [internalState]\n    );\n\n    const registerInitialModalPosition = (): void => {\n      const dialogMain = focusTrapZoneElm.current;\n      const modalRectangle = dialogMain?.getBoundingClientRect();\n\n      if (modalRectangle) {\n        if (topOffsetFixed) {\n          setModalRectangleTop(modalRectangle.top);\n        }\n\n        if (keepInBounds) {\n          // x/y are unavailable in IE, so use the equivalent left/top\n          internalState.minPosition = minDragPosition ?? { x: -modalRectangle.left, y: -modalRectangle.top };\n          internalState.maxPosition = maxDragPosition ?? { x: modalRectangle.left, y: modalRectangle.top };\n\n          // Make sure the initial co-ordinates are within clamp bounds.\n          setCoordinates({\n            x: getClampedAxis('x', coordinates.x),\n            y: getClampedAxis('y', coordinates.y)\n          });\n        }\n      }\n    };\n\n    /**\n     * Clamps an axis to a specified min and max position.\n     *\n     * @param axis A string that represents the axis (x/y).\n     * @param position The position on the axis.\n     */\n    const getClampedAxis = React.useCallback(\n      (axis: keyof _ICoordinates, position: number) => {\n        const { minPosition, maxPosition } = internalState;\n        if (keepInBounds && minPosition && maxPosition) {\n          position = Math.max(minPosition[axis], position);\n          position = Math.min(maxPosition[axis], position);\n        }\n        return position;\n      },\n      [keepInBounds, internalState]\n    );\n\n    const handleModalClose = (): void => {\n      internalState.lastSetCoordinates = ZERO;\n\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = false;\n      setIsModalOpen(false);\n      setCoordinates(ZERO);\n\n      internalState.disposeOnKeyUp?.();\n\n      onDismissed?.();\n    };\n\n    const handleDragStart = React.useCallback((): void => {\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = false;\n    }, [internalState, setModalMenuClose]);\n\n    const handleDrag = React.useCallback(\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (ev: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: any): void => {\n        setCoordinates((prevValue) => ({\n          x: getClampedAxis('x', prevValue.x + dragData.delta.x),\n          y: getClampedAxis('y', prevValue.y + dragData.delta.y)\n        }));\n      },\n      [getClampedAxis]\n    );\n\n    const handleDragStop = React.useCallback((): void => {\n      if (focusTrapZone.current) {\n        focusTrapZone.current.focus();\n      }\n    }, []);\n\n    const handleEnterKeyboardMoveMode = () => {\n      // We need a global handleKeyDown event when we are in the move mode so that we can\n      // handle the key presses and the components inside the modal do not get the events\n      const handleKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n        if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n          // CTRL + ALT + SPACE is handled during keyUp\n          ev.preventDefault();\n          ev.stopPropagation();\n          return;\n        }\n\n        const newLocal = ev.altKey || ev.keyCode === KeyCodes.escape;\n        if (isModalMenuOpen && newLocal) {\n          setModalMenuClose();\n        }\n\n        if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {\n          internalState.isInKeyboardMoveMode = false;\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n\n        if (internalState.isInKeyboardMoveMode) {\n          let handledEvent = true;\n          const delta = getMoveDelta(ev);\n\n          switch (ev.keyCode) {\n            /* eslint-disable no-fallthrough */\n            case KeyCodes.escape:\n              setCoordinates(internalState.lastSetCoordinates);\n            case KeyCodes.enter: {\n              // TODO: determine if fallthrough was intentional\n              /* eslint-enable no-fallthrough */\n              internalState.lastSetCoordinates = ZERO;\n              // setIsInKeyboardMoveMode(false);\n              break;\n            }\n            case KeyCodes.up: {\n              setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));\n              break;\n            }\n            case KeyCodes.down: {\n              setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));\n              break;\n            }\n            case KeyCodes.left: {\n              setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));\n              break;\n            }\n            case KeyCodes.right: {\n              setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));\n              break;\n            }\n            default: {\n              handledEvent = false;\n            }\n          }\n          if (handledEvent) {\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        }\n      };\n\n      internalState.lastSetCoordinates = coordinates;\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = true;\n\n      internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);\n      internalState.disposeOnKeyDown = () => {\n        internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);\n        internalState.disposeOnKeyDown = undefined;\n      };\n    };\n\n    const handleExitKeyboardMoveMode = () => {\n      internalState.lastSetCoordinates = ZERO;\n      internalState.isInKeyboardMoveMode = false;\n      internalState.disposeOnKeyDown?.();\n    };\n\n    const registerForKeyUp = (): void => {\n      const handleKeyUp = (ev: React.KeyboardEvent<HTMLElement>): void => {\n        // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:\n        // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n        if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n          if (elementContains(internalState.scrollableContent, ev.target as HTMLElement)) {\n            toggleModalMenuOpen();\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        }\n      };\n\n      if (!internalState.disposeOnKeyUp) {\n        internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);\n        internalState.disposeOnKeyUp = () => {\n          internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);\n          internalState.disposeOnKeyUp = undefined;\n        };\n      }\n    };\n\n    React.useEffect(() => {\n      clearTimeout(internalState.onModalCloseTimer);\n      // Opening the dialog\n      if (isOpen) {\n        // This must be done after the modal content has rendered\n        requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));\n\n        setIsModalOpen(true);\n\n        // Add a keyUp handler for all key up events once the dialog is open.\n        if (dragOptions) {\n          registerForKeyUp();\n        }\n\n        internalState.hasBeenOpened = true;\n        setIsVisible(true);\n      }\n\n      // Closing the dialog\n      if (!isOpen && isModalOpen) {\n        internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);\n        setIsVisible(false);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.\n    }, [isModalOpen, isOpen, minDragPosition, maxDragPosition]);\n\n    useUnmount(() => {\n      internalState.events.dispose();\n    });\n\n    useComponentRef(props, focusTrapZone);\n\n    const modalContent = (\n      <FocusTrapZone\n        disabled={true}\n        id={focusTrapZoneId}\n        ref={focusTrapZoneElm}\n        componentRef={focusTrapZone}\n        className={classNames.main}\n        elementToFocusOnDismiss={elementToFocusOnDismiss}\n        isClickableOutsideFocusTrap={isModeless || isClickableOutsideFocusTrap || !isBlocking}\n        ignoreExternalFocusing={ignoreExternalFocusing}\n        forceFocusInsideTrap={forceFocusInsideTrap && !isModeless}\n        firstFocusableSelector={firstFocusableSelector}\n        focusPreviouslyFocusedInnerElement\n        onBlur={internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined}\n        data-ui-id={dataUiId}\n        // enableAriaHiddenSiblings is handled by the Popup\n      >\n        {dragOptions && internalState.isInKeyboardMoveMode && (\n          <div className={classNames.keyboardMoveIconContainer}>\n            {dragOptions.keyboardMoveIconProps ? (\n              <Icon {...dragOptions.keyboardMoveIconProps} />\n            ) : (\n              <Icon iconName=\"move\" className={classNames.keyboardMoveIcon} />\n            )}\n          </div>\n        )}\n        <div ref={allowScrollOnModal} className={classNames.scrollableContent} data-is-scrollable>\n          {dragOptions && isModalMenuOpen && (\n            <dragOptions.menu\n              items={[\n                { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },\n                { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }\n              ]}\n              onDismiss={setModalMenuClose}\n              alignTargetEdge\n              coverTarget\n              directionalHint={DirectionalHint.topLeftEdge}\n              directionalHintFixed\n              shouldFocusOnMount\n              target={internalState.scrollableContent}\n            />\n          )}\n          {children}\n        </div>\n      </FocusTrapZone>\n    );\n\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      (isModalOpen && modalResponsiveMode! >= (responsiveMode || ResponsiveMode.small) && (\n        <Layer ref={mergedRef} {...mergedLayerProps}>\n          <Popup\n            role={isAlertRole ? 'alertdialog' : 'dialog'}\n            ariaLabelledBy={titleAriaId}\n            ariaDescribedBy={subtitleAriaId}\n            // onDismiss={onDismiss}\n            shouldRestoreFocus={!ignoreExternalFocusing}\n            // Modeless modals shouldn't hide siblings.\n            // Popup will automatically handle this based on the aria-modal setting.\n            // enableAriaHiddenSiblings={enableAriaHiddenSiblings}\n            aria-modal={!isModeless}\n          >\n            <div className={classNames.root} role={!isModeless ? 'document' : undefined}>\n              {!isModeless && (\n                <Overlay\n                  aria-hidden={true}\n                  isDarkThemed={isDarkOverlay}\n                  onClick={isBlocking ? undefined : onDismiss}\n                  allowTouchBodyScroll={allowTouchBodyScroll}\n                  {...overlay}\n                />\n              )}\n              {dragOptions ? (\n                <DraggableZone\n                  handleSelector={dragOptions.dragHandleSelector || `#${focusTrapZoneId}`}\n                  preventDragSelector=\"button\"\n                  onStart={handleDragStart}\n                  onDragChange={handleDrag}\n                  onStop={handleDragStop}\n                  position={coordinates}\n                >\n                  {modalContent}\n                </DraggableZone>\n              ) : (\n                modalContent\n              )}\n            </div>\n          </Popup>\n        </Layer>\n      )) ||\n      null\n    );\n  }\n);\nModalBase.displayName = 'ModalBase';\n\ninterface IDraggableZoneStyles {\n  root: string;\n}\n\nconst getDraggableZoneClassNames = memoizeFunction((className: string, isDragging: boolean): IDraggableZoneStyles => {\n  return {\n    root: mergeStyles(\n      className,\n      isDragging && {\n        touchAction: 'none',\n        selectors: {\n          '& *': {\n            userSelect: 'none'\n          }\n        }\n      }\n    )\n  };\n});\n\ninterface IDragData {\n  position: _ICoordinates;\n  lastPosition?: _ICoordinates;\n  delta: _ICoordinates;\n}\n\ninterface IDraggableZoneProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Specifies a selector to be used as the handle that initiates drag\n   */\n  handleSelector?: string;\n\n  /**\n   * Specifies a selector to be used to prevent drag initialization.\n   * For example, if you do not want buttons inside of your handleSelector\n   * to have the cursor change to move or to allow users to select from buttons,\n   * you could pass button here (the close button in the header of a dialog is a concrete example)\n   */\n  preventDragSelector?: string;\n\n  /**\n   * the X and Y coordinates to use as an offest to position the draggable content\n   */\n  position?: _ICoordinates;\n\n  /**\n   * Callback for when dragging starts\n   */\n  onStart?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n  /**\n   * Callback for when the drag changes, while dragging\n   */\n  onDragChange?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n  /**\n   * Callback for when dragging stops\n   */\n  onStop?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n}\n\ninterface IDraggableZoneState {\n  isDragging: boolean;\n  position: _ICoordinates;\n  lastPosition?: _ICoordinates;\n}\n\nconst eventMapping = {\n  touch: {\n    start: 'touchstart',\n    move: 'touchmove',\n    stop: 'touchend'\n  },\n  mouse: {\n    start: 'mousedown',\n    move: 'mousemove',\n    stop: 'mouseup'\n  }\n};\n\n// These are needed so that we can generalize the events\n// and so we have access to clientX and clientY in the touch events\ntype MouseTouchEvent<T> = React.MouseEvent<T> & React.TouchEvent<T> & Event;\n\nclass DraggableZone extends React.Component<IDraggableZoneProps, IDraggableZoneState> {\n  private _touchId?: number;\n  private _currentEventType = eventMapping.mouse;\n  private _events: (() => void)[] = [];\n\n  constructor(props: IDraggableZoneProps) {\n    super(props);\n\n    this.state = {\n      isDragging: false,\n      position: this.props.position || { x: 0, y: 0 },\n      lastPosition: undefined\n    };\n  }\n\n  public componentDidUpdate(prevProps: IDraggableZoneProps) {\n    if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n      this.setState({ position: this.props.position });\n    }\n  }\n\n  public componentWillUnmount() {\n    this._events.forEach((dispose) => dispose());\n  }\n\n  public render() {\n    const child: any = React.Children.only(this.props.children);\n    const { props } = child;\n    const { position } = this.props;\n    const { position: statePosition, isDragging } = this.state;\n    let x = statePosition.x;\n    let y = statePosition.y;\n\n    if (position && !isDragging) {\n      x = position.x;\n      y = position.y;\n    }\n\n    return React.cloneElement(child, {\n      style: {\n        ...props.style,\n        transform: `translate(${x}px, ${y}px)`\n      },\n      className: getDraggableZoneClassNames(props.className, this.state.isDragging).root,\n      onMouseDown: this._onMouseDown,\n      onMouseUp: this._onMouseUp,\n      onTouchStart: this._onTouchStart,\n      onTouchEnd: this._onTouchEnd\n    });\n  }\n\n  private _onMouseDown = (event: MouseTouchEvent<HTMLElement>) => {\n    const onMouseDown = (React.Children.only(this.props.children) as any).props.onMouseDown;\n    if (onMouseDown) {\n      onMouseDown(event);\n    }\n\n    this._currentEventType = eventMapping.mouse;\n    return this._onDragStart(event);\n  };\n\n  private _onMouseUp = (event: MouseTouchEvent<HTMLElement>) => {\n    const onMouseUp = (React.Children.only(this.props.children) as any).props.onMouseUp;\n    if (onMouseUp) {\n      onMouseUp(event);\n    }\n\n    this._currentEventType = eventMapping.mouse;\n    return this._onDragStop(event);\n  };\n\n  private _onTouchStart = (event: MouseTouchEvent<HTMLElement>) => {\n    const onTouchStart = (React.Children.only(this.props.children) as any).props.onTouchStart;\n    if (onTouchStart) {\n      onTouchStart(event);\n    }\n\n    this._currentEventType = eventMapping.touch;\n    return this._onDragStart(event);\n  };\n\n  private _onTouchEnd = (event: MouseTouchEvent<HTMLElement>) => {\n    const onTouchEnd = (React.Children.only(this.props.children) as any).props.onTouchEnd;\n    if (onTouchEnd) {\n      onTouchEnd(event);\n    }\n\n    this._currentEventType = eventMapping.touch;\n    this._onDragStop(event);\n  };\n\n  private _onDragStart = (event: MouseTouchEvent<HTMLElement>) => {\n    // Only handle left click for dragging\n    if (typeof event.button === 'number' && event.button !== 0) {\n      return false;\n    }\n\n    // If the target doesn't match the handleSelector OR\n    // if the target does match the preventDragSelector, bail out\n    if (\n      (this.props.handleSelector && !this._matchesSelector(event.target as HTMLElement, this.props.handleSelector)) ||\n      (this.props.preventDragSelector &&\n        this._matchesSelector(event.target as HTMLElement, this.props.preventDragSelector))\n    ) {\n      return;\n    }\n\n    // Remember the touch identifier if this is a touch event so we can\n    // distinguish between individual touches in multitouch scenarios\n    // by remembering which touch point we were given\n    this._touchId = this._getTouchId(event);\n\n    const position = this._getControlPosition(event);\n    if (position === undefined) {\n      return;\n    }\n\n    const dragData = this._createDragDataFromPosition(position);\n    this.props.onStart && this.props.onStart(event, dragData);\n\n    this.setState({\n      isDragging: true,\n      lastPosition: position\n    });\n\n    // hook up the appropriate mouse/touch events to the body to ensure\n    // smooth dragging\n    this._events = [\n      on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),\n      on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)\n    ];\n\n    return;\n  };\n\n  private _onDrag = (event: any) => {\n    // Prevent scrolling on mobile devices\n    if (event.type === 'touchmove') {\n      event.preventDefault();\n    }\n\n    const position = this._getControlPosition(event);\n    if (!position) {\n      return;\n    }\n\n    // create the updated drag data from the position data\n    const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));\n    const updatedPosition = updatedData.position;\n\n    this.props.onDragChange && this.props.onDragChange(event, updatedData);\n\n    this.setState({\n      position: updatedPosition,\n      lastPosition: position\n    });\n  };\n\n  private _onDragStop = (event: any) => {\n    if (!this.state.isDragging) {\n      return;\n    }\n\n    const position = this._getControlPosition(event);\n    if (!position) {\n      return;\n    }\n\n    const baseDragData = this._createDragDataFromPosition(position);\n\n    // Set dragging to false and reset the lastPosition\n    this.setState({\n      isDragging: false,\n      lastPosition: undefined\n    });\n\n    this.props.onStop && this.props.onStop(event, baseDragData);\n\n    if (this.props.position) {\n      this.setState({\n        position: this.props.position\n      });\n    }\n\n    // Remove event handlers\n    this._events.forEach((dispose) => dispose());\n  };\n\n  /**\n   * Get the control position based off the event that fired\n   * @param event - The event to get offsets from\n   */\n  private _getControlPosition(event: MouseTouchEvent<HTMLElement>): _ICoordinates | undefined {\n    const touchObj = this._getActiveTouch(event);\n\n    // did we get the right touch?\n    if (this._touchId !== undefined && !touchObj) {\n      return undefined;\n    }\n\n    const eventToGetOffset = touchObj || event;\n    return {\n      x: eventToGetOffset.clientX,\n      y: eventToGetOffset.clientY\n    };\n  }\n\n  /**\n   * Get the active touch point that we have saved from the event's TouchList\n   * @param event - The event used to get the TouchList for the active touch point\n   */\n  private _getActiveTouch(event: MouseTouchEvent<HTMLElement>): React.Touch | undefined {\n    return (\n      (event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n      (event.changedTouches && this._findTouchInTouchList(event.changedTouches))\n    );\n  }\n\n  /**\n   * Get the initial touch identifier associated with the given event\n   * @param event - The event that contains the TouchList\n   */\n  private _getTouchId(event: MouseTouchEvent<HTMLElement>): number | undefined {\n    const touch: React.Touch | undefined =\n      (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n\n    if (touch) {\n      return touch.identifier;\n    }\n\n    return;\n  }\n\n  /**\n   * Returns if an element (or any of the element's parents) match the given selector\n   */\n  private _matchesSelector(element: HTMLElement | null, selector: string): boolean {\n    if (!element || element === document.body) {\n      return false;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    const matchesSelectorFn: Function =\n      element.matches || element.webkitMatchesSelector || (element as any).msMatchesSelector; /* for IE */\n\n    if (!matchesSelectorFn) {\n      return false;\n    }\n\n    return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n  }\n\n  /**\n   * Attempts to find the Touch that matches the identifier  we stored in dragStart\n   * @param touchList The TouchList to look for the stored identifier from dragStart\n   */\n  private _findTouchInTouchList(touchList: React.TouchList): React.Touch | undefined {\n    if (this._touchId === undefined) {\n      return;\n    }\n\n    for (let i = 0; i < touchList.length; i++) {\n      if (touchList[i]?.identifier === this._touchId) {\n        return touchList[i];\n      }\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Create DragData based off of the last known position and the new position passed in\n   * @param position The new position as part of the drag\n   */\n  private _createDragDataFromPosition(position: _ICoordinates): IDragData {\n    const { lastPosition } = this.state;\n\n    // If we have no lastPosition, use the given position\n    // for last position\n    if (lastPosition === undefined) {\n      return {\n        delta: { x: 0, y: 0 },\n        lastPosition: position,\n        position\n      };\n    }\n\n    return {\n      delta: {\n        x: position.x - lastPosition.x,\n        y: position.y - lastPosition.y\n      },\n      lastPosition,\n      position\n    };\n  }\n\n  /**\n   * Creates an updated DragData based off the current position and given baseDragData\n   * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions\n   */\n  private _createUpdatedDragData(baseDragData: IDragData): IDragData {\n    const { position } = this.state;\n    return {\n      position: {\n        x: position.x + baseDragData.delta.x,\n        y: position.y + baseDragData.delta.y\n      },\n      delta: baseDragData.delta,\n      lastPosition: position\n    };\n  }\n}\n\nconst globalClassNames = {\n  root: 'ms-Modal',\n  main: 'ms-Dialog-main',\n  scrollableContent: 'ms-Modal-scrollableContent',\n  isOpen: 'is-open',\n  layer: 'ms-Modal-Layer'\n};\n\nconst getStyles = (props: IModalStyleProps): IModalStyles => {\n  const {\n    className,\n    containerClassName,\n    scrollableContentClassName,\n    isOpen,\n    isVisible,\n    hasBeenOpened,\n    modalRectangleTop,\n    theme,\n    topOffsetFixed,\n    isModeless,\n    layerClassName,\n    isDefaultDragHandle,\n    windowInnerHeight\n  } = props;\n  const { palette, effects, fonts } = theme;\n\n  const classNames = getGlobalClassNames(globalClassNames, theme);\n\n  return {\n    root: [\n      classNames.root,\n      fonts.medium,\n      {\n        backgroundColor: 'transparent',\n        position: isModeless ? 'absolute' : 'fixed',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        opacity: 0,\n        pointerEvents: 'none',\n        transition: `opacity ${animationDuration}`\n      },\n      topOffsetFixed &&\n        typeof modalRectangleTop === 'number' &&\n        hasBeenOpened && {\n          alignItems: 'flex-start'\n        },\n      isOpen && classNames.isOpen,\n      isVisible && {\n        opacity: 1,\n        pointerEvents: 'auto'\n      },\n      className\n    ],\n    main: [\n      classNames.main,\n      {\n        boxShadow: effects.elevation64,\n        borderRadius: effects.roundedCorner2,\n        backgroundColor: palette.white,\n        boxSizing: 'border-box',\n        position: 'relative',\n        textAlign: 'left',\n        outline: '3px solid transparent',\n        maxHeight: 'calc(100% - 32px)',\n        maxWidth: 'calc(100% - 32px)',\n        minHeight: '176px',\n        minWidth: '288px',\n        overflowY: 'auto',\n        zIndex: isModeless ? ZIndexes.Layer : undefined\n      },\n      topOffsetFixed &&\n        typeof modalRectangleTop === 'number' &&\n        hasBeenOpened && {\n          top: modalRectangleTop\n        },\n      isDefaultDragHandle && {\n        cursor: 'move'\n      },\n      containerClassName\n    ],\n    scrollableContent: [\n      classNames.scrollableContent,\n      {\n        overflowY: 'auto',\n        flexGrow: 1,\n        maxHeight: '100vh',\n        selectors: {\n          ['@supports (-webkit-overflow-scrolling: touch)']: {\n            maxHeight: windowInnerHeight\n          }\n        }\n      },\n      scrollableContentClassName\n    ],\n    layer: isModeless && [\n      layerClassName,\n      classNames.layer,\n      {\n        position: 'static',\n        width: 'unset',\n        height: 'unset'\n      }\n    ],\n    keyboardMoveIconContainer: {\n      position: 'absolute',\n      display: 'flex',\n      justifyContent: 'center',\n      width: '100%',\n      padding: '3px 0px'\n    },\n    keyboardMoveIcon: {\n      fontSize: fonts.xLargePlus.fontSize,\n      width: '24px'\n    }\n  };\n};\n\n/** @internal */\nexport const _ModalClone: React.FunctionComponent<_ExtendedIModalProps> = styled<\n  _ExtendedIModalProps,\n  IModalStyleProps,\n  IModalStyles\n>(ModalBase, getStyles, undefined, {\n  scope: 'Modal',\n  fields: ['theme', 'styles', 'enableAriaHiddenSiblings']\n});\n_ModalClone.displayName = 'Modal';\n"]}
+{"version":3,"file":"ModalClone.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ModalClone/ModalClone.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* eslint-disable react/prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react';\nimport { useBoolean, useMergedRefs, useConst, useSetTimeout, useId, useUnmount } from '@fluentui/react-hooks';\nimport {\n  allowOverscrollOnElement,\n  allowScrollOnElement,\n  AnimationVariables,\n  classNamesFunction,\n  DirectionalHint,\n  elementContains,\n  EventGroup,\n  FocusTrapZone,\n  getGlobalClassNames,\n  getPropsWithDefaults,\n  Icon,\n  IDragOptions,\n  IFocusTrapZone,\n  ILayerProps,\n  IModalProps,\n  IModalStyleProps,\n  IModalStyles,\n  KeyCodes,\n  Layer,\n  memoizeFunction,\n  mergeStyles,\n  on,\n  Overlay,\n  Popup,\n  ResponsiveMode,\n  styled,\n  useResponsiveMode,\n  ZIndexes\n} from '@fluentui/react';\nimport { useWindow } from '@fluentui/react-window-provider';\n\n// @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)\n\n/** @internal */\nexport interface _ExtendedIModalProps extends IModalProps {\n  minDragPosition?: _ICoordinates;\n  maxDragPosition?: _ICoordinates;\n  dataUiId?: string;\n}\n\nconst animationDuration = AnimationVariables.durationValue2;\n/** @internal */\nexport type _ICoordinates = { x: number; y: number };\n\ninterface IModalInternalState {\n  onModalCloseTimer: number;\n  allowTouchBodyScroll?: boolean;\n  scrollableContent: HTMLDivElement | null;\n  lastSetCoordinates: _ICoordinates;\n  /** Minimum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n  minPosition?: _ICoordinates;\n  /** Maximum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n  maxPosition?: _ICoordinates;\n  events: EventGroup;\n  /** Ensures we dispose the same keydown callback as was registered */\n  disposeOnKeyDown?: () => void;\n  /** Ensures we dispose the same keyup callback as was registered (also tracks whether keyup has been registered) */\n  disposeOnKeyUp?: () => void;\n  isInKeyboardMoveMode?: boolean;\n  hasBeenOpened?: boolean;\n}\n\nconst ZERO: _ICoordinates = { x: 0, y: 0 };\n\nconst DEFAULT_PROPS: Partial<_ExtendedIModalProps> = {\n  isOpen: false,\n  isDarkOverlay: true,\n  className: '',\n  containerClassName: '',\n  enableAriaHiddenSiblings: true\n};\n\nconst getModalClassNames = classNamesFunction<IModalStyleProps, IModalStyles>();\n\nconst getMoveDelta = (ev: React.KeyboardEvent<HTMLElement>): number => {\n  let delta = 10;\n  if (ev.shiftKey) {\n    if (!ev.ctrlKey) {\n      delta = 50;\n    }\n  } else if (ev.ctrlKey) {\n    delta = 1;\n  }\n\n  return delta;\n};\n\nconst useComponentRef = (props: IModalProps, focusTrapZone: React.RefObject<IFocusTrapZone>) => {\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        if (focusTrapZone.current) {\n          focusTrapZone.current.focus();\n        }\n      }\n    }),\n    [focusTrapZone]\n  );\n};\n\nconst ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRef<HTMLDivElement, _ExtendedIModalProps>(\n  (propsWithoutDefaults, ref) => {\n    const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n    const {\n      allowTouchBodyScroll,\n      className,\n      children,\n      containerClassName,\n      scrollableContentClassName,\n      elementToFocusOnDismiss,\n      firstFocusableSelector,\n      forceFocusInsideTrap,\n      ignoreExternalFocusing,\n      isBlocking,\n      isAlert,\n      isClickableOutsideFocusTrap,\n      isDarkOverlay,\n      onDismiss,\n      layerProps,\n      overlay,\n      isOpen,\n      titleAriaId,\n      styles,\n      subtitleAriaId,\n      theme,\n      topOffsetFixed,\n      responsiveMode,\n      onLayerDidMount,\n      isModeless,\n      dragOptions,\n      onDismissed,\n      minDragPosition,\n      maxDragPosition,\n      dataUiId\n    } = props;\n\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const focusTrapZone = React.useRef<IFocusTrapZone>(null);\n    const focusTrapZoneElm = React.useRef<HTMLDivElement>(null);\n    const mergedRef = useMergedRefs(rootRef, ref);\n\n    const modalResponsiveMode = useResponsiveMode(mergedRef);\n\n    const focusTrapZoneId = useId('ModalFocusTrapZone');\n\n    const win = useWindow();\n\n    const { setTimeout, clearTimeout } = useSetTimeout();\n\n    const [isModalOpen, setIsModalOpen] = React.useState(isOpen);\n    const [isVisible, setIsVisible] = React.useState(isOpen);\n    const [coordinates, setCoordinates] = React.useState<_ICoordinates>(ZERO);\n    const [modalRectangleTop, setModalRectangleTop] = React.useState<number | undefined>();\n\n    const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);\n\n    const internalState = useConst<IModalInternalState>(() => ({\n      onModalCloseTimer: 0,\n      allowTouchBodyScroll,\n      scrollableContent: null,\n      lastSetCoordinates: ZERO,\n      events: new EventGroup({})\n    }));\n\n    const { keepInBounds } = dragOptions || ({} as IDragOptions);\n    const isAlertRole = isAlert ?? (isBlocking && !isModeless);\n\n    const layerClassName = layerProps === undefined ? '' : layerProps.className;\n    const classNames = getModalClassNames(styles, {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      theme: theme!,\n      className,\n      containerClassName,\n      scrollableContentClassName,\n      isOpen,\n      isVisible,\n      hasBeenOpened: internalState.hasBeenOpened,\n      modalRectangleTop,\n      topOffsetFixed,\n      isModeless,\n      layerClassName,\n      windowInnerHeight: win?.innerHeight,\n      isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector\n    });\n\n    const mergedLayerProps: ILayerProps = {\n      eventBubblingEnabled: false,\n      ...layerProps,\n      onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount,\n      insertFirst: isModeless,\n      className: classNames.layer\n    };\n\n    // Allow the user to scroll within the modal but not on the body\n    const allowScrollOnModal = React.useCallback(\n      (elt: HTMLDivElement | null): void => {\n        if (elt) {\n          if (internalState.allowTouchBodyScroll) {\n            allowOverscrollOnElement(elt, internalState.events);\n          } else {\n            allowScrollOnElement(elt, internalState.events);\n          }\n        } else {\n          internalState.events.off(internalState.scrollableContent);\n        }\n        internalState.scrollableContent = elt;\n      },\n      [internalState]\n    );\n\n    const registerInitialModalPosition = (): void => {\n      const dialogMain = focusTrapZoneElm.current;\n      const modalRectangle = dialogMain?.getBoundingClientRect();\n\n      if (modalRectangle) {\n        if (topOffsetFixed) {\n          setModalRectangleTop(modalRectangle.top);\n        }\n\n        if (keepInBounds) {\n          // x/y are unavailable in IE, so use the equivalent left/top\n          internalState.minPosition = minDragPosition ?? { x: -modalRectangle.left, y: -modalRectangle.top };\n          internalState.maxPosition = maxDragPosition ?? { x: modalRectangle.left, y: modalRectangle.top };\n\n          // Make sure the initial co-ordinates are within clamp bounds.\n          setCoordinates({\n            x: getClampedAxis('x', coordinates.x),\n            y: getClampedAxis('y', coordinates.y)\n          });\n        }\n      }\n    };\n\n    /**\n     * Clamps an axis to a specified min and max position.\n     *\n     * @param axis A string that represents the axis (x/y).\n     * @param position The position on the axis.\n     */\n    const getClampedAxis = React.useCallback(\n      (axis: keyof _ICoordinates, position: number) => {\n        const { minPosition, maxPosition } = internalState;\n        if (keepInBounds && minPosition && maxPosition) {\n          position = Math.max(minPosition[axis], position);\n          position = Math.min(maxPosition[axis], position);\n        }\n        return position;\n      },\n      [keepInBounds, internalState]\n    );\n\n    const handleModalClose = (): void => {\n      internalState.lastSetCoordinates = ZERO;\n\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = false;\n      setIsModalOpen(false);\n      setCoordinates(ZERO);\n\n      internalState.disposeOnKeyUp?.();\n\n      onDismissed?.();\n    };\n\n    const handleDragStart = React.useCallback((): void => {\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = false;\n    }, [internalState, setModalMenuClose]);\n\n    const handleDrag = React.useCallback(\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (ev: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: any): void => {\n        setCoordinates((prevValue) => ({\n          x: getClampedAxis('x', prevValue.x + dragData.delta.x),\n          y: getClampedAxis('y', prevValue.y + dragData.delta.y)\n        }));\n      },\n      [getClampedAxis]\n    );\n\n    const handleDragStop = React.useCallback((): void => {\n      if (focusTrapZone.current) {\n        focusTrapZone.current.focus();\n      }\n    }, []);\n\n    const handleEnterKeyboardMoveMode = () => {\n      // We need a global handleKeyDown event when we are in the move mode so that we can\n      // handle the key presses and the components inside the modal do not get the events\n      const handleKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n        if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n          // CTRL + ALT + SPACE is handled during keyUp\n          ev.preventDefault();\n          ev.stopPropagation();\n          return;\n        }\n\n        const newLocal = ev.altKey || ev.keyCode === KeyCodes.escape;\n        if (isModalMenuOpen && newLocal) {\n          setModalMenuClose();\n        }\n\n        if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {\n          internalState.isInKeyboardMoveMode = false;\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n\n        if (internalState.isInKeyboardMoveMode) {\n          let handledEvent = true;\n          const delta = getMoveDelta(ev);\n\n          switch (ev.keyCode) {\n            /* eslint-disable no-fallthrough */\n            case KeyCodes.escape:\n              setCoordinates(internalState.lastSetCoordinates);\n            case KeyCodes.enter: {\n              // TODO: determine if fallthrough was intentional\n              /* eslint-enable no-fallthrough */\n              internalState.lastSetCoordinates = ZERO;\n              // setIsInKeyboardMoveMode(false);\n              break;\n            }\n            case KeyCodes.up: {\n              setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));\n              break;\n            }\n            case KeyCodes.down: {\n              setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));\n              break;\n            }\n            case KeyCodes.left: {\n              setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));\n              break;\n            }\n            case KeyCodes.right: {\n              setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));\n              break;\n            }\n            default: {\n              handledEvent = false;\n            }\n          }\n          if (handledEvent) {\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        }\n      };\n\n      internalState.lastSetCoordinates = coordinates;\n      setModalMenuClose();\n      internalState.isInKeyboardMoveMode = true;\n\n      internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);\n      internalState.disposeOnKeyDown = () => {\n        internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);\n        internalState.disposeOnKeyDown = undefined;\n      };\n    };\n\n    const handleExitKeyboardMoveMode = () => {\n      internalState.lastSetCoordinates = ZERO;\n      internalState.isInKeyboardMoveMode = false;\n      internalState.disposeOnKeyDown?.();\n    };\n\n    const registerForKeyUp = (): void => {\n      const handleKeyUp = (ev: React.KeyboardEvent<HTMLElement>): void => {\n        // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:\n        // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n        if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n          if (elementContains(internalState.scrollableContent, ev.target as HTMLElement)) {\n            toggleModalMenuOpen();\n            ev.preventDefault();\n            ev.stopPropagation();\n          }\n        }\n      };\n\n      if (!internalState.disposeOnKeyUp) {\n        internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);\n        internalState.disposeOnKeyUp = () => {\n          internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);\n          internalState.disposeOnKeyUp = undefined;\n        };\n      }\n    };\n\n    React.useEffect(() => {\n      clearTimeout(internalState.onModalCloseTimer);\n      // Opening the dialog\n      if (isOpen) {\n        // This must be done after the modal content has rendered\n        requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));\n\n        setIsModalOpen(true);\n\n        // Add a keyUp handler for all key up events once the dialog is open.\n        if (dragOptions) {\n          registerForKeyUp();\n        }\n\n        internalState.hasBeenOpened = true;\n        setIsVisible(true);\n      }\n\n      // Closing the dialog\n      if (!isOpen && isModalOpen) {\n        internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);\n        setIsVisible(false);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.\n    }, [isModalOpen, isOpen, minDragPosition, maxDragPosition]);\n\n    useUnmount(() => {\n      internalState.events.dispose();\n    });\n\n    useComponentRef(props, focusTrapZone);\n\n    const modalContent = (\n      <FocusTrapZone\n        disabled={true}\n        id={focusTrapZoneId}\n        ref={focusTrapZoneElm}\n        componentRef={focusTrapZone}\n        className={classNames.main}\n        elementToFocusOnDismiss={elementToFocusOnDismiss}\n        isClickableOutsideFocusTrap={isModeless || isClickableOutsideFocusTrap || !isBlocking}\n        ignoreExternalFocusing={ignoreExternalFocusing}\n        forceFocusInsideTrap={forceFocusInsideTrap && !isModeless}\n        firstFocusableSelector={firstFocusableSelector}\n        focusPreviouslyFocusedInnerElement\n        onBlur={internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined}\n        data-ui-id={dataUiId}\n        // enableAriaHiddenSiblings is handled by the Popup\n        {...(props.focusTrapZoneProps ?? {})}\n      >\n        {dragOptions && internalState.isInKeyboardMoveMode && (\n          <div className={classNames.keyboardMoveIconContainer}>\n            {dragOptions.keyboardMoveIconProps ? (\n              <Icon {...dragOptions.keyboardMoveIconProps} />\n            ) : (\n              <Icon iconName=\"move\" className={classNames.keyboardMoveIcon} />\n            )}\n          </div>\n        )}\n        <div ref={allowScrollOnModal} className={classNames.scrollableContent} data-is-scrollable>\n          {dragOptions && isModalMenuOpen && (\n            <dragOptions.menu\n              items={[\n                { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },\n                { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }\n              ]}\n              onDismiss={setModalMenuClose}\n              alignTargetEdge\n              coverTarget\n              directionalHint={DirectionalHint.topLeftEdge}\n              directionalHintFixed\n              shouldFocusOnMount\n              target={internalState.scrollableContent}\n            />\n          )}\n          {children}\n        </div>\n      </FocusTrapZone>\n    );\n\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      (isModalOpen && modalResponsiveMode! >= (responsiveMode || ResponsiveMode.small) && (\n        <Layer ref={mergedRef} {...mergedLayerProps}>\n          <Popup\n            role={isAlertRole ? 'alertdialog' : 'dialog'}\n            ariaLabelledBy={titleAriaId}\n            ariaDescribedBy={subtitleAriaId}\n            // onDismiss={onDismiss}\n            shouldRestoreFocus={!ignoreExternalFocusing}\n            // Modeless modals shouldn't hide siblings.\n            // Popup will automatically handle this based on the aria-modal setting.\n            // enableAriaHiddenSiblings={enableAriaHiddenSiblings}\n            aria-modal={!isModeless}\n          >\n            <div className={classNames.root} role={!isModeless ? 'document' : undefined}>\n              {!isModeless && (\n                <Overlay\n                  aria-hidden={true}\n                  isDarkThemed={isDarkOverlay}\n                  onClick={isBlocking ? undefined : onDismiss}\n                  allowTouchBodyScroll={allowTouchBodyScroll}\n                  {...overlay}\n                />\n              )}\n              {dragOptions ? (\n                <DraggableZone\n                  handleSelector={dragOptions.dragHandleSelector || `#${focusTrapZoneId}`}\n                  preventDragSelector=\"button\"\n                  onStart={handleDragStart}\n                  onDragChange={handleDrag}\n                  onStop={handleDragStop}\n                  position={coordinates}\n                >\n                  {modalContent}\n                </DraggableZone>\n              ) : (\n                modalContent\n              )}\n            </div>\n          </Popup>\n        </Layer>\n      )) ||\n      null\n    );\n  }\n);\nModalBase.displayName = 'ModalBase';\n\ninterface IDraggableZoneStyles {\n  root: string;\n}\n\nconst getDraggableZoneClassNames = memoizeFunction((className: string, isDragging: boolean): IDraggableZoneStyles => {\n  return {\n    root: mergeStyles(\n      className,\n      isDragging && {\n        touchAction: 'none',\n        selectors: {\n          '& *': {\n            userSelect: 'none'\n          }\n        }\n      }\n    )\n  };\n});\n\ninterface IDragData {\n  position: _ICoordinates;\n  lastPosition?: _ICoordinates;\n  delta: _ICoordinates;\n}\n\ninterface IDraggableZoneProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Specifies a selector to be used as the handle that initiates drag\n   */\n  handleSelector?: string;\n\n  /**\n   * Specifies a selector to be used to prevent drag initialization.\n   * For example, if you do not want buttons inside of your handleSelector\n   * to have the cursor change to move or to allow users to select from buttons,\n   * you could pass button here (the close button in the header of a dialog is a concrete example)\n   */\n  preventDragSelector?: string;\n\n  /**\n   * the X and Y coordinates to use as an offest to position the draggable content\n   */\n  position?: _ICoordinates;\n\n  /**\n   * Callback for when dragging starts\n   */\n  onStart?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n  /**\n   * Callback for when the drag changes, while dragging\n   */\n  onDragChange?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n  /**\n   * Callback for when dragging stops\n   */\n  onStop?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n}\n\ninterface IDraggableZoneState {\n  isDragging: boolean;\n  position: _ICoordinates;\n  lastPosition?: _ICoordinates;\n}\n\nconst eventMapping = {\n  touch: {\n    start: 'touchstart',\n    move: 'touchmove',\n    stop: 'touchend'\n  },\n  mouse: {\n    start: 'mousedown',\n    move: 'mousemove',\n    stop: 'mouseup'\n  }\n};\n\n// These are needed so that we can generalize the events\n// and so we have access to clientX and clientY in the touch events\ntype MouseTouchEvent<T> = React.MouseEvent<T> & React.TouchEvent<T> & Event;\n\nclass DraggableZone extends React.Component<IDraggableZoneProps, IDraggableZoneState> {\n  private _touchId?: number;\n  private _currentEventType = eventMapping.mouse;\n  private _events: (() => void)[] = [];\n\n  constructor(props: IDraggableZoneProps) {\n    super(props);\n\n    this.state = {\n      isDragging: false,\n      position: this.props.position || { x: 0, y: 0 },\n      lastPosition: undefined\n    };\n  }\n\n  public componentDidUpdate(prevProps: IDraggableZoneProps) {\n    if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n      this.setState({ position: this.props.position });\n    }\n  }\n\n  public componentWillUnmount() {\n    this._events.forEach((dispose) => dispose());\n  }\n\n  public render() {\n    const child: any = React.Children.only(this.props.children);\n    const { props } = child;\n    const { position } = this.props;\n    const { position: statePosition, isDragging } = this.state;\n    let x = statePosition.x;\n    let y = statePosition.y;\n\n    if (position && !isDragging) {\n      x = position.x;\n      y = position.y;\n    }\n\n    return React.cloneElement(child, {\n      style: {\n        ...props.style,\n        transform: `translate(${x}px, ${y}px)`\n      },\n      className: getDraggableZoneClassNames(props.className, this.state.isDragging).root,\n      onMouseDown: this._onMouseDown,\n      onMouseUp: this._onMouseUp,\n      onTouchStart: this._onTouchStart,\n      onTouchEnd: this._onTouchEnd\n    });\n  }\n\n  private _onMouseDown = (event: MouseTouchEvent<HTMLElement>) => {\n    const onMouseDown = (React.Children.only(this.props.children) as any).props.onMouseDown;\n    if (onMouseDown) {\n      onMouseDown(event);\n    }\n\n    this._currentEventType = eventMapping.mouse;\n    return this._onDragStart(event);\n  };\n\n  private _onMouseUp = (event: MouseTouchEvent<HTMLElement>) => {\n    const onMouseUp = (React.Children.only(this.props.children) as any).props.onMouseUp;\n    if (onMouseUp) {\n      onMouseUp(event);\n    }\n\n    this._currentEventType = eventMapping.mouse;\n    return this._onDragStop(event);\n  };\n\n  private _onTouchStart = (event: MouseTouchEvent<HTMLElement>) => {\n    const onTouchStart = (React.Children.only(this.props.children) as any).props.onTouchStart;\n    if (onTouchStart) {\n      onTouchStart(event);\n    }\n\n    this._currentEventType = eventMapping.touch;\n    return this._onDragStart(event);\n  };\n\n  private _onTouchEnd = (event: MouseTouchEvent<HTMLElement>) => {\n    const onTouchEnd = (React.Children.only(this.props.children) as any).props.onTouchEnd;\n    if (onTouchEnd) {\n      onTouchEnd(event);\n    }\n\n    this._currentEventType = eventMapping.touch;\n    this._onDragStop(event);\n  };\n\n  private _onDragStart = (event: MouseTouchEvent<HTMLElement>) => {\n    // Only handle left click for dragging\n    if (typeof event.button === 'number' && event.button !== 0) {\n      return false;\n    }\n\n    // If the target doesn't match the handleSelector OR\n    // if the target does match the preventDragSelector, bail out\n    if (\n      (this.props.handleSelector && !this._matchesSelector(event.target as HTMLElement, this.props.handleSelector)) ||\n      (this.props.preventDragSelector &&\n        this._matchesSelector(event.target as HTMLElement, this.props.preventDragSelector))\n    ) {\n      return;\n    }\n\n    // Remember the touch identifier if this is a touch event so we can\n    // distinguish between individual touches in multitouch scenarios\n    // by remembering which touch point we were given\n    this._touchId = this._getTouchId(event);\n\n    const position = this._getControlPosition(event);\n    if (position === undefined) {\n      return;\n    }\n\n    const dragData = this._createDragDataFromPosition(position);\n    this.props.onStart && this.props.onStart(event, dragData);\n\n    this.setState({\n      isDragging: true,\n      lastPosition: position\n    });\n\n    // hook up the appropriate mouse/touch events to the body to ensure\n    // smooth dragging\n    this._events = [\n      on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),\n      on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)\n    ];\n\n    return;\n  };\n\n  private _onDrag = (event: any) => {\n    // Prevent scrolling on mobile devices\n    if (event.type === 'touchmove') {\n      event.preventDefault();\n    }\n\n    const position = this._getControlPosition(event);\n    if (!position) {\n      return;\n    }\n\n    // create the updated drag data from the position data\n    const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));\n    const updatedPosition = updatedData.position;\n\n    this.props.onDragChange && this.props.onDragChange(event, updatedData);\n\n    this.setState({\n      position: updatedPosition,\n      lastPosition: position\n    });\n  };\n\n  private _onDragStop = (event: any) => {\n    if (!this.state.isDragging) {\n      return;\n    }\n\n    const position = this._getControlPosition(event);\n    if (!position) {\n      return;\n    }\n\n    const baseDragData = this._createDragDataFromPosition(position);\n\n    // Set dragging to false and reset the lastPosition\n    this.setState({\n      isDragging: false,\n      lastPosition: undefined\n    });\n\n    this.props.onStop && this.props.onStop(event, baseDragData);\n\n    if (this.props.position) {\n      this.setState({\n        position: this.props.position\n      });\n    }\n\n    // Remove event handlers\n    this._events.forEach((dispose) => dispose());\n  };\n\n  /**\n   * Get the control position based off the event that fired\n   * @param event - The event to get offsets from\n   */\n  private _getControlPosition(event: MouseTouchEvent<HTMLElement>): _ICoordinates | undefined {\n    const touchObj = this._getActiveTouch(event);\n\n    // did we get the right touch?\n    if (this._touchId !== undefined && !touchObj) {\n      return undefined;\n    }\n\n    const eventToGetOffset = touchObj || event;\n    return {\n      x: eventToGetOffset.clientX,\n      y: eventToGetOffset.clientY\n    };\n  }\n\n  /**\n   * Get the active touch point that we have saved from the event's TouchList\n   * @param event - The event used to get the TouchList for the active touch point\n   */\n  private _getActiveTouch(event: MouseTouchEvent<HTMLElement>): React.Touch | undefined {\n    return (\n      (event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n      (event.changedTouches && this._findTouchInTouchList(event.changedTouches))\n    );\n  }\n\n  /**\n   * Get the initial touch identifier associated with the given event\n   * @param event - The event that contains the TouchList\n   */\n  private _getTouchId(event: MouseTouchEvent<HTMLElement>): number | undefined {\n    const touch: React.Touch | undefined =\n      (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n\n    if (touch) {\n      return touch.identifier;\n    }\n\n    return;\n  }\n\n  /**\n   * Returns if an element (or any of the element's parents) match the given selector\n   */\n  private _matchesSelector(element: HTMLElement | null, selector: string): boolean {\n    if (!element || element === document.body) {\n      return false;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    const matchesSelectorFn: Function =\n      element.matches || element.webkitMatchesSelector || (element as any).msMatchesSelector; /* for IE */\n\n    if (!matchesSelectorFn) {\n      return false;\n    }\n\n    return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n  }\n\n  /**\n   * Attempts to find the Touch that matches the identifier  we stored in dragStart\n   * @param touchList The TouchList to look for the stored identifier from dragStart\n   */\n  private _findTouchInTouchList(touchList: React.TouchList): React.Touch | undefined {\n    if (this._touchId === undefined) {\n      return;\n    }\n\n    for (let i = 0; i < touchList.length; i++) {\n      if (touchList[i]?.identifier === this._touchId) {\n        return touchList[i];\n      }\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Create DragData based off of the last known position and the new position passed in\n   * @param position The new position as part of the drag\n   */\n  private _createDragDataFromPosition(position: _ICoordinates): IDragData {\n    const { lastPosition } = this.state;\n\n    // If we have no lastPosition, use the given position\n    // for last position\n    if (lastPosition === undefined) {\n      return {\n        delta: { x: 0, y: 0 },\n        lastPosition: position,\n        position\n      };\n    }\n\n    return {\n      delta: {\n        x: position.x - lastPosition.x,\n        y: position.y - lastPosition.y\n      },\n      lastPosition,\n      position\n    };\n  }\n\n  /**\n   * Creates an updated DragData based off the current position and given baseDragData\n   * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions\n   */\n  private _createUpdatedDragData(baseDragData: IDragData): IDragData {\n    const { position } = this.state;\n    return {\n      position: {\n        x: position.x + baseDragData.delta.x,\n        y: position.y + baseDragData.delta.y\n      },\n      delta: baseDragData.delta,\n      lastPosition: position\n    };\n  }\n}\n\nconst globalClassNames = {\n  root: 'ms-Modal',\n  main: 'ms-Dialog-main',\n  scrollableContent: 'ms-Modal-scrollableContent',\n  isOpen: 'is-open',\n  layer: 'ms-Modal-Layer'\n};\n\nconst getStyles = (props: IModalStyleProps): IModalStyles => {\n  const {\n    className,\n    containerClassName,\n    scrollableContentClassName,\n    isOpen,\n    isVisible,\n    hasBeenOpened,\n    modalRectangleTop,\n    theme,\n    topOffsetFixed,\n    isModeless,\n    layerClassName,\n    isDefaultDragHandle,\n    windowInnerHeight\n  } = props;\n  const { palette, effects, fonts } = theme;\n\n  const classNames = getGlobalClassNames(globalClassNames, theme);\n\n  return {\n    root: [\n      classNames.root,\n      fonts.medium,\n      {\n        backgroundColor: 'transparent',\n        position: isModeless ? 'absolute' : 'fixed',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        opacity: 0,\n        pointerEvents: 'none',\n        transition: `opacity ${animationDuration}`\n      },\n      topOffsetFixed &&\n        typeof modalRectangleTop === 'number' &&\n        hasBeenOpened && {\n          alignItems: 'flex-start'\n        },\n      isOpen && classNames.isOpen,\n      isVisible && {\n        opacity: 1,\n        pointerEvents: 'auto'\n      },\n      className\n    ],\n    main: [\n      classNames.main,\n      {\n        boxShadow: effects.elevation64,\n        borderRadius: effects.roundedCorner2,\n        backgroundColor: palette.white,\n        boxSizing: 'border-box',\n        position: 'relative',\n        textAlign: 'left',\n        outline: '3px solid transparent',\n        maxHeight: 'calc(100% - 32px)',\n        maxWidth: 'calc(100% - 32px)',\n        minHeight: '176px',\n        minWidth: '288px',\n        overflowY: 'auto',\n        zIndex: isModeless ? ZIndexes.Layer : undefined\n      },\n      topOffsetFixed &&\n        typeof modalRectangleTop === 'number' &&\n        hasBeenOpened && {\n          top: modalRectangleTop\n        },\n      isDefaultDragHandle && {\n        cursor: 'move'\n      },\n      containerClassName\n    ],\n    scrollableContent: [\n      classNames.scrollableContent,\n      {\n        overflowY: 'auto',\n        flexGrow: 1,\n        maxHeight: '100vh',\n        selectors: {\n          ['@supports (-webkit-overflow-scrolling: touch)']: {\n            maxHeight: windowInnerHeight\n          }\n        }\n      },\n      scrollableContentClassName\n    ],\n    layer: isModeless && [\n      layerClassName,\n      classNames.layer,\n      {\n        position: 'static',\n        width: 'unset',\n        height: 'unset'\n      }\n    ],\n    keyboardMoveIconContainer: {\n      position: 'absolute',\n      display: 'flex',\n      justifyContent: 'center',\n      width: '100%',\n      padding: '3px 0px'\n    },\n    keyboardMoveIcon: {\n      fontSize: fonts.xLargePlus.fontSize,\n      width: '24px'\n    }\n  };\n};\n\n/** @internal */\nexport const _ModalClone: React.FunctionComponent<_ExtendedIModalProps> = styled<\n  _ExtendedIModalProps,\n  IModalStyleProps,\n  IModalStyles\n>(ModalBase, getStyles, undefined, {\n  scope: 'Modal',\n  fields: ['theme', 'styles', 'enableAriaHiddenSiblings']\n});\n_ModalClone.displayName = 'Modal';\n"]}