botframework-webchat 4.15.3-main.20220706.75d867c → 4.15.3-main.20220728.008aa26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat",
-  "version": "4.15.3-main.20220706.75d867c",
+  "version": "4.15.3-main.20220728.008aa26",
   "description": "A highly-customizable web-based chat client for Azure Bot Services.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -48,10 +48,10 @@
     "@babel/runtime": "7.17.2",
     "adaptivecards": "2.10.0",
     "botframework-directlinejs": "0.15.1",
-    "botframework-directlinespeech-sdk": "4.15.3-main.20220706.75d867c",
-    "botframework-webchat-api": "4.15.3-main.20220706.75d867c",
-    "botframework-webchat-component": "4.15.3-main.20220706.75d867c",
-    "botframework-webchat-core": "4.15.3-main.20220706.75d867c",
+    "botframework-directlinespeech-sdk": "4.15.3-main.20220728.008aa26",
+    "botframework-webchat-api": "4.15.3-main.20220728.008aa26",
+    "botframework-webchat-component": "4.15.3-main.20220728.008aa26",
+    "botframework-webchat-core": "4.15.3-main.20220728.008aa26",
     "classnames": "2.3.1",
     "core-js": "3.21.1",
     "markdown-it": "12.3.2",
@@ -84,8 +84,8 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "concurrently": "^7.0.0",
     "esbuild": "^0.14.47",
-    "isomorphic-react": "4.15.3-main.20220706.75d867c",
-    "isomorphic-react-dom": "4.15.3-main.20220706.75d867c",
+    "isomorphic-react": "4.15.3-main.20220728.008aa26",
+    "isomorphic-react-dom": "4.15.3-main.20220728.008aa26",
     "source-map-loader": "^3.0.1",
     "terser-webpack-plugin": "^5.3.1",
     "typescript": "^4.6.2",

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/closest.ts

@@ -0,0 +1,17 @@
+// Ponyfill `HTMLElement.closest`.
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+export default function closest(element: HTMLElement, selector: string): HTMLElement | undefined {
+  if (typeof element.closest === 'function') {
+    return element.closest(selector);
+  }
+
+  let current: HTMLElement | null = element;
+
+  while (current) {
+    if (current.matches(selector)) {
+      return current;
+    }
+
+    current = current.parentElement;
+  }
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/findDOMNodeOwner.ts

@@ -0,0 +1,25 @@
+import type { AdaptiveCard, CardObject, ShowCardAction } from 'adaptivecards';
+
+// TODO: [P2] Remove this when Adaptive Card fixed their bug #7606.
+//            https://github.com/microsoft/AdaptiveCards/issues/7606
+//            Currently, their findDOMNodeOwner() returns bad result when passing an Action attached to the card.
+export default function findDOMNodeOwner(adaptiveCard: AdaptiveCard, element: HTMLElement): CardObject | undefined {
+  for (let count = adaptiveCard.getActionCount(), index = 0; index < count; index++) {
+    const action = adaptiveCard.getActionAt(index);
+
+    if (action.renderedElement === element) {
+      return action;
+    }
+
+    if (action.getJsonTypeName() === 'Action.ShowCard') {
+      const { card } = action as ShowCardAction;
+      const cardObject = card && findDOMNodeOwner(card, element);
+
+      if (cardObject) {
+        return cardObject;
+      }
+    }
+  }
+
+  return adaptiveCard.findDOMNodeOwner(element);
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/useAdaptiveCardModEffect.ts

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import useLazyRef from './useLazyRef';
+import useValueRef from './useValueRef';
+
+import type { AdaptiveCard } from 'adaptivecards';
+
+type ModFunction<TArgs extends unknown[] = []> = (
+  adaptiveCard: AdaptiveCard,
+  cardElement: HTMLElement,
+  ...args: TArgs
+) => () => void;
+
+class Mod<TArgs extends unknown[]> {
+  constructor(mod: ModFunction<TArgs>) {
+    this.#mod = mod;
+  }
+
+  // @ts-ignore We are using Babel to transpile and it will transpile private modifier.
+  #mod: ModFunction<TArgs>;
+  // @ts-ignore We are using Babel to transpile and it will transpile private modifier.
+  #undo: (() => void) | undefined;
+
+  apply(adaptiveCard: AdaptiveCard | undefined, cardElement: HTMLElement | undefined, ...args: TArgs) {
+    this.#undo?.();
+    this.#undo = adaptiveCard && cardElement && this.#mod(adaptiveCard, cardElement, ...args);
+  }
+
+  undo() {
+    this.#undo?.();
+    this.#undo = undefined;
+  }
+}
+
+/**
+ * Creates a mod effect for Adaptive Card.
+ *
+ * When this hook is executed, it will return two functions for applying and undo the mod.
+ * It will also monitor the DOM tree and undo-then-reapply if mutation occurred.
+ *
+ * The first function must be called right after DOM is mounted. The second function must be called right before re-render.
+ *
+ * @return {[function, function]} Two functions, the first one to apply the mod, the second one to undo the mod.
+ */
+export default function useAdaptiveCardModEffect<TArgs extends unknown[]>(
+  modder: (adaptiveCard: AdaptiveCard, cardElement: HTMLElement, ...args: TArgs) => () => void,
+  adaptiveCard: AdaptiveCard
+): readonly [(cardElement: HTMLElement) => void, () => void] {
+  const adaptiveCardRef = useValueRef(adaptiveCard);
+  const mod = useMemo(() => new Mod<TArgs>(modder), [modder]);
+  const reapplyRef = useRef<() => void>();
+
+  const observerRef = useLazyRef<MutationObserver>(
+    () =>
+      new MutationObserver(() => {
+        reapplyRef.current?.();
+      })
+  );
+
+  useEffect(
+    () => () => {
+      observerRef.current.disconnect();
+    },
+    [observerRef]
+  );
+
+  const handleApply = useCallback(
+    (cardElement: HTMLElement, ...args: TArgs) => {
+      if (adaptiveCardRef.current && cardElement) {
+        // Apply the mod immediately, then assign the function to reapply() so we can call later when mutation happens.
+        (reapplyRef.current = () => mod.apply(adaptiveCardRef.current, cardElement, ...args))();
+      }
+
+      const { current: observer } = observerRef;
+
+      observer.disconnect();
+      observer.observe(cardElement, { childList: true, subtree: true });
+    },
+    [adaptiveCardRef, observerRef, mod]
+  );
+
+  const handleUndo = useCallback(() => {
+    mod.undo();
+
+    // If we have undo-ed the mod, calling reapply() through MutationObserver should be no-op.
+    reapplyRef.current = undefined;
+  }, [mod, reapplyRef]);
+
+  return useMemo(
+    () => Object.freeze([handleApply, handleUndo]) as readonly [(cardElement: HTMLElement) => void, () => void],
+    [handleApply, handleUndo]
+  );
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/useLazyRef.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+
+import type { MutableRefObject } from 'react';
+
+const UNINITIALIZED = Symbol();
+
+export default function useLazyRef<T>(refInit: () => T): MutableRefObject<T> {
+  const ref = useRef<T | typeof UNINITIALIZED>(UNINITIALIZED);
+
+  if (ref.current === UNINITIALIZED) {
+    ref.current = refInit();
+  }
+
+  return ref as MutableRefObject<T>;
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/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 | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/useValueRef.ts

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+import type { RefObject } from 'react';
+
+export default function useValueRef<T>(value: T): RefObject<T> {
+  const ref = useRef<T>(value);
+
+  ref.current = value;
+
+  return ref;
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/useActionSetShouldNotBeMenuBarModEffect.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import bunchUndos from '../../DOMManipulationWithUndo/bunchUndos';
+import setOrRemoveAttributeIfFalseWithUndo from '../../DOMManipulationWithUndo/setOrRemoveAttributeIfFalseWithUndo';
+import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
+
+import type { AdaptiveCard } from 'adaptivecards';
+
+/**
+ * Accessibility: ActionSet should not be menu bar.
+ *
+ * Menu bar is not accessible through screen reader keyboard shortcut keys:
+ *
+ * - <kbd>B</kbd> will jump to next button, which the end-user can quickly the chosen action;
+ * - <kbd>F</kbd> will jump to next form field, which is very similar but also jump to text fields;
+ * - There are no keyboard shortcut keys for menu.
+ *
+ * Marking action button as menu item in a menu bar hurts accessibility. End-user will not be able to jump to buttons quickly.
+ *
+ * Thus, ActionSet should not be menu bar.
+ */
+export default function useActionShouldBePushButtonModEffect(adaptiveCard: AdaptiveCard) {
+  const modder = useMemo(
+    () => (_: AdaptiveCard, cardElement: HTMLElement) => {
+      const actionSetElements = Array.from(
+        cardElement.querySelectorAll('.ac-actionSet[role="menubar"]') as NodeListOf<HTMLElement>
+      );
+
+      const undoStack = actionSetElements.map(actionSetElement =>
+        setOrRemoveAttributeIfFalseWithUndo(actionSetElement, 'role', false)
+      );
+
+      return () => bunchUndos(undoStack)();
+    },
+    []
+  );
+
+  return useAdaptiveCardModEffect(modder, adaptiveCard);
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/useActionShouldBePushButtonModEffect.ts

@@ -0,0 +1,105 @@
+import { useMemo, useRef } from 'react';
+
+import addEventListenerWithUndo from '../../DOMManipulationWithUndo/addEventListenerWithUndo';
+import bunchUndos from '../../DOMManipulationWithUndo/bunchUndos';
+import closest from './private/closest';
+import durableAddClassWithUndo from '../../DOMManipulationWithUndo/durableAddClassWithUndo';
+import findDOMNodeOwner from './private/findDOMNodeOwner';
+import setOrRemoveAttributeIfFalseWithUndo from '../../DOMManipulationWithUndo/setOrRemoveAttributeIfFalseWithUndo';
+import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
+import usePrevious from './private/usePrevious';
+
+import type { AdaptiveCard, CardObject } from 'adaptivecards';
+import type { UndoFunction } from '../../DOMManipulationWithUndo/types/UndoFunction';
+
+/**
+ * Accessibility: Action in ActionSet/CardElement should be push button.
+ *
+ * Pressing the action button is a decision-making process. The decision made by the end-user need to be read by the screen reader.
+ * Thus, we need to indicate what decision the end-user made.
+ *
+ * Since action buttons are button, the intuitive way to indicate selection of a button is marking it as pressed.
+ *
+ * One exception is the `Action.ShowUrl` action. This button represents expand/collapse header of an accordion.
+ * Thus, their state is indicated by `aria-expanded`, instead of `aria-pressed`.
+ * However, we still need to remove other unnecessary ARIA fields.
+ */
+export default function useActionShouldBePushButtonModEffect(
+  adaptiveCard: AdaptiveCard
+): readonly [(cardElement: HTMLElement, actionPerformedClassName?: string) => void, () => void] {
+  const prevAdaptiveCard = usePrevious(adaptiveCard);
+  const pushedCardObjectsRef = useRef<Set<CardObject>>(new Set());
+
+  prevAdaptiveCard === adaptiveCard || pushedCardObjectsRef.current.clear();
+
+  const modder = useMemo(
+    () => (adaptiveCard: AdaptiveCard, cardElement: HTMLElement, actionPerformedClassName?: string) => {
+      const undoStack: UndoFunction[] = [];
+
+      Array.from(cardElement.querySelectorAll('button.ac-pushButton') as NodeListOf<HTMLButtonElement>).forEach(
+        actionElement => {
+          const cardObject = findDOMNodeOwner(adaptiveCard, actionElement);
+
+          if (!actionElement.hasAttribute('aria-expanded')) {
+            if (pushedCardObjectsRef.current.has(cardObject)) {
+              actionPerformedClassName &&
+                undoStack.push(durableAddClassWithUndo(actionElement, actionPerformedClassName));
+
+              undoStack.push(setOrRemoveAttributeIfFalseWithUndo(actionElement, 'aria-pressed', 'true'));
+            } else {
+              undoStack.push(setOrRemoveAttributeIfFalseWithUndo(actionElement, 'aria-pressed', 'false'));
+            }
+          }
+
+          undoStack.push(
+            setOrRemoveAttributeIfFalseWithUndo(actionElement, 'aria-posinset', false),
+            setOrRemoveAttributeIfFalseWithUndo(actionElement, 'aria-setsize', false),
+            setOrRemoveAttributeIfFalseWithUndo(actionElement, 'role', false)
+          );
+        }
+      );
+
+      undoStack.push(
+        addEventListenerWithUndo(
+          cardElement,
+          'click',
+          ({ target }) => {
+            // Depends on click location, `target` could be the <div> inside the <button class="ac-pushButton">.
+            // Thus, we need to check if we the `target` is inside `button.ac-pushButton` or not.
+            const actionElement = closest(target as HTMLButtonElement, 'button.ac-pushButton');
+
+            if (!actionElement) {
+              return;
+            }
+
+            const cardObject = findDOMNodeOwner(adaptiveCard, actionElement);
+
+            if (
+              // Not an AC action.
+              !cardObject ||
+              // Ignores buttons which are supposed to be disabled.
+              actionElement.getAttribute('aria-disabled') === 'true' ||
+              // Mods all AC action buttons except those for `Action.ShowCard`, which has `aria-expanded` attribute.
+              actionElement.hasAttribute('aria-expanded')
+            ) {
+              return;
+            }
+
+            actionPerformedClassName &&
+              undoStack.push(durableAddClassWithUndo(actionElement, actionPerformedClassName));
+
+            undoStack.push(setOrRemoveAttributeIfFalseWithUndo(actionElement, 'aria-pressed', 'true'));
+
+            cardObject && pushedCardObjectsRef.current.add(cardObject);
+          },
+          { capture: true }
+        )
+      );
+
+      return () => bunchUndos(undoStack)();
+    },
+    [pushedCardObjectsRef]
+  );
+
+  return useAdaptiveCardModEffect(modder, adaptiveCard);
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/useActiveElementModEffect.ts

@@ -0,0 +1,35 @@
+import { useMemo, useRef } from 'react';
+
+import findDOMNodeOwner from './private/findDOMNodeOwner';
+import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
+import usePrevious from './private/usePrevious';
+
+import type { AdaptiveCard, CardObject } from 'adaptivecards';
+
+/**
+ * Re-rendering: Last focused element must be persisted during render cycle.
+ */
+export default function useActiveElementModEffect(adaptiveCard: AdaptiveCard) {
+  const activeCardObjectRef = useRef<CardObject | undefined>();
+  const prevAdaptiveCard = usePrevious(adaptiveCard);
+
+  if (prevAdaptiveCard !== adaptiveCard) {
+    activeCardObjectRef.current = undefined;
+  }
+
+  const modder = useMemo(
+    () => (adaptiveCard: AdaptiveCard) => {
+      // When apply, if we have saved the `CardObject` that was focused, restore its focused to the newly rendered element.
+      activeCardObjectRef.current?.renderedElement?.focus?.();
+
+      // When undo, we are preparing for the next rendering.
+      // So, find and save the `CardObject` that is currently focused.
+      return () => {
+        activeCardObjectRef.current = findDOMNodeOwner(adaptiveCard, document.activeElement as HTMLElement);
+      };
+    },
+    [activeCardObjectRef]
+  );
+
+  return useAdaptiveCardModEffect(modder, adaptiveCard);
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/useDisabledModEffect.ts

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+
+import bunchUndos from '../../DOMManipulationWithUndo/bunchUndos';
+import durableDisableInputElementAccessiblyWithUndo from '../../DOMManipulationWithUndo/durableDisableInputElementAccessiblyWithUndo';
+import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
+
+import type { AdaptiveCard } from 'adaptivecards';
+import type { UndoFunction } from '../../DOMManipulationWithUndo/types/UndoFunction';
+
+// This is intended. This is a no-op function and intended to do nothing.
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const NO_OP: UndoFunction = () => {};
+
+// In Adaptive Cards, <button> with "aria-expanded" attribute means it is makeshift of <details> and it is Action.ShowCard.
+// In HTML, <details> should not be disabled unless the accordion does not permit the panel to be collapsed.
+// So when we look for input elements, should skip <button> that mimick <details>.
+const INPUT_ELEMENT_SELECTOR = 'button:not([aria-expanded]), input, select, textarea';
+type InputElementType = HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+/**
+ * Accessibility: Form fields in Adaptive Cards need to be disabled to reduce confusion for screen reader users.
+ *
+ * One exception is the `Action.ShowUrl`, this is because this action is expand/collapse of an accordion control.
+ * Similar to `<details>`/`<summary>`, accordion must not allowed to be disabled.
+ */
+export default function useDisabledModEffect(
+  adaptiveCard: AdaptiveCard
+): readonly [(cardElement: HTMLElement, disabled: boolean) => void, () => void] {
+  const modder = useMemo(
+    () => (_, cardElement: HTMLElement, disabled: boolean) => {
+      if (!disabled) {
+        return NO_OP;
+      }
+
+      const undoStack: (() => void)[] = Array.from(
+        cardElement.querySelectorAll(INPUT_ELEMENT_SELECTOR) as NodeListOf<InputElementType>
+      ).map(element => durableDisableInputElementAccessiblyWithUndo(element));
+
+      return () => bunchUndos(undoStack)();
+    },
+    []
+  );
+
+  return useAdaptiveCardModEffect(modder, adaptiveCard);
+}

package/src/adaptiveCards/Attachment/AdaptiveCardHacks/usePersistValuesModEffect.ts

@@ -0,0 +1,110 @@
+import { useMemo, useRef } from 'react';
+
+import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
+import usePrevious from './private/usePrevious';
+
+import type { AdaptiveCard, CardObject } from 'adaptivecards';
+
+/**
+ * Gets all user-inputted values under a DOM node.
+ *
+ * We assume values are ID-ed. If not ID-ed (such as `<textarea>`), there will be only a single instance (no two `<textarea>`).
+ */
+function getUserValues(element: HTMLElement | undefined): Set<string> {
+  if (!element) {
+    return new Set();
+  }
+
+  return Array.from(
+    element.querySelectorAll('input, option, textarea') as NodeListOf<
+      HTMLInputElement | HTMLOptionElement | HTMLTextAreaElement
+    >
+  ).reduce<Set<string>>((values, element) => {
+    if (element instanceof HTMLInputElement) {
+      const { type } = element;
+
+      if (type === 'checkbox' || type === 'radio') {
+        element.checked && values.add(element.value);
+      } else {
+        // ASSUMPTION: We expect CardObject will NOT mix <input type="text"> with <input type="checkbox">.
+        values.clear();
+        values.add(element.value);
+      }
+    } else if (element instanceof HTMLOptionElement) {
+      element.selected && values.add(element.value);
+    } else {
+      // ASSUMPTION: We expect CardObject will NOT mix <textarea> with <input type="checkbox">.
+      values.clear();
+      values.add(element.value);
+    }
+
+    return values;
+  }, new Set());
+}
+
+/**
+ * Set multiple user-inputted values under a DOM node.
+ *
+ * This function must be paired with `getUserValues`.
+ */
+function setUserValues(element: HTMLElement | undefined, values: Set<string>): void {
+  if (!element) {
+    return;
+  }
+
+  // If the element does not support multiple choices, say <input type="text"> or <textarea>, then, use the first value.
+  const defaultValue = Array.from(values)[0] || '';
+
+  (
+    element.querySelectorAll('input, option, textarea') as NodeListOf<
+      HTMLInputElement | HTMLOptionElement | HTMLTextAreaElement
+    >
+  ).forEach(element => {
+    if (element instanceof HTMLInputElement) {
+      const { type } = element;
+
+      if (type === 'checkbox' || type === 'radio') {
+        element.checked = values.has(element.value);
+      } else {
+        element.value = defaultValue;
+      }
+    } else if (element instanceof HTMLOptionElement) {
+      element.selected = values.has(element.value);
+    } else {
+      element.value = defaultValue;
+    }
+  });
+}
+
+/**
+ * Re-rendering: Current user-inputted values must be saved and restored on re-render.
+ */
+export default function usePersistValuesModEffect(adaptiveCard: AdaptiveCard) {
+  const prevAdaptiveCard = usePrevious(adaptiveCard);
+  const valuesMapRef = useRef<Map<CardObject, Set<string>>>(new Map());
+
+  prevAdaptiveCard === adaptiveCard || valuesMapRef.current.clear();
+
+  const modder = useMemo(
+    () => (adaptiveCard: AdaptiveCard) => {
+      const { current: valuesMap } = valuesMapRef;
+
+      adaptiveCard.getAllInputs().forEach(cardObject => {
+        valuesMap.has(cardObject) && setUserValues(cardObject.renderedElement, valuesMap.get(cardObject));
+      });
+
+      return () => {
+        valuesMapRef.current = adaptiveCard
+          .getAllInputs()
+          .reduce<Map<CardObject, Set<string>>>((valuesMap, cardObject) => {
+            const value = getUserValues(cardObject.renderedElement);
+
+            return typeof value !== 'undefined' ? valuesMap.set(cardObject, value) : valuesMap;
+          }, new Map());
+      };
+    },
+    [valuesMapRef]
+  );
+
+  return useAdaptiveCardModEffect(modder, adaptiveCard);
+}