botframework-webchat-component 4.13.0 → 4.15.0

package/src/Utils/mapMap.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import mapMap from './mapMap';
 
 test('multiple a map by 10', () => {

package/src/Utils/removeInline.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import removeInline from './removeInline';
 
 test('remove single occurrence', () => {

package/src/Utils/scrollIntoViewWithBlockNearest.ts

@@ -0,0 +1,20 @@
+import computeScrollIntoView from 'compute-scroll-into-view';
+
+/**
+ * Calls `targetElement.scrollIntoView({ block: 'nearest' })`.
+ *
+ * If browser do not support options for `scrollIntoView`, fallback to polyfill.
+ */
+export default function scrollIntoViewWithBlockNearest(targetElement: HTMLElement): void {
+  // Checks if `scrollIntoView` support options or not.
+  // - https://github.com/Modernizr/Modernizr/issues/1568#issuecomment-419457972
+  // - https://stackoverflow.com/questions/46919627/is-it-possible-to-test-for-scrollintoview-browser-compatibility
+  if ('scrollBehavior' in document.documentElement.style) {
+    return targetElement.scrollIntoView({ block: 'nearest' });
+  }
+
+  // We should only move transcript scrollable, and not other scrollable, such as document.body which is from the hosting page.
+  const [action] = computeScrollIntoView(targetElement, { block: 'nearest' });
+
+  action.el.scrollTop = action.top;
+}

package/src/Utils/shallowEquals.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function shallowEquals(x, y) {
   if (x === y) {
     return true;
@@ -6,5 +8,10 @@ export default function shallowEquals(x, y) {
   const xKeys = Object.keys(x);
   const yKeys = Object.keys(y);
 
-  return xKeys.length === yKeys.length && xKeys.every(key => yKeys.includes(key) && x[key] === y[key]);
+  return (
+    xKeys.length === yKeys.length &&
+    // Mitigated through denylisting.
+    // eslint-disable-next-line security/detect-object-injection
+    xKeys.every(key => !isForbiddenPropertyName(key) && yKeys.includes(key) && x[key] === y[key])
+  );
 }

package/src/Utils/{singleToArray.js → singleToArray.ts}

@@ -1,3 +1,3 @@
-export default function singleToArray(singleOrArray) {
+export default function singleToArray<T>(singleOrArray: T | T[]): T[] {
   return singleOrArray ? (Array.isArray(singleOrArray) ? singleOrArray : [singleOrArray]) : [];
 }

package/src/Utils/supportPseudoClass.ts

@@ -0,0 +1,17 @@
+// This function is adopted from https://stackoverflow.com/questions/8531940/how-to-detect-if-browser-support-specified-css-pseudo-class
+export default function supportPseudoClass(pseudoClass: string, nonce?: string): boolean {
+  const styleElement = document.createElement('style');
+
+  nonce && styleElement.setAttribute('nonce', nonce);
+  document.head.appendChild(styleElement);
+
+  try {
+    styleElement.sheet.insertRule('html' + pseudoClass + '{}', 0);
+
+    return true;
+  } catch (error) {
+    return false;
+  } finally {
+    document.head.removeChild(styleElement);
+  }
+}

package/src/Utils/{tabbableElements.js → tabbableElements.ts}

@@ -1,11 +1,12 @@
-export default function tabbableElements(element) {
+export default function tabbableElements(element?: HTMLElement): HTMLElement[] {
   // This is an incomplete list, due to the complexity of testing for every scenario.
   // For full-list, please refer to https://allyjs.io/data-tables/focusable.html
-  const candidates = element.querySelectorAll(
-    'a[href], area[href], audio[controls], button:not(:disabled), iframe, input:not(:disabled), keygen, select:not(:disabled), summary, textarea:not(:disabled), video[controls], [contenteditable], [tabindex]'
-  );
+  const candidates: ArrayLike<HTMLElement> =
+    element?.querySelectorAll(
+      'a[href], area[href], audio[controls], button:not(:disabled), iframe, input:not(:disabled), keygen, select:not(:disabled), summary, textarea:not(:disabled), video[controls], [contenteditable], [tabindex]'
+    ) || [];
 
-  return [].filter.call(candidates, element => {
+  return ([] as HTMLElement[]).filter.call(candidates, (element: HTMLElement) => {
     const tabIndexAttribute = element.attributes.getNamedItem('tabindex');
 
     if (tabIndexAttribute && tabIndexAttribute.specified) {

package/src/Utils/walkMarkdownTokens.spec.js

@@ -6,9 +6,9 @@ import walkMarkdownTokens from './walkMarkdownTokens';
 test('walk every node and add class="markdown"', () => {
   const markdownIt = new MarkdownIt();
   const tree = markdownIt.parse('Hello, [World](#world)!');
-  const patchedTree = walkMarkdownTokens(tree, token => {
-    return updateIn(token, ['attrs'], attrs => [...(attrs || []), ['class', 'markdown']]);
-  });
+  const patchedTree = walkMarkdownTokens(tree, token =>
+    updateIn(token, ['attrs'], attrs => [...(attrs || []), ['class', 'markdown']])
+  );
   const actual = markdownIt.renderer.render(patchedTree);
 
   expect(actual).toMatchInlineSnapshot(`

package/src/connectToWebChat.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import React from 'react';
 
 import WebChatAPIContext from 'botframework-webchat-api/lib/hooks/internal/WebChatAPIContext';
@@ -6,10 +7,16 @@ import WebChatReduxContext from 'botframework-webchat-api/lib/hooks/internal/Web
 
 function removeUndefinedValues(map) {
   return Object.keys(map).reduce((result, key) => {
-    const value = map[key];
-
-    if (typeof value !== 'undefined') {
-      result[key] = value;
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      const value = map[key];
+
+      if (typeof value !== 'undefined') {
+        // Mitigated through denylisting.
+        // eslint-disable-next-line security/detect-object-injection
+        result[key] = value;
+      }
     }
 
     return result;

package/src/hooks/{index.js → index.ts}

@@ -20,6 +20,7 @@ import { useTypingIndicatorVisible } from '../BasicTypingIndicator';
 export {
   useDictateAbortable,
   useFocus,
+  /** @deprecated Please use `useFocus('sendBox')` instead. */
   useFocusSendBox,
   useMicrophoneButtonClick,
   useMicrophoneButtonDisabled,

package/src/hooks/internal/BypassSpeechSynthesisPonyfill.js

@@ -6,11 +6,12 @@
 /* eslint max-classes-per-file: ["error", 4] */
 /* eslint no-empty-function: "off" */
 
-import EventTarget, { defineEventAttribute } from 'event-target-shim-es5';
+import EventTarget, { Event, getEventAttributeValue, setEventAttributeValue } from 'event-target-shim/es5';
 
-class SpeechSynthesisEvent {
+class SpeechSynthesisEvent extends Event {
   constructor(type, utterance) {
-    this._type = type;
+    super(type);
+
     this._utterance = utterance;
   }
 
@@ -22,10 +23,8 @@ class SpeechSynthesisEvent {
     return 0;
   }
 
-  get name() {}
-
-  get type() {
-    return this._type;
+  get name() {
+    // It is expected to return `undefined`, keeping the function empty to reduce footprint.
   }
 
   get utterance() {
@@ -92,15 +91,63 @@ class SpeechSynthesisUtterance extends EventTarget {
   set volume(value) {
     this._volume = value;
   }
-}
 
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'boundary');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'end');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'error');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'mark');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'pause');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'resume');
-defineEventAttribute(SpeechSynthesisUtterance.prototype, 'start');
+  get onboundary() {
+    return getEventAttributeValue(this, 'boundary');
+  }
+
+  set onboundary(value) {
+    setEventAttributeValue(this, 'boundary', value);
+  }
+
+  get onend() {
+    return getEventAttributeValue(this, 'end');
+  }
+
+  set onend(value) {
+    setEventAttributeValue(this, 'end', value);
+  }
+
+  get onerror() {
+    return getEventAttributeValue(this, 'error');
+  }
+
+  set onerror(value) {
+    setEventAttributeValue(this, 'error', value);
+  }
+
+  get onmark() {
+    return getEventAttributeValue(this, 'mark');
+  }
+
+  set onmark(value) {
+    setEventAttributeValue(this, 'mark', value);
+  }
+
+  get onpause() {
+    return getEventAttributeValue(this, 'pause');
+  }
+
+  set onpause(value) {
+    setEventAttributeValue(this, 'pause', value);
+  }
+
+  get onresume() {
+    return getEventAttributeValue(this, 'resume');
+  }
+
+  set onresume(value) {
+    setEventAttributeValue(this, 'resume', value);
+  }
+
+  get onstart() {
+    return getEventAttributeValue(this, 'start');
+  }
+
+  set onstart(value) {
+    setEventAttributeValue(this, 'start', value);
+  }
+}
 
 class SpeechSynthesisVoice {
   get default() {
@@ -155,9 +202,15 @@ class SpeechSynthesis extends EventTarget {
     utterance.dispatchEvent(new SpeechSynthesisEvent('start', utterance));
     utterance.dispatchEvent(new SpeechSynthesisEvent('end', utterance));
   }
-}
 
-defineEventAttribute(SpeechSynthesis.prototype, 'voiceschanged');
+  get onvoiceschanged() {
+    return getEventAttributeValue(this, 'voiceschanged');
+  }
+
+  set onvoiceschanged(value) {
+    setEventAttributeValue(this, 'voiceschanged', value);
+  }
+}
 
 const speechSynthesis = new SpeechSynthesis();
 

package/src/hooks/internal/useChanged.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+/**
+ * Returns `true` if the `value` has changed, otherwise, `false`.
+ *
+ * Note: on initial call, this will return `true`.
+ *
+ * @param {T} value - The `value` to detect for changes.
+ */
+export default function useChanged<T>(value: T): boolean {
+  const prevValueRef = useRef(value);
+  const changed = value !== prevValueRef.current;
+
+  prevValueRef.current = value;
+
+  return changed;
+}

package/src/hooks/internal/useDispatchScrollPosition.js

@@ -1,7 +1,5 @@
 import useWebChatUIContext from './useWebChatUIContext';
 
 export default function useDispatchScrollPosition() {
-  const { dispatchScrollPosition, numScrollPositionObservers } = useWebChatUIContext();
-
-  return numScrollPositionObservers ? dispatchScrollPosition : undefined;
+  return useWebChatUIContext().dispatchScrollPosition;
 }

package/src/hooks/internal/useDispatchTranscriptFocusByActivityKey.ts

@@ -0,0 +1,5 @@
+import useWebChatUIContext from './useWebChatUIContext';
+
+export default function useDispatchTranscriptFocusByActivityKey(): (activityKey: string | undefined) => void {
+  return useWebChatUIContext().dispatchTranscriptFocusByActivityKey;
+}

package/src/hooks/internal/useFocusVisible.ts

@@ -0,0 +1,22 @@
+import { RefObject, useCallback, useEffect, useState } from 'react';
+
+import useObserveFocusVisible from './useObserveFocusVisible';
+
+export default function useFocusVisible(targetRef: RefObject<HTMLElement>): [boolean] {
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const handleBlur = useCallback(() => setFocusVisible(false), [setFocusVisible]);
+  const handleFocusVisible = useCallback(() => setFocusVisible(true), [setFocusVisible]);
+
+  useObserveFocusVisible(targetRef, handleFocusVisible);
+
+  useEffect(() => {
+    const { current } = targetRef;
+
+    current.addEventListener('blur', handleBlur);
+
+    return () => current.removeEventListener('blur', handleBlur);
+  }, [handleBlur, targetRef]);
+
+  return [focusVisible];
+}

package/src/hooks/internal/useMemoWithPrevious.ts

@@ -0,0 +1,16 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { DependencyList } from 'react';
+
+export default function useMemoWithPrevious<T>(factory: (prevValue: T) => T, deps: DependencyList): T {
+  const prevValueRef = useRef<T>();
+  // We are building a `useMemo`-like hook, `deps` is passed as-is and `factory` is not one fo the dependencies.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const value = useMemo<T>(() => factory(prevValueRef.current), deps);
+
+  useEffect(() => {
+    prevValueRef.current = value;
+  });
+
+  return value;
+}

package/src/hooks/internal/useMemoize.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import useMemoize from './useMemoize';
 
 jest.mock('react', () => {
@@ -5,7 +7,7 @@ jest.mock('react', () => {
   let lastResult;
 
   function arrayEquals(x, y) {
-    return x.length === y.length && x.every((item, index) => Object.is(item, y[index]));
+    return x.length === y.length && [].every.call(x, (item, index) => Object.is(item, y[+index]));
   }
 
   return {

package/src/hooks/internal/useMemoize.ts

@@ -0,0 +1,53 @@
+import { DependencyList, useMemo } from 'react';
+
+type Cache<TArgs, TResult> = { args: TArgs[]; result: TResult };
+type Fn<TArgs, TResult> = (...args: TArgs[]) => TResult;
+
+/**
+ * `useMemoize` will memoize multiple calls to the same memoize function.
+ *
+ * This is similar to `useMemo`. But instead of calling it once, `useMemoize` enables multiple calls while the `callback` function is executed.
+ *
+ * @param {Fn<TArgs, TIntermediate>} fn - The function to be memoized.
+ * @param {(fn: Fn<TArgs, TIntermediate>) => TFinal} callback - When called, this function should execute the memoizing function.
+ * @param {DependencyList[]} deps - Dependencies to detect for chagnes.
+ */
+export default function useMemoize<TArgs extends [], TIntermediate, TFinal>(
+  fn: Fn<TArgs, TIntermediate>,
+  callback: (fn: Fn<TArgs, TIntermediate>) => TFinal,
+  deps: DependencyList[]
+): TFinal {
+  if (typeof fn !== 'function') {
+    throw new Error('The first argument must be a function.');
+  } else if (typeof callback !== 'function') {
+    throw new Error('The second argument must be a function.');
+  } else if (!Array.isArray(deps)) {
+    throw new Error('The third argument must be an array.');
+  }
+
+  const memoizedFn = useMemo(() => {
+    let cache: Cache<TArgs, TIntermediate>[] = [];
+
+    return (run: (fn: Fn<TArgs, TIntermediate>) => TFinal) => {
+      const nextCache: Cache<TArgs, TIntermediate>[] = [];
+      const result = run((...args) => {
+        const { result } = [...cache, ...nextCache].find(
+          ({ args: cachedArgs }) =>
+            args.length === cachedArgs.length && args.every((arg, index) => Object.is(arg, cachedArgs[+index]))
+        ) || { result: fn(...args) };
+
+        nextCache.push({ args, result });
+
+        return result;
+      });
+
+      cache = nextCache;
+
+      return result;
+    };
+    // We are manually creating the deps here. The "callback" arg is also designed not to be impact deps, similar to useEffect(fn), where "fn" is not in deps.
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [fn, ...deps]);
+
+  return memoizedFn(callback);
+}

package/src/hooks/internal/useObserveFocusVisible.ts

@@ -0,0 +1,252 @@
+import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import supportPseudoClass from '../../Utils/supportPseudoClass';
+import useNonce from './useNonce';
+import useValueRef from './useValueRef';
+
+const INPUT_TYPES_ALLOW_LIST = [
+  'date',
+  'datetime-local',
+  'datetime',
+  'email',
+  'month',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week'
+];
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} el
+ * @return {boolean}
+ */
+function focusTriggersKeyboardModality(el: HTMLInputElement | HTMLTextAreaElement): boolean {
+  const { isContentEditable, readOnly, tagName, type } = el;
+
+  return (
+    (tagName === 'INPUT' && INPUT_TYPES_ALLOW_LIST.includes(type) && !readOnly) ||
+    (tagName === 'TEXTAREA' && !readOnly) ||
+    isContentEditable
+  );
+}
+
+function createEventSubscription(
+  target: Element | Node,
+  types: string[],
+  handler: (event: Event) => void
+): {
+  pause: () => void;
+  resume: () => void;
+} {
+  let subscribed: true;
+
+  const subscribe = () => {
+    if (!subscribed) {
+      types.forEach(type => target.addEventListener(type, handler));
+      subscribed = true;
+    }
+  };
+
+  const unsubscribe = () => {
+    if (subscribed) {
+      types.forEach(type => target.removeEventListener(type, handler));
+      subscribed = undefined;
+    }
+  };
+
+  return {
+    pause: unsubscribe,
+    resume: subscribe
+  };
+}
+
+// TODO: Add tests
+//       1. Focus via keyboard vs. mouse
+//       2. Focus via keyboard, switch app, switch back (expect to get another focusVisible after switch back)
+//       3. Focus via mouse, switch app, switch back (do NOT expect to get another focusVisible after switch back)
+function useObserveFocusVisibleForLegacyBrowsers(
+  targetRef: RefObject<HTMLElement>,
+  onFocusVisibleRef: MutableRefObject<() => void>
+) {
+  // This polyfill algorithm is adopted from https://github.com/WICG/focus-visible.
+  const blurSinceRef = useRef(0);
+  const hadKeyboardEventRef = useRef(true);
+  const hasFocusVisibleRef = useRef(false);
+
+  const eventSubscription = useMemo(
+    () =>
+      createEventSubscription(
+        document,
+        [
+          'mousemove',
+          'mousedown',
+          'mouseup',
+          'pointermove',
+          'pointerdown',
+          'pointerup',
+          'touchmove',
+          'touchstart',
+          'touchend'
+        ],
+        event => {
+          if ((event.target as HTMLElement).nodeName?.toLowerCase() !== 'html') {
+            hadKeyboardEventRef.current = false;
+            eventSubscription.pause();
+          }
+        }
+      ),
+    [hadKeyboardEventRef]
+  );
+
+  const setHasFocusVisible = useCallback(
+    nextHasFocusVisible => {
+      if (hasFocusVisibleRef.current !== nextHasFocusVisible) {
+        hasFocusVisibleRef.current = nextHasFocusVisible;
+        nextHasFocusVisible && onFocusVisibleRef?.current();
+      }
+    },
+    [hasFocusVisibleRef, onFocusVisibleRef]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
+      if (event.target === targetRef.current) {
+        setHasFocusVisible(true);
+      }
+
+      hadKeyboardEventRef.current = true;
+    },
+    [hadKeyboardEventRef, setHasFocusVisible, targetRef]
+  );
+
+  const handlePointerDown = useCallback(() => {
+    hadKeyboardEventRef.current = false;
+  }, [hadKeyboardEventRef]);
+
+  const handleFocus = useCallback(
+    ({ target }: Event) => {
+      target === targetRef.current &&
+        (hadKeyboardEventRef.current || focusTriggersKeyboardModality(target as HTMLInputElement)) &&
+        setHasFocusVisible(true);
+    },
+    [hadKeyboardEventRef, setHasFocusVisible, targetRef]
+  );
+
+  const handleBlur = useCallback(
+    (event: Event) => {
+      if (event.target === targetRef.current && hasFocusVisibleRef.current) {
+        blurSinceRef.current = Date.now();
+
+        setHasFocusVisible(false);
+      }
+    },
+    [blurSinceRef, hasFocusVisibleRef, setHasFocusVisible, targetRef]
+  );
+
+  const handleVisibilityChange = useCallback(() => {
+    if (document.visibilityState === 'hidden') {
+      // The element is blurred due to "visibilityState" set to "hidden".
+      // 100ms is referenced from the WICG polyfill.
+      // eslint-disable-next-line no-magic-numbers
+      if (Date.now() - blurSinceRef.current < 100) {
+        hadKeyboardEventRef.current = true;
+      }
+
+      eventSubscription.resume();
+    }
+  }, [blurSinceRef, eventSubscription, hadKeyboardEventRef]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, true);
+    document.addEventListener('mousedown', handlePointerDown, true);
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('touchstart', handlePointerDown, true);
+    document.addEventListener('visibilitychange', handleVisibilityChange, true);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('touchstart', handlePointerDown);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [handleKeyDown, handlePointerDown, handleVisibilityChange]);
+
+  useEffect(() => {
+    const { current: target } = targetRef;
+
+    target.addEventListener('blur', handleBlur, true);
+    target.addEventListener('focus', handleFocus, true);
+
+    return () => {
+      target.removeEventListener('blur', handleBlur);
+      target.removeEventListener('focus', handleFocus);
+    };
+
+    // We specifically add "targetRef.current" here.
+    // If the target element changed, we should reattach our event listeners.
+  }, [handleBlur, handleFocus, targetRef]);
+
+  useEffect(() => {
+    eventSubscription.resume();
+
+    return () => eventSubscription.pause();
+  }, [eventSubscription]);
+}
+
+function useObserveFocusVisibleForModernBrowsers(
+  targetRef: RefObject<HTMLElement>,
+  onFocusVisibleRef: MutableRefObject<() => void>
+) {
+  const handleFocus = useCallback(() => {
+    if (targetRef.current.matches(':focus-visible')) {
+      onFocusVisibleRef?.current();
+    }
+  }, [onFocusVisibleRef, targetRef]);
+
+  useEffect(() => {
+    const { current: target } = targetRef;
+
+    target.addEventListener('focus', handleFocus);
+
+    return () => target.removeEventListener('focus', handleFocus);
+
+    // We specifically add "targetRef.current" here.
+    // If the target element changed, we should reattach our event listeners.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleFocus, targetRef, targetRef.current]);
+}
+
+export default function useObserveFocusVisible(targetRef: RefObject<HTMLElement>, onFocusVisible: () => void) {
+  const [nonce] = useNonce();
+  const onFocusVisibleRef = useValueRef(onFocusVisible);
+
+  // The nonce is use for browser capabilities. Just in case the "nonce" had changed unexpectedly, the capabilities of the browser should never change.
+  // Thus, we are using an initial version of "nonce". In case web devs changed the "nonce" to an invalid value, we won't break rules of hooks (as stated below).
+  const nonceRef = useRef(nonce);
+
+  // ":focus-visible" selector is supported from Chrome/Edge 86+ and not supported in IE11 or Safari.
+  // Doing a capability check on pseudo classes requires injecting a stylesheet, thus nonce is needed.
+  const supportFocusVisible = useMemo(() => supportPseudoClass(':focus-visible', nonceRef.current), [nonceRef]);
+
+  // Since "supportPseudoClass" is a browser capability, the result should be constant during the page lifetime.
+  // Thus, running hooks conditionally is okay here.
+  if (supportFocusVisible) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useObserveFocusVisibleForModernBrowsers(targetRef, onFocusVisibleRef);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useObserveFocusVisibleForLegacyBrowsers(targetRef, onFocusVisibleRef);
+  }
+}

package/src/hooks/internal/usePrevious.ts

@@ -0,0 +1,12 @@
+// TODO: [P0] #4133 Don't copy.
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious<T>(value: T): T {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}