botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/providers/Theme/private/Context.ts

@@ -9,32 +9,32 @@ import type {
   ScrollToEndButtonMiddleware,
   SendBoxMiddleware,
   SendBoxToolbarMiddleware,
+  StyleOptions,
   ToastMiddleware,
   TypingIndicatorMiddleware
 } from 'botframework-webchat-api';
-import { type Polymiddleware } from 'botframework-webchat-api/middleware.js';
 import { createContext } from 'react';
 
 const EMPTY_ARRAY = Object.freeze([] as const);
+const EMPTY_OBJECT = Object.freeze({} as const);
 
-export type ThemeContextType = {
-  /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
-  readonly activityMiddleware: readonly ActivityMiddleware[];
-  readonly activityStatusMiddleware: readonly ActivityStatusMiddleware[];
-  readonly attachmentForScreenReaderMiddleware: readonly AttachmentForScreenReaderMiddleware[];
-  readonly attachmentMiddleware: readonly AttachmentMiddleware[];
-  readonly avatarMiddleware: readonly AvatarMiddleware[];
-  readonly cardActionMiddleware: readonly CardActionMiddleware[];
-  readonly groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
-  readonly polymiddleware: readonly Polymiddleware[];
-  readonly scrollToEndButtonMiddleware: readonly ScrollToEndButtonMiddleware[];
-  readonly sendBoxMiddleware: readonly SendBoxMiddleware[];
-  readonly sendBoxToolbarMiddleware: readonly SendBoxToolbarMiddleware[];
-  readonly toastMiddleware: readonly ToastMiddleware[];
-  readonly typingIndicatorMiddleware: readonly TypingIndicatorMiddleware[];
+export type ContextType = {
+  activityMiddleware: readonly ActivityMiddleware[];
+  activityStatusMiddleware: readonly ActivityStatusMiddleware[];
+  attachmentForScreenReaderMiddleware: readonly AttachmentForScreenReaderMiddleware[];
+  attachmentMiddleware: readonly AttachmentMiddleware[];
+  avatarMiddleware: readonly AvatarMiddleware[];
+  cardActionMiddleware: readonly CardActionMiddleware[];
+  groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
+  scrollToEndButtonMiddleware: readonly ScrollToEndButtonMiddleware[];
+  sendBoxMiddleware: readonly SendBoxMiddleware[];
+  sendBoxToolbarMiddleware: readonly SendBoxToolbarMiddleware[];
+  styleOptions: StyleOptions;
+  toastMiddleware: readonly ToastMiddleware[];
+  typingIndicatorMiddleware: readonly TypingIndicatorMiddleware[];
 };
 
-export default createContext<ThemeContextType>({
+export default createContext<ContextType>({
   activityMiddleware: EMPTY_ARRAY,
   activityStatusMiddleware: EMPTY_ARRAY,
   attachmentForScreenReaderMiddleware: EMPTY_ARRAY,
@@ -42,10 +42,10 @@ export default createContext<ThemeContextType>({
   avatarMiddleware: EMPTY_ARRAY,
   cardActionMiddleware: EMPTY_ARRAY,
   groupActivitiesMiddleware: EMPTY_ARRAY,
-  polymiddleware: EMPTY_ARRAY,
   scrollToEndButtonMiddleware: EMPTY_ARRAY,
   sendBoxMiddleware: EMPTY_ARRAY,
   sendBoxToolbarMiddleware: EMPTY_ARRAY,
+  styleOptions: EMPTY_OBJECT,
   toastMiddleware: EMPTY_ARRAY,
   typingIndicatorMiddleware: EMPTY_ARRAY
 });

package/src/providers/TranscriptFocus/TranscriptFocusComposer.tsx

@@ -1,40 +1,46 @@
-/* eslint-disable no-magic-numbers */
-import random from 'math-random';
+import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React, { memo, useCallback, useMemo, type MutableRefObject, type ReactNode } from 'react';
+import random from 'math-random';
+import React, { useCallback, useMemo } from 'react';
 
+import scrollIntoViewWithBlockNearest from '../../Utils/scrollIntoViewWithBlockNearest';
+import TranscriptFocusContext from './private/Context';
+import useActivityTreeWithRenderer from '../ActivityTree/useActivityTreeWithRenderer';
 import usePrevious from '../../hooks/internal/usePrevious';
 import useStateRef from '../../hooks/internal/useStateRef';
 import useValueRef from '../../hooks/internal/useValueRef';
-import scrollIntoViewWithBlockNearest from '../../Utils/scrollIntoViewWithBlockNearest';
-import { useGetGroupState, useGetLogicalGroupKey } from '../ActivityLogicalGrouping';
-import useGetLogicalGroupBoundaries from '../ActivityLogicalGrouping/useGetLogicalGroupBoundaries';
-import useRenderingActivityKeys from '../RenderingActivities/useRenderingActivityKeys';
-import TranscriptFocusContext, { type TranscriptFocusContextType } from './private/Context';
 
-type TranscriptFocusComposerProps = Readonly<{
-  children?: ReactNode | undefined;
+import type { FC, MutableRefObject, PropsWithChildren } from 'react';
+import type { TranscriptFocusContextType } from './private/Context';
+
+const { useGetKeyByActivity } = hooks;
+
+type TranscriptFocusComposerProps = PropsWithChildren<{
   containerRef: MutableRefObject<HTMLElement>;
 }>;
 
+function last<T>(array: ArrayLike<T>) {
+  return array[array.length - 1];
+}
+
 function uniqueId(count = Infinity) {
-  return random()
-    .toString(36)
-    .substring(2, 2 + count);
+  return (
+    random()
+      // eslint-disable-next-line no-magic-numbers
+      .toString(36)
+      // eslint-disable-next-line no-magic-numbers
+      .substring(2, 2 + count)
+  );
 }
 
-const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComposerProps) => {
-  const [rawFocusedActivityGroupKey, setRawFocusedActivityGroupKey, rawFocusedActivityGroupKeyRef] = useStateRef<
-    string | undefined
-  >();
-  const [renderingActivityKeys] = useRenderingActivityKeys();
-  const [, setRawFocusedActivityKey, rawFocusedActivityKeyRef] = useStateRef<string | undefined>();
-  const getGroupBoundaries = useGetLogicalGroupBoundaries();
-  const getGroupKeyByActivityKey = useGetLogicalGroupKey();
-  const getGroupState = useGetGroupState();
+const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, containerRef }) => {
+  const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
+  const [_, setRawFocusedActivityKey, rawFocusedActivityKeyRef] = useStateRef<string | undefined>();
+  const getKeyByActivity = useGetKeyByActivity();
 
   // As we need to use IDREF for `aria-activedescendant`,
   // this prefix will differentiate multiple instances of transcript on the same page.
+  // eslint-disable-next-line no-magic-numbers
   const prefix = useMemo<string>(() => uniqueId(3), []);
 
   const getDescendantIdByActivityKey: (activityKey?: string) => string | undefined = useCallback(
@@ -42,14 +48,9 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
     [prefix]
   );
 
-  const getGroupDescendantIdByGroupKey: (groupKey?: string) => string | undefined = useCallback(
-    (groupKey?: string) => groupKey && `webchat__transcript-focus-${prefix}__group-${groupKey}`,
-    [prefix]
-  );
-
-  const getGroupDescendantIdByActivityKey: (activityKey?: string) => string | undefined = useCallback(
-    (activityKey?: string) => activityKey && getGroupDescendantIdByGroupKey(getGroupKeyByActivityKey(activityKey)),
-    [getGroupDescendantIdByGroupKey, getGroupKeyByActivityKey]
+  const renderingActivityKeys = useMemo<readonly string[]>(
+    () => Object.freeze(flattenedActivityTree.map(({ activity }) => getKeyByActivity(activity))),
+    [flattenedActivityTree, getKeyByActivity]
   );
 
   const renderingActivityKeysRef = useValueRef<readonly string[]>(renderingActivityKeys);
@@ -65,8 +66,7 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
   const { current: rawFocusedActivityKey } = rawFocusedActivityKeyRef;
 
   const focusedActivityKey = useMemo<string>(
-    () =>
-      renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : renderingActivityKeys.at(-1),
+    () => (renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : last(renderingActivityKeys)),
     [renderingActivityKeys, rawFocusedActivityKey]
   );
 
@@ -77,42 +77,6 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
     [getDescendantIdByActivityKey, focusedActivityKey]
   );
 
-  const activeGroupDescendantId = useMemo<string>(
-    () => getGroupDescendantIdByGroupKey(rawFocusedActivityGroupKey),
-    [getGroupDescendantIdByGroupKey, rawFocusedActivityGroupKey]
-  );
-
-  const handleFocus = useCallback(
-    (activeDescendantId: string) => {
-      containerRef.current?.focus();
-
-      const activeDescendantElement = activeDescendantId && document.getElementById(activeDescendantId);
-
-      // Don't scroll active descendant into view if the focus is already inside it.
-      // Otherwise, given the focus is on the send box, clicking on any <input> inside the Adaptive Cards may cause the view to move.
-      // This UX is not desirable because click should not cause scroll.
-      if (activeDescendantElement && !activeDescendantElement.contains(document.activeElement)) {
-        scrollIntoViewWithBlockNearest(activeDescendantElement);
-      }
-    },
-    [containerRef]
-  );
-
-  const focusByGroupKey = useCallback(
-    (groupKey: string | undefined, withFocus = true) => {
-      if (!groupKey) {
-        setRawFocusedActivityGroupKey(undefined);
-        return;
-      }
-      setRawFocusedActivityGroupKey(groupKey);
-
-      const groupDescendantId = getGroupDescendantIdByGroupKey(groupKey);
-
-      withFocus && groupDescendantId && handleFocus(groupDescendantId);
-    },
-    [getGroupDescendantIdByGroupKey, handleFocus, setRawFocusedActivityGroupKey]
-  );
-
   const focusByActivityKey = useCallback<
     (activityKey: boolean | string | undefined, withFocus: boolean | undefined) => void
   >(
@@ -125,196 +89,46 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
         setRawFocusedActivityKey(key => key || focusedActivityKeyRef.current);
       } else if (activityKey) {
         setRawFocusedActivityKey(activityKey);
-        focusByGroupKey(undefined, false);
-      } else if (activityKey === undefined) {
-        // if nothing is supplied assume we want to focus current activity and scroll it into view
-        withFocus = true;
       }
 
-      const groupKey = typeof activityKey === 'string' && getGroupKeyByActivityKey(activityKey);
-      const groupState = groupKey && getGroupState(groupKey);
-
-      // shortcut for collapsed group
-      // when collapsed, we do not want to focus on the group or scroll it into view
-      if (groupState?.isCollapsed) {
-        return;
+      if (withFocus) {
+        containerRef.current?.focus();
+
+        const activeDescendantId = getDescendantIdByActivityKey(
+          activityKey === false
+            ? // If "activityKey" is false, it means "focus nothing and reset it to the last activity".
+              last(renderingActivityKeysRef.current)
+            : activityKey && activityKey !== true
+              ? // If "activity" is not "undefined" and not "true", it means "focus on this activity".
+                activityKey
+              : // If "activityKey" is "undefined", it means "don't modify the focus".
+                // If "activityKey" is "true", it means "try to focus on anything".
+                rawFocusedActivityKeyRef.current
+        );
+
+        const activeDescendantElement = activeDescendantId && document.getElementById(activeDescendantId);
+
+        // Don't scroll active descendant into view if the focus is already inside it.
+        // Otherwise, given the focus is on the send box, clicking on any <input> inside the Adaptive Cards may cause the view to move.
+        // This UX is not desirable because click should not cause scroll.
+        if (activeDescendantElement && !activeDescendantElement.contains(document.activeElement)) {
+          scrollIntoViewWithBlockNearest(activeDescendantElement);
+        }
       }
-
-      const activeDescendantId = getDescendantIdByActivityKey(
-        activityKey === false
-          ? // If "activityKey" is false, it means "focus nothing and reset it to the last activity".
-            renderingActivityKeysRef.current.at(-1)
-          : activityKey && activityKey !== true
-            ? // If "activity" is not "undefined" and not "true", it means "focus on this activity".
-              activityKey
-            : // If "activityKey" is "undefined", it means "don't modify the focus".
-              // If "activityKey" is "true", it means "try to focus on anything".
-              rawFocusedActivityKeyRef.current
-      );
-
-      withFocus && handleFocus(activeDescendantId);
     },
     [
-      focusByGroupKey,
-      focusedActivityKeyRef,
       getDescendantIdByActivityKey,
-      getGroupKeyByActivityKey,
-      getGroupState,
-      handleFocus,
-      rawFocusedActivityKeyRef,
+      containerRef,
+      focusedActivityKeyRef,
       renderingActivityKeysRef,
+      rawFocusedActivityKeyRef,
       setRawFocusedActivityKey
     ]
   );
 
-  // Helper function to get the next activity linearly
-  const getNextActivityLinear = useCallback(
-    (currentActivityKey: string, direction: 'up' | 'down'): string | undefined => {
-      const { current: orderedActivityKeys } = renderingActivityKeysRef;
-      const currentIndex = orderedActivityKeys.indexOf(currentActivityKey);
-
-      if (currentIndex === -1) {
-        return undefined;
-      }
-
-      const delta = direction === 'up' ? -1 : 1;
-      const nextIndex = currentIndex + delta;
-
-      if (nextIndex >= 0 && nextIndex < orderedActivityKeys.length) {
-        return orderedActivityKeys[+nextIndex];
-      }
-
-      return undefined;
-    },
-    [renderingActivityKeysRef]
-  );
-
-  // Handle navigation from a focused group header
-  const handleHeaderTransition = useCallback(
-    (direction: 'up' | 'down') => {
-      const { current: currentGroupKey } = rawFocusedActivityGroupKeyRef;
-      const { current: orderedActivityKeys } = renderingActivityKeysRef;
-      const currentGroupState = getGroupState(currentGroupKey);
-      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(currentGroupKey);
-
-      if (direction === 'down') {
-        if (!currentGroupState?.isCollapsed) {
-          // From expanded group header, go to first activity in the group
-          if (firstActivityKey) {
-            focusByActivityKey(firstActivityKey, true);
-          }
-        } else {
-          // From collapsed group header, skip to next activity/group outside this group
-          const lastGroupActivityIndex = orderedActivityKeys.indexOf(lastActivityKey);
-
-          if (lastGroupActivityIndex !== -1 && lastGroupActivityIndex + 1 < orderedActivityKeys.length) {
-            const nextActivityKey = orderedActivityKeys[lastGroupActivityIndex + 1];
-            const nextGroupKey = getGroupKeyByActivityKey(nextActivityKey);
-
-            if (nextGroupKey) {
-              // Next activity is in a group, focus the group header first
-              focusByGroupKey(nextGroupKey);
-            } else {
-              // Next activity is not in a group, focus it normally
-              focusByActivityKey(nextActivityKey, true);
-            }
-          }
-        }
-      } else if (direction === 'up') {
-        // From group header, go to previous activity/group
-        const currentIndex = orderedActivityKeys.indexOf(firstActivityKey);
-        if (currentIndex !== -1) {
-          const prevActivityKey = orderedActivityKeys[currentIndex - 1];
-          const prevGroupKey = getGroupKeyByActivityKey(prevActivityKey);
-          const prevGroupState =
-            prevGroupKey && prevGroupKey !== currentGroupKey ? getGroupState(prevGroupKey) : undefined;
-
-          // Previous activity is in a different collapsed group
-          if (prevGroupState?.isCollapsed) {
-            focusByActivityKey(prevActivityKey, false);
-            focusByGroupKey(prevGroupKey);
-          } else {
-            focusByActivityKey(prevActivityKey, true);
-          }
-        }
-      }
-    },
-    [
-      focusByActivityKey,
-      focusByGroupKey,
-      getGroupBoundaries,
-      getGroupKeyByActivityKey,
-      getGroupState,
-      rawFocusedActivityGroupKeyRef,
-      renderingActivityKeysRef
-    ]
-  );
-
-  // Helper function to handle navigation to a different group
-  const handleGroupTransition = useCallback(
-    (currentActivityKey: string, nextActivityKey: string, direction: 'up' | 'down') => {
-      const currentGroupKey = getGroupKeyByActivityKey(currentActivityKey);
-      const nextGroupKey = getGroupKeyByActivityKey(nextActivityKey);
-
-      if (!nextGroupKey || nextGroupKey === currentGroupKey) {
-        // Not changing groups - focus activity, reset group
-        focusByActivityKey(nextActivityKey, true);
-        return;
-      }
-
-      // Moving to a different group
-      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(nextGroupKey);
-      const nextGroupState = getGroupState(nextGroupKey);
-
-      if (direction === 'down' && firstActivityKey === nextActivityKey) {
-        // Going down into a new group - always focus header first
-        focusByActivityKey(currentActivityKey, false);
-        focusByGroupKey(nextGroupKey);
-      } else if (direction === 'up' && lastActivityKey === nextActivityKey && nextGroupState?.isCollapsed) {
-        // Going up into a collapsed group from below - focus header
-        focusByGroupKey(nextGroupKey);
-      } else {
-        // Other cases - focus activity, reset header focus
-        focusByActivityKey(nextActivityKey, true);
-      }
-    },
-    [focusByActivityKey, focusByGroupKey, getGroupBoundaries, getGroupKeyByActivityKey, getGroupState]
-  );
-
-  // Helper function to handle delta > 1 navigation
-  const handleDeltaNavigation = useCallback(
-    (delta: number) => {
-      const { current: orderedActivityKeys } = renderingActivityKeysRef;
-      const { current: focusedActivityKey } = focusedActivityKeyRef;
-
-      // Handle jumping to first/last activity
-      if (Math.abs(delta) === Infinity || Math.abs(delta) >= orderedActivityKeys.length) {
-        const targetActivityKey = delta < 0 ? orderedActivityKeys.at(0) : orderedActivityKeys.at(-1);
-        if (targetActivityKey) {
-          focusByActivityKey(targetActivityKey, true);
-        }
-        return;
-      }
-
-      // For delta > 1, handle multi-step navigation
-      if (Math.abs(delta) > 1) {
-        const currentIndex = orderedActivityKeys.indexOf(focusedActivityKey || '');
-        if (currentIndex !== -1) {
-          const targetIndex = Math.max(0, Math.min(orderedActivityKeys.length - 1, currentIndex + delta));
-          const targetActivityKey = orderedActivityKeys.at(targetIndex);
-          if (targetActivityKey) {
-            focusByActivityKey(targetActivityKey, true);
-          }
-        }
-      }
-    },
-    [focusByActivityKey, focusedActivityKeyRef, renderingActivityKeysRef]
-  );
-
   const focusRelativeActivity = useCallback(
     (delta: number) => {
       const { current: orderedActivityKeys } = renderingActivityKeysRef;
-      const { current: rawFocusedActivityGroupKey } = rawFocusedActivityGroupKeyRef;
 
       if (isNaN(delta) || !orderedActivityKeys.length) {
         return focusByActivityKey(false, true);
@@ -322,100 +136,31 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
 
       const { current: focusedActivityKey } = focusedActivityKeyRef;
 
-      const isHeaderFocused = !!activeGroupDescendantId;
-
-      if (delta === 0) {
-        if (isHeaderFocused) {
-          focusByGroupKey(rawFocusedActivityGroupKey, true);
-        } else {
-          focusByActivityKey(focusedActivityKey, true);
-        }
-        return;
-      }
-
-      if (Math.abs(delta) > 1) {
-        return handleDeltaNavigation(delta);
-      }
+      const index = orderedActivityKeys.indexOf(focusedActivityKey);
+      const nextIndex = ~index
+        ? Math.max(0, Math.min(orderedActivityKeys.length - 1, index + delta))
+        : orderedActivityKeys.length - 1;
 
-      const direction = delta < 0 ? 'up' : 'down';
-
-      // Handle navigation from a focused group header
-      if (isHeaderFocused && rawFocusedActivityGroupKey) {
-        return handleHeaderTransition(direction);
-      }
-
-      // Handle navigation from a focused activity
-      const groupKey = getGroupKeyByActivityKey(focusedActivityKey);
-      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(groupKey);
-      const groupState = groupKey ? getGroupState(groupKey) : undefined;
-
-      // In group special cases
-      if (groupKey) {
-        if (direction === 'up') {
-          // For expanded groups: only focus header when going up from first activity
-          // For collapsed groups: focus header when going up from any activity in the group
-          if ((firstActivityKey === focusedActivityKey && !groupState?.isCollapsed) || groupState?.isCollapsed) {
-            // From first activity in expanded group OR any activity in collapsed group, go to group header
-            focusByActivityKey(focusedActivityKey, false);
-            focusByGroupKey(groupKey);
-            return;
-          }
-        } else if (direction === 'down') {
-          // Special handling for collapsed groups: when moving down from any activity in a collapsed group,
-          // jump to the next visible element outside the group
-          if (groupState?.isCollapsed) {
-            const nextActivityKey = getNextActivityLinear(lastActivityKey, direction);
-            return handleGroupTransition(lastActivityKey, nextActivityKey, direction);
-          }
-        }
-      }
-
-      // Handle regular linear navigation
-      const nextActivityKey = getNextActivityLinear(focusedActivityKey, direction);
-      if (nextActivityKey) {
-        return handleGroupTransition(focusedActivityKey, nextActivityKey, direction);
-      }
+      focusByActivityKey(orderedActivityKeys[+nextIndex], true);
     },
-    [
-      activeGroupDescendantId,
-      focusByActivityKey,
-      focusByGroupKey,
-      focusedActivityKeyRef,
-      getGroupBoundaries,
-      getGroupKeyByActivityKey,
-      getGroupState,
-      getNextActivityLinear,
-      handleDeltaNavigation,
-      handleGroupTransition,
-      handleHeaderTransition,
-      rawFocusedActivityGroupKeyRef,
-      renderingActivityKeysRef
-    ]
+    [focusedActivityKeyRef, renderingActivityKeysRef, focusByActivityKey]
   );
 
   const contextValue = useMemo<TranscriptFocusContextType>(
     () => ({
       activeDescendantIdState: Object.freeze([activeDescendantId]) as readonly [string],
-      activeGroupDescendantIdState: Object.freeze([activeGroupDescendantId]) as readonly [string],
+      getDescendantIdByActivityKey,
       focusByActivityKey,
-      focusByGroupKey,
       focusedActivityKeyState: Object.freeze([focusedActivityKey]) as readonly [string],
       focusedExplicitlyState: Object.freeze([!!rawFocusedActivityKey]) as readonly [boolean],
-      focusedGroupKeyState: Object.freeze([rawFocusedActivityGroupKey]) as readonly [string],
-      focusRelativeActivity,
-      getDescendantIdByActivityKey,
-      getGroupDescendantIdByActivityKey
+      focusRelativeActivity
     }),
     [
       activeDescendantId,
-      activeGroupDescendantId,
+      getDescendantIdByActivityKey,
       focusByActivityKey,
-      focusByGroupKey,
       focusedActivityKey,
       focusRelativeActivity,
-      getDescendantIdByActivityKey,
-      getGroupDescendantIdByActivityKey,
-      rawFocusedActivityGroupKey,
       rawFocusedActivityKey
     ]
   );
@@ -423,8 +168,6 @@ const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComp
   return <TranscriptFocusContext.Provider value={contextValue}>{children}</TranscriptFocusContext.Provider>;
 };
 
-TranscriptFocusComposer.displayName = 'TranscriptFocusComposer';
-
 TranscriptFocusComposer.propTypes = {
   // PropTypes is not fully compatible with TypeScript.
   // @ts-ignore
@@ -433,4 +176,4 @@ TranscriptFocusComposer.propTypes = {
   }).isRequired
 };
 
-export default memo(TranscriptFocusComposer);
+export default TranscriptFocusComposer;

package/src/providers/TranscriptFocus/private/Context.ts

@@ -2,15 +2,11 @@ import { createContext } from 'react';
 
 type TranscriptFocusContextType = {
   activeDescendantIdState: readonly [string];
-  activeGroupDescendantIdState: readonly [string];
   focusByActivityKey: (activityKey: boolean | string | undefined, withFocus: boolean | undefined) => void;
-  focusByGroupKey: (groupKey: string | undefined, withFocus: boolean | undefined) => void;
   focusedActivityKeyState: readonly [string];
   focusedExplicitlyState: readonly [boolean];
-  focusedGroupKeyState: readonly [string];
   focusRelativeActivity: (delta: number) => void;
   getDescendantIdByActivityKey: (activityKey?: string) => string | undefined;
-  getGroupDescendantIdByActivityKey: (activityKey?: string) => string | undefined;
 };
 
 const TranscriptFocusContext = createContext<TranscriptFocusContextType>(undefined);

package/src/providers/TranscriptFocus/useActiveDescendantId.ts

@@ -1,8 +1,5 @@
 import useTranscriptFocusContext from './private/useContext';
 
 export default function useActiveDescendantId(): readonly [string] {
-  const context = useTranscriptFocusContext();
-  return context.activeGroupDescendantIdState[0]
-    ? context.activeGroupDescendantIdState
-    : context.activeDescendantIdState;
+  return useTranscriptFocusContext().activeDescendantIdState;
 }

package/src/providers/TranscriptFocus/useFocusRelativeActivity.ts

@@ -1,5 +1,5 @@
 import useTranscriptFocusContext from './private/useContext';
 
-export default function useFocusRelativeActivity(): (delta: number) => void {
+export default function useFocusByActivityKey(): (delta: number) => void {
   return useTranscriptFocusContext().focusRelativeActivity;
 }