botframework-webchat-component 4.14.0 → 4.15.1

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

@@ -7,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;
+}

package/src/hooks/internal/useScrollRelative.js

@@ -5,7 +5,8 @@ import useWebChatUIContext from './useWebChatUIContext';
 export default function useScrollRelative() {
   const { scrollRelativeCallbacksRef } = useWebChatUIContext();
 
-  return useCallback((...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)), [
-    scrollRelativeCallbacksRef
-  ]);
+  return useCallback(
+    (...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)),
+    [scrollRelativeCallbacksRef]
+  );
 }

package/src/hooks/internal/useStateRef.ts

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from 'react';
+
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+
+export default function useStateRef<T>(
+  initialValue?: T
+): readonly [T, Dispatch<SetStateAction<T>>, MutableRefObject<T>] {
+  const [_, forceRender] = useState<{}>();
+  const valueRef: MutableRefObject<T> = useRef<T>(initialValue);
+
+  const setter: Dispatch<SetStateAction<T>> = useCallback(
+    (value: SetStateAction<T>) => {
+      const { current } = valueRef;
+
+      value = value instanceof Function ? value(current) : value;
+
+      if (current !== value) {
+        valueRef.current = value;
+
+        forceRender({});
+      }
+    },
+    [forceRender, valueRef]
+  );
+
+  return Object.freeze([valueRef.current, setter, valueRef]) as readonly [
+    T,
+    Dispatch<SetStateAction<T>>,
+    MutableRefObject<T>
+  ];
+}

package/src/hooks/internal/useValueRef.ts

@@ -0,0 +1,22 @@
+// TODO: [P0] #4133 Don't copy.
+import { RefObject, useMemo, useRef } from 'react';
+
+export default function useValueRef<T>(value: T): RefObject<T> {
+  const ref = useRef<T>();
+  const readOnlyRef = useMemo(
+    () =>
+      Object.create(
+        {},
+        {
+          current: {
+            get: () => ref.current
+          }
+        }
+      ),
+    []
+  );
+
+  ref.current = value;
+
+  return readOnlyRef;
+}

package/src/hooks/useFocus.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useFocus(): (where?: 'sendBox' | 'sendBoxWithoutKeyboard') => void {
+export default function useFocus(): (where?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard') => void {
   const { focusSendBoxCallbacksRef, focusTranscriptCallbacksRef } = useWebChatUIContext();
 
   return useCallback(

package/src/hooks/useRenderMarkdownAsHTML.ts

@@ -16,9 +16,8 @@ export default function useRenderMarkdownAsHTML(): (
 
   const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
 
-  return useMemo(() => renderMarkdown && (markdown => renderMarkdown(markdown, styleOptions, { externalLinkAlt })), [
-    externalLinkAlt,
-    renderMarkdown,
-    styleOptions
-  ]);
+  return useMemo(
+    () => renderMarkdown && (markdown => renderMarkdown(markdown, styleOptions, { externalLinkAlt })),
+    [externalLinkAlt, renderMarkdown, styleOptions]
+  );
 }

package/src/hooks/useScrollTo.ts

@@ -9,7 +9,8 @@ export default function useScrollTo(): (
 ) => void {
   const { scrollToCallbacksRef } = useWebChatUIContext();
 
-  return useCallback((...args) => scrollToCallbacksRef.current.forEach(callback => callback(...args)), [
-    scrollToCallbacksRef
-  ]);
+  return useCallback(
+    (...args) => scrollToCallbacksRef.current.forEach(callback => callback(...args)),
+    [scrollToCallbacksRef]
+  );
 }

package/src/hooks/useScrollToEnd.ts

@@ -5,7 +5,8 @@ import useWebChatUIContext from './internal/useWebChatUIContext';
 export default function useScrollToEnd(): () => void {
   const { scrollToEndCallbacksRef } = useWebChatUIContext();
 
-  return useCallback(() => scrollToEndCallbacksRef.current.forEach(callback => callback({ behavior: 'smooth' })), [
-    scrollToEndCallbacksRef
-  ]);
+  return useCallback(
+    () => scrollToEndCallbacksRef.current.forEach(callback => callback({ behavior: 'smooth' })),
+    [scrollToEndCallbacksRef]
+  );
 }

package/src/index.ts

@@ -44,7 +44,6 @@ const hooks = {
   ...componentHooks
 };
 
-// eslint-disable-next-line no-undef
 const version = process.env.npm_package_version;
 
 const Components = {