botframework-webchat-component 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/Styles/StyleSet/ViewCodeDialog.ts

@@ -0,0 +1,70 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createViewCodeDialogStyle() {
+  return {
+    '&.webchat__view-code-dialog': {
+      boxSizing: 'border-box',
+      display: 'grid',
+      height: '100%',
+      maxHeight: '100vh',
+      overflow: 'hidden',
+      padding: '1rem',
+      placeItems: 'center',
+
+      '& .webchat__modal-dialog__box': {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        position: 'relative'
+      },
+
+      '& .webchat__modal-dialog__close-button-layout': {
+        position: 'absolute',
+        right: 0
+      },
+
+      '& .webchat__modal-dialog__body': {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: CSSTokens.PaddingRegular,
+        overflow: 'hidden'
+      },
+
+      '& .webchat__view-code-dialog__header': {
+        alignItems: 'center',
+        display: 'flex',
+        paddingInlineEnd: '30px'
+      },
+
+      '& .webchat__view-code-dialog__title': {
+        margin: '0 auto 0 0',
+        textTransform: 'capitalize'
+      },
+
+      '& .webchat__view-code-dialog__body': {
+        border: 'none',
+        borderRadius: 0,
+        overflow: 'auto',
+        height: '100%',
+
+        '.webchat__code-block__body': {
+          display: 'block',
+          margin: 0,
+          padding: '16px 0'
+        }
+      },
+
+      '& .webchat__view-code-dialog__footer': {
+        color: CSSTokens.ColorSubtle,
+        lineHeight: '20px'
+      },
+
+      '& .webchat__view-code-dialog__copy-button': {
+        position: 'absolute',
+        right: '10px',
+        top: '10px'
+      }
+    }
+  };
+}

package/src/Styles/createStyleSet.ts

@@ -1,6 +1,8 @@
 import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import createActivitiesStyle from './StyleSet/Activities';
+import createActivityButtonStyle from './StyleSet/ActivityButton';
+import createActivityCopyButtonStyle from './StyleSet/ActivityCopyButton';
 import createAudioAttachmentStyle from './StyleSet/AudioAttachment';
 import createAudioContentStyle from './StyleSet/AudioContent';
 import createAutoResizeTextAreaStyle from './StyleSet/AutoResizeTextArea';
@@ -10,18 +12,22 @@ import createBubbleStyle from './StyleSet/Bubble';
 import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
 import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
+import createChatHistoryBoxStyleSet from './StyleSet/ChatHistoryBox';
 import createCitationModalDialogStyle from './StyleSet/CitationModalDialog';
+import createCodeBlockCopyButtonStyle from './StyleSet/CodeBlockCopyButton';
+import createCodeBlockStyle from './StyleSet/CodeBlock';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
-import createCSSCustomPropertiesStyle from './StyleSet/CSSCustomProperties';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
 import createErrorBoxStyle from './StyleSet/ErrorBox';
 import createErrorNotificationStyle from './StyleSet/ErrorNotification';
+import createFeedbackFormStyle from './StyleSet/FeedbackForm';
 import createFileContentStyle from './StyleSet/FileContent';
 import createImageAvatarStyle from './StyleSet/ImageAvatar';
 import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
 import createLinkDefinitionsStyle from './StyleSet/LinkDefinitions';
 import createMicrophoneButtonStyle from './StyleSet/MicrophoneButton';
 import createModalDialogStyle from './StyleSet/ModalDialog';
+import createMonochromeImageMaskerStyleSet from './StyleSet/MonochromeImageMasker';
 import createRenderMarkdownStyle from './StyleSet/RenderMarkdown';
 import createRootStyle from './StyleSet/Root';
 import createScrollToEndButtonStyle from './StyleSet/ScrollToEndButton';
@@ -29,8 +35,6 @@ import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxStyle from './StyleSet/SendBox';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
 import createSendStatusStyle from './StyleSet/SendStatus';
-import createSingleAttachmentActivityStyle from './StyleSet/SingleAttachmentActivity';
-import createSlottedActivityStatusStyle from './StyleSet/SlottedActivityStatus';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
 import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
@@ -39,14 +43,17 @@ import createTextContentStyle from './StyleSet/TextContent';
 import createThumbButtonStyle from './StyleSet/ThumbButton';
 import createToasterStyle from './StyleSet/Toaster';
 import createToastStyle from './StyleSet/Toast';
+import createTooltipStyle from './StyleSet/Tooltip';
 import createTypingAnimationStyle from './StyleSet/TypingAnimation';
 import createTypingIndicatorStyle from './StyleSet/TypingIndicator';
 import createUploadButtonStyle from './StyleSet/UploadButton';
 import createVideoAttachmentStyle from './StyleSet/VideoAttachment';
 import createVideoContentStyle from './StyleSet/VideoContent';
+import createViewCodeDialogStyle from './StyleSet/ViewCodeDialog';
 import createVimeoContentStyle from './StyleSet/VimeoContent';
 import createWarningNotificationStyle from './StyleSet/WarningNotification';
 import createYouTubeContentStyle from './StyleSet/YouTubeContent';
+import createFeedbackTextAreaStyle from './StyleSet/FeedbackTextArea';
 
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
@@ -57,7 +64,9 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
   return Object.freeze({
     activities: createActivitiesStyle(),
-    audioAttachment: createAudioAttachmentStyle(strictStyleOptions),
+    activityButton: createActivityButtonStyle(),
+    activityCopyButton: createActivityCopyButtonStyle(),
+    audioAttachment: createAudioAttachmentStyle(),
     audioContent: createAudioContentStyle(),
     autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
     avatar: createAvatarStyle(strictStyleOptions),
@@ -66,21 +75,23 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     carouselFilmStrip: createCarouselFilmStrip(strictStyleOptions),
     carouselFilmStripAttachment: createCarouselFilmStripAttachment(strictStyleOptions),
     carouselFlipper: createCarouselFlipper(strictStyleOptions),
+    codeBlock: createCodeBlockStyle(),
+    codeBlockCopyButton: createCodeBlockCopyButtonStyle(),
     connectivityNotification: createConnectivityNotification(strictStyleOptions),
     dictationInterims: createDictationInterimsStyle(strictStyleOptions),
     errorBox: createErrorBoxStyle(strictStyleOptions),
     errorNotification: createErrorNotificationStyle(strictStyleOptions),
     fileContent: createFileContentStyle(strictStyleOptions),
-    imageAvatar: createImageAvatarStyle(strictStyleOptions),
+    imageAvatar: createImageAvatarStyle(),
     initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
     microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
+    monochromeImageMasker: createMonochromeImageMaskerStyleSet(),
     options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
     root: createRootStyle(strictStyleOptions),
     scrollToEndButton: createScrollToEndButtonStyle(strictStyleOptions),
     sendBox: createSendBoxStyle(strictStyleOptions),
     sendBoxButton: createSendBoxButtonStyle(strictStyleOptions),
     sendBoxTextBox: createSendBoxTextBoxStyle(strictStyleOptions),
-    singleAttachmentActivity: createSingleAttachmentActivityStyle(strictStyleOptions),
     spinnerAnimation: createSpinnerAnimationStyle(strictStyleOptions),
     stackedLayout: createStackedLayoutStyle(strictStyleOptions),
     suggestedAction: createSuggestedActionStyle(strictStyleOptions),
@@ -98,14 +109,17 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
     // Following styles follows new house rules:
     // - Use CSS var instead of strictStyleOptions
+    chatHistoryBox: createChatHistoryBoxStyleSet(),
     citationModalDialog: createCitationModalDialogStyle(),
-    cssCustomProperties: createCSSCustomPropertiesStyle(strictStyleOptions),
+    feedbackForm: createFeedbackFormStyle(),
+    feedbackTextArea: createFeedbackTextAreaStyle(),
     linkDefinitions: createLinkDefinitionsStyle(),
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),
     sendStatus: createSendStatusStyle(),
-    slottedActivityStatus: createSlottedActivityStatusStyle(),
     textContent: createTextContentStyle(),
-    thumbButton: createThumbButtonStyle()
+    thumbButton: createThumbButtonStyle(),
+    tooltip: createTooltipStyle(),
+    viewCodeDialog: createViewCodeDialogStyle()
   } as const);
 }

package/src/Styles/createStyles.ts

@@ -0,0 +1,5 @@
+import { makeCreateStyles } from 'botframework-webchat-styles';
+
+export const componentStyleContent = '@--COMPONENT-STYLES-CONTENT--@';
+
+export default makeCreateStyles(componentStyleContent);

package/src/Styles/index.ts

@@ -0,0 +1,3 @@
+import createStyles from './createStyles';
+
+export { createStyles };

package/src/Styles/useCustomPropertiesClassName.ts

@@ -0,0 +1,75 @@
+import { hooks } from 'botframework-webchat-api';
+import { makeCreateStyles } from 'botframework-webchat-styles';
+import random from 'math-random';
+import { useMemo } from 'react';
+import CustomPropertyNames from './CustomPropertyNames';
+import useInjectStyles from '../hooks/internal/useInjectStyles';
+import useNonce from '../hooks/internal/useNonce';
+
+const { useStyleOptions } = hooks;
+
+const webchatCustomPropertiesClass = 'webchat__css-custom-properties';
+
+export default function useCustomPropertiesClassName() {
+  const [styleOptions] = useStyleOptions();
+  const nonce = useNonce();
+
+  const [styles, classNameState] = useMemo(() => {
+    const {
+      accent,
+      avatarSize,
+      borderAnimationColor1,
+      borderAnimationColor2,
+      borderAnimationColor3,
+      bubbleAttachmentMaxWidth,
+      bubbleAttachmentMinWidth,
+      bubbleImageMaxHeight,
+      bubbleImageMinHeight,
+      bubbleMessageMaxWidth,
+      bubbleMessageMinWidth,
+      bubbleMinHeight,
+      fontSizeSmall,
+      markdownExternalLinkIconImage,
+      paddingRegular,
+      primaryFont,
+      subtle,
+      timestampColor
+    } = styleOptions;
+
+    // eslint-disable-next-line no-magic-numbers
+    const randomClass = `wc-${Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36)}` as const;
+
+    const contents = `
+.${webchatCustomPropertiesClass}.${randomClass} {
+  display: contents;
+  ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1};
+  ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2};
+  ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3};
+  ${CustomPropertyNames.ColorAccent}: ${accent};
+  ${CustomPropertyNames.ColorSubtle}: ${subtle};
+  ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle};
+  ${CustomPropertyNames.FontPrimary}: ${primaryFont};
+  ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};
+  ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};
+  ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;
+  ${CustomPropertyNames.MaxWidthAttachmentBubble}: ${bubbleAttachmentMaxWidth}px;
+  ${CustomPropertyNames.MinWidthAttachmentBubble}: ${bubbleAttachmentMinWidth}px;
+  ${CustomPropertyNames.MaxWidthMessageBubble}: ${bubbleMessageMaxWidth}px;
+  ${CustomPropertyNames.MinWidthMessageBubble}: ${bubbleMessageMinWidth}px;
+  ${CustomPropertyNames.MinHeightBubble}: ${bubbleMinHeight}px;
+  ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
+  ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
+  ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
+}
+`;
+    const [style] = makeCreateStyles(contents)();
+
+    style.dataset.webchatInjected = 'component';
+
+    return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];
+  }, [styleOptions]);
+
+  useInjectStyles(styles, nonce);
+
+  return classNameState;
+}

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './private/Tooltip';

package/src/Tooltip/private/Tooltip.tsx

@@ -0,0 +1,26 @@
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+import { useStyleSet } from '../../hooks';
+
+type TooltipProps = Readonly<{
+  children: ReactNode;
+  className?: string | undefined;
+  position?: 'block-start';
+}>;
+
+function Tooltip({ children, className, position = 'block-start' }: TooltipProps) {
+  const [{ tooltip: tooltipClassName }] = useStyleSet();
+
+  return (
+    <span
+      className={cx('webchat__tooltip', className, tooltipClassName, `webchat__tooltip--${position}`)}
+      /* @ts-expect-error: inert unknown attribute */
+      inert="true"
+      role="tooltip"
+    >
+      {children}
+    </span>
+  );
+}
+
+export default memo(Tooltip);

package/src/Transcript/ActivityRow.tsx

@@ -1,26 +1,26 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 
-import { android } from '../Utils/detectBrowser';
-import FocusTrap from './FocusTrap';
-import ScreenReaderText from '../ScreenReaderText';
 import SpeakActivity from '../Activity/Speak';
 import useActiveDescendantId from '../providers/TranscriptFocus/useActiveDescendantId';
-import useActivityAccessibleName from './useActivityAccessibleName';
 import useFocusByActivityKey from '../providers/TranscriptFocus/useFocusByActivityKey';
 import useGetDescendantIdByActivityKey from '../providers/TranscriptFocus/useGetDescendantIdByActivityKey';
-import useValueRef from '../hooks/internal/useValueRef';
+import ScreenReaderText from '../ScreenReaderText';
+import { android } from '../Utils/detectBrowser';
+import FocusTrap from './FocusTrap';
+import useActivityAccessibleName from './useActivityAccessibleName';
 
-import type { MouseEventHandler, PropsWithChildren } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import { useRefFrom } from 'use-ref-from';
 
 const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
 
 type ActivityRowProps = PropsWithChildren<{ activity: WebChatActivity }>;
 
-const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, children }, ref) => {
+const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, children }, ref) => {
   const [activeDescendantId] = useActiveDescendantId();
   const [readActivityKeys] = useActivityKeysByRead();
   const bodyRef = useRef<HTMLDivElement>();
@@ -33,7 +33,7 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
   const activityKey = getKeyByActivity(activity);
 
   const acknowledged = useGetHasAcknowledgedByActivityKey()(activityKey);
-  const activityKeyRef = useValueRef<string>(activityKey);
+  const activityKeyRef = useRefFrom<string>(activityKey);
   const descendantId = useGetDescendantIdByActivityKey()(activityKey);
   const descendantLabelId = `webchat__basic-transcript__active-descendant-label--${activityKey}`;
 
@@ -56,6 +56,56 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
   // We are doing it in event capture phase to prevent descendants from stopping event propagation to us.
   const handleMouseDownCapture: MouseEventHandler = useCallback(() => focusSelf(false), [focusSelf]);
 
+  const focusTrapChildren = useMemo(
+    () => (
+      <div className="webchat__basic-transcript__activity-body" ref={bodyRef}>
+        {children}
+      </div>
+    ),
+    [bodyRef, children]
+  );
+
+  const activityIdRef = useRefFrom(activity.id);
+
+  const handleFormData = useCallback(
+    (event: FormDataEvent & { target: HTMLFormElement }) => {
+      const { webchatIncludeActivityId, webchatIncludeActivityKey } = event.target.dataset;
+      if (webchatIncludeActivityId) {
+        event.formData.set(webchatIncludeActivityId, activityIdRef.current ?? '');
+      }
+      if (webchatIncludeActivityKey) {
+        event.formData.set(webchatIncludeActivityKey, activityKeyRef.current);
+      }
+    },
+
+    [activityKeyRef, activityIdRef]
+  );
+
+  const prevArticleRef = useRef<HTMLElement>(null);
+
+  const wrappedRef = useCallback(
+    (el: HTMLElement | null) => {
+      if (prevArticleRef.current) {
+        prevArticleRef.current.removeEventListener('formdata', handleFormData);
+      }
+
+      if (el) {
+        el.addEventListener('formdata', handleFormData);
+      }
+
+      prevArticleRef.current = el;
+
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+    },
+    [handleFormData, ref]
+  );
+
   return (
     // TODO: [P2] Add `aria-roledescription="message"` for better AX, need localization strings.
     <article
@@ -65,7 +115,7 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
       })}
       // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
       onMouseDownCapture={handleMouseDownCapture}
-      ref={ref}
+      ref={wrappedRef}
     >
       {/* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */}
 
@@ -88,12 +138,17 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
           <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
         </div>
       )}
-      <FocusTrap onFocus={handleDescendantFocus} onLeave={handleLeaveFocusTrap}>
-        <div className="webchat__basic-transcript__activity-body" ref={bodyRef}>
-          {children}
-        </div>
+      <FocusTrap
+        onFocus={handleDescendantFocus}
+        onLeave={handleLeaveFocusTrap}
+        targetClassName="webchat__basic-transcript__activity-focus-target"
+      >
+        {focusTrapChildren}
       </FocusTrap>
-      {shouldSpeak && <SpeakActivity activity={activity} />}
+      {shouldSpeak && (
+        // TODO: Should build `webChatActivitySchema`.
+        <SpeakActivity activity={activity as WebChatActivity & { channelData: { speechSynthesisUtterance?: any } }} />
+      )}
       <div
         className={classNames('webchat__basic-transcript__activity-indicator', {
           'webchat__basic-transcript__activity-indicator--focus': isActiveDescendant
@@ -121,4 +176,4 @@ ActivityRow.propTypes = {
   children: PropTypes.any
 };
 
-export default ActivityRow;
+export default memo(ActivityRow);

package/src/Transcript/ActivityTree.tsx

@@ -0,0 +1,35 @@
+import { ActivityGroupingDecorator } from 'botframework-webchat-api/decorator';
+import React, { Fragment, memo } from 'react';
+
+import { type GroupedRenderingActivities } from '../providers/GroupedRenderingActivities/GroupedRenderingActivities';
+import useGroupedRenderingActivities from '../providers/GroupedRenderingActivities/useGroupedRenderingActivities';
+
+type ActivityGroupProps = Readonly<{
+  group: GroupedRenderingActivities;
+}>;
+
+const ActivityTreeGroup = memo(({ group }: ActivityGroupProps) => (
+  <ActivityGroupingDecorator activities={group.activities} groupingName={group.groupingName}>
+    {group.children.map(child => (
+      <ActivityTreeGroup group={child} key={child.key} />
+    ))}
+  </ActivityGroupingDecorator>
+));
+
+ActivityTreeGroup.displayName = 'ActivityTreeGroup';
+
+const ActivityTree = () => {
+  const [group] = useGroupedRenderingActivities();
+
+  return (
+    <Fragment>
+      {group.map(child => (
+        <ActivityTreeGroup group={child} key={child.key} />
+      ))}
+    </Fragment>
+  );
+};
+
+ActivityTree.displayName = 'ActivityTree';
+
+export default memo(ActivityTree);

package/src/Transcript/FocusTrap.tsx

@@ -1,26 +1,43 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useRef } from 'react';
+/* eslint-disable no-magic-numbers */
+import React, {
+  Fragment,
+  memo,
+  type FocusEvent,
+  type KeyboardEventHandler,
+  type ReactNode,
+  useCallback,
+  useRef
+} from 'react';
 
-import type { FC, KeyboardEventHandler, PropsWithChildren } from 'react';
-
-import FocusRedirector from '../Utils/FocusRedirector';
 import tabbableElements from '../Utils/tabbableElements';
-import useValueRef from '../hooks/internal/useValueRef';
-
-type FocusTrapProps = PropsWithChildren<{
+import { useRefFrom } from 'use-ref-from';
+
+const FocusTrap = ({
+  children,
+  onFocus,
+  onLeave,
+  targetClassName
+}: Readonly<{
+  children: ReactNode;
   onFocus: () => void;
   onLeave: () => void;
-}>;
-
-const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
+  targetClassName?: string | undefined;
+}>) => {
   const bodyRef = useRef<HTMLDivElement>();
-  const onLeaveRef = useValueRef<() => void>(onLeave);
+  const lastFocused = useRef<HTMLElement>();
+  const onFocusRef = useRefFrom(onFocus);
+  const onLeaveRef = useRefFrom(onLeave);
 
   const getTabbableElementsInBody = useCallback(
     () => tabbableElements(bodyRef.current).filter(element => element.getAttribute('aria-disabled') !== 'true'),
     [bodyRef]
   );
 
+  const focusOrTriggerLeave = useCallback(
+    (element: HTMLElement | undefined) => (element ? element.focus() : onLeaveRef.current?.()),
+    [onLeaveRef]
+  );
+
   const handleBodyKeyDown: KeyboardEventHandler = useCallback(
     event => {
       if (event.key === 'Escape') {
@@ -28,45 +45,78 @@ const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
         event.stopPropagation();
 
         onLeaveRef.current?.();
+      } else if (event.key === 'Tab') {
+        const activeElement = document.activeElement as HTMLElement;
+        const focusables = getTabbableElementsInBody();
+        const focusedIndex = focusables.indexOf(activeElement);
+
+        if (event.shiftKey && focusedIndex === 0) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(-1));
+        } else if (!event.shiftKey && focusedIndex === focusables.length - 1) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(0));
+        }
       }
     },
-    [onLeaveRef]
+    [focusOrTriggerLeave, getTabbableElementsInBody, onLeaveRef]
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      onFocusRef.current?.();
+
+      lastFocused.current = event.target;
+    },
+    [lastFocused, onFocusRef]
   );
 
-  const handleFirstSentinelFocus: () => void = useCallback(() => {
-    const focusables = getTabbableElementsInBody();
+  const handleBlur = useCallback(
+    event => {
+      const { target } = event;
+      const focusables = getTabbableElementsInBody();
+
+      // When blurred element became non-focusable, move to the first focusable element if available.
+      // Otherwise trigger leave.
+      if (!focusables.includes(target)) {
+        event.preventDefault();
+        event.stopPropagation();
 
-    const lastTabbableElement = focusables[focusables.length - 1];
+        focusOrTriggerLeave(focusables.at(0));
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
-    lastTabbableElement ? lastTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+  const handleTrapFocus = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.target.blur();
 
-  const handleLastSentinelFocus: () => void = useCallback(() => {
-    const [firstTabbableElement] = getTabbableElementsInBody();
+      const focusables = getTabbableElementsInBody();
 
-    firstTabbableElement ? firstTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+      if (lastFocused.current && focusables.includes(lastFocused.current)) {
+        lastFocused.current.focus();
+      } else {
+        focusOrTriggerLeave(focusables.at(0));
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
   return (
     <Fragment>
-      <FocusRedirector onFocus={handleFirstSentinelFocus} />
-      <div onFocus={onFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
+      <div onBlur={handleBlur} onFocus={handleFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
         {children}
       </div>
-      <FocusRedirector onFocus={handleLastSentinelFocus} />
+      <div aria-hidden="true" className={targetClassName} onFocus={handleTrapFocus} tabIndex={-1} />
     </Fragment>
   );
 };
 
-FocusTrap.defaultProps = {
-  children: undefined,
-  onFocus: undefined
-};
-
-FocusTrap.propTypes = {
-  children: PropTypes.any,
-  onFocus: PropTypes.func,
-  onLeave: PropTypes.func.isRequired
-};
+FocusTrap.displayName = 'FocusTrap';
 
-export default FocusTrap;
+export default memo(FocusTrap);