@microsoft/omnichannel-chat-widget 1.8.7 → 2.0.0-main.5ebd4eb

package/lib/esm/common/utils.js

@@ -70,26 +70,66 @@ export const findAllFocusableElement = parent => {
 export const preventFocusToMoveOutOfElement = elementId => {
   const container = document.getElementById(elementId);
   if (!container) {
-    return;
+    return () => {/* no-op */};
   }
   const focusableElements = findAllFocusableElement(container);
   if (!focusableElements) {
-    return;
+    return () => {/* no-op */};
   }
   const firstFocusableElement = focusableElements[0];
   const lastFocusableElement = focusableElements[focusableElements.length - 1];
-  firstFocusableElement.onkeydown = e => {
-    if (e.shiftKey && e.key === KeyCodes.TAB) {
-      e.preventDefault();
-      lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
-    }
-  };
-  lastFocusableElement.onkeydown = e => {
-    if (!e.shiftKey && e.key === KeyCodes.TAB) {
-      e.preventDefault();
-      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+  const cleanups = [];
+  if (firstFocusableElement === lastFocusableElement) {
+    const handler = e => {
+      if (e.key === KeyCodes.TAB && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusableElement.focus();
+      } else if (e.key === KeyCodes.TAB && e.shiftKey) {
+        e.preventDefault();
+        firstFocusableElement.focus();
+      }
+    };
+    firstFocusableElement.addEventListener("keydown", handler);
+    cleanups.push(() => firstFocusableElement.removeEventListener("keydown", handler));
+  } else {
+    const firstHandler = e => {
+      if (e.shiftKey && e.key === KeyCodes.TAB) {
+        e.preventDefault();
+        lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
+      }
+    };
+    firstFocusableElement.addEventListener("keydown", firstHandler);
+    cleanups.push(() => firstFocusableElement.removeEventListener("keydown", firstHandler));
+    const lastHandler = e => {
+      if (!e.shiftKey && e.key === KeyCodes.TAB) {
+        e.preventDefault();
+        firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+      }
+    };
+    lastFocusableElement.addEventListener("keydown", lastHandler);
+    cleanups.push(() => lastFocusableElement.removeEventListener("keydown", lastHandler));
+  }
+  return () => cleanups.forEach(fn => fn());
+};
+export const setAriaHiddenForSiblings = (elementId, shouldHide, stateMap) => {
+  const element = document.getElementById(elementId);
+  if (!(element !== null && element !== void 0 && element.parentElement)) return;
+  Array.from(element.parentElement.children).forEach(sibling => {
+    if (sibling !== element) {
+      if (shouldHide) {
+        stateMap.set(sibling, sibling.getAttribute("aria-hidden"));
+        sibling.setAttribute("aria-hidden", "true");
+      } else if (stateMap.has(sibling)) {
+        const original = stateMap.get(sibling);
+        if (original === null) {
+          sibling.removeAttribute("aria-hidden");
+        } else {
+          sibling.setAttribute("aria-hidden", original);
+        }
+        stateMap.delete(sibling);
+      }
     }
-  };
+  });
 };
 export const setFocusOnSendBox = () => {
   const sendBoxSelector = "textarea[data-id=\"webchat-sendbox-input\"]";
@@ -99,6 +139,40 @@ export const setFocusOnElement = selector => {
   const element = getElementBySelector(selector);
   element === null || element === void 0 || element.focus();
 };
+const IMMEDIATE_ANNOUNCEMENT_REGION_ID = "oc-lcw-immediate-announcement";
+
+// Announces a message to screen readers via an aria-live="assertive" region
+// attached to document.body — outside the chat widget's DOM subtree — so the
+// screen reader does not have to traverse chat content to reach it.
+export const announceMessageImmediately = message => {
+  if (!message || typeof document === "undefined") {
+    return;
+  }
+  let region = document.getElementById(IMMEDIATE_ANNOUNCEMENT_REGION_ID);
+  if (!region) {
+    region = document.createElement("div");
+    region.id = IMMEDIATE_ANNOUNCEMENT_REGION_ID;
+    region.setAttribute("aria-live", "assertive");
+    region.setAttribute("role", "alert");
+    region.setAttribute("aria-atomic", "true");
+    region.style.position = "absolute";
+    region.style.width = "1px";
+    region.style.height = "1px";
+    region.style.overflow = "hidden";
+    region.style.clip = "rect(0 0 0 0)";
+    region.style.clipPath = "inset(50%)";
+    region.style.whiteSpace = "nowrap";
+    document.body.appendChild(region);
+  }
+  region.textContent = "";
+  // Re-set on the next tick so screen readers detect the change even when
+  // the same message is announced twice in a row.
+  setTimeout(() => {
+    if (region) {
+      region.textContent = message;
+    }
+  }, 50);
+};
 export const escapeHtml = inputString => {
   const entityMap = {
     "<": "&lt;",
@@ -435,7 +509,7 @@ export const setOcUserAgent = chatSDK => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
   if ((_chatSDK$OCClient = chatSDK.OCClient) !== null && _chatSDK$OCClient !== void 0 && _chatSDK$OCClient.ocUserAgent && !((_chatSDK$OCClient2 = chatSDK.OCClient) !== null && _chatSDK$OCClient2 !== void 0 && _chatSDK$OCClient2.ocUserAgent.join(" ").includes("omnichannel-chat-widget/"))) {
     try {
-      const version = require("../../../package.json").version; // eslint-disable-line @typescript-eslint/no-var-requires
+      const version = require("../../package.json").version; // eslint-disable-line @typescript-eslint/no-var-requires
       const userAgent = `omnichannel-chat-widget/${version}`;
       chatSDK.OCClient.ocUserAgent = [userAgent, ...chatSDK.OCClient.ocUserAgent];
     } catch (error) {

package/lib/esm/components/callingcontainerstateful/CallingContainerStateful.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useCallback, useEffect } from "react";
 import { CallingContainer } from "@microsoft/omnichannel-chat-components";
@@ -7,12 +13,16 @@ import useChatContextStore from "../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 export const CallingContainerStateful = props => {
   var _props$controlProps, _props$controlProps2, _props$controlProps3, _props$controlProps4, _props$controlProps5;
-  const [state, dispatch] = useChatContextStore();
-  const [facadeChatSDK] = useFacadeSDKStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const _useFacadeSDKStore = useFacadeSDKStore(),
+    _useFacadeSDKStore2 = _slicedToArray(_useFacadeSDKStore, 1),
+    facadeChatSDK = _useFacadeSDKStore2[0];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const {
-    voiceVideoCallingSdk
-  } = props;
+  const _ref = props,
+    voiceVideoCallingSdk = _ref.voiceVideoCallingSdk;
   let callId;
   const resetCallingStates = reset => {
     if (reset) {

package/lib/esm/components/chatbuttonstateful/ChatButtonStateful.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef, useState } from "react";
 import { createTimer, setFocusOnElement } from "../../common/utils";
@@ -25,18 +31,22 @@ export const ChatButtonStateful = props => {
   }, []);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [state, dispatch] = useChatContextStore();
-  const {
-    buttonProps,
-    outOfOfficeButtonProps,
-    startChat
-  } = props;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const buttonProps = props.buttonProps,
+    outOfOfficeButtonProps = props.outOfOfficeButtonProps,
+    startChat = props.startChat;
   //Setting OutOfOperatingHours Flag
   //Setting OutOfOperatingHours Flag - to string conversion to normalize the value (could be boolean from other states or string directly from config)
   // Initialize with the current state value to prevent visual flicker
-  const [outOfOperatingHours, setOutOfOperatingHours] = useState(() => {
-    return state.appStates.conversationState === ConversationState.Closed && state.appStates.outsideOperatingHours;
-  });
+  const _useState = useState(() => {
+      return state.appStates.conversationState === ConversationState.Closed && state.appStates.outsideOperatingHours;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    outOfOperatingHours = _useState2[0],
+    setOutOfOperatingHours = _useState2[1];
   const ref = useRef(() => {
     return;
   });

package/lib/esm/components/citationpanestateful/CitationDim.js

@@ -3,9 +3,8 @@ import ReactDOM from "react-dom";
 import { DimLayer } from "../dimlayer/DimLayer";
 const CONTAINER_SELECTOR = ".webchat__stacked-layout_container";
 export const CitationDim = _ref => {
-  let {
-    brightness = "0.2"
-  } = _ref;
+  let _ref$brightness = _ref.brightness,
+    brightness = _ref$brightness === void 0 ? "0.2" : _ref$brightness;
   const container = document.querySelector(CONTAINER_SELECTOR);
   if (!container) return null;
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {

package/lib/esm/components/citationpanestateful/CitationPaneStateful.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useState } from "react";
 import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setTabIndices } from "../../common/utils";
@@ -21,7 +27,10 @@ export const CitationPaneStateful = props => {
   let elements = [];
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [state, dispatch] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
 
   // Use props.id if provided, otherwise fall back to default
   const controlId = props.id || HtmlAttributeNames.ocwCitationPaneClassName;
@@ -30,12 +39,18 @@ export const CitationPaneStateful = props => {
   // stays within the widget and scrolls only vertically. We also track an
   // "isReady" flag so we don't render the pane contents until the style is
   // computed — this prevents a transient render that can appear as a flicker.
-  const [paneStyle, setPaneStyle] = useState(null);
-  const [isReady, setIsReady] = useState(false);
+  const _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    paneStyle = _useState2[0],
+    setPaneStyle = _useState2[1];
+  const _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isReady = _useState4[0],
+    setIsReady = _useState4[1];
 
   // Initial focus pattern (mirrors ConfirmationPaneStateful): focus first focusable element (will re-attempt after visibility becomes true)
   useEffect(() => {
-    preventFocusToMoveOutOfElement(controlId);
+    const cleanup = preventFocusToMoveOutOfElement(controlId);
     const focusableElements = findAllFocusableElement(`#${controlId}`);
     requestAnimationFrame(() => {
       if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
@@ -53,6 +68,13 @@ export const CitationPaneStateful = props => {
       Event: TelemetryEvent.UXCitationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: restore parent tab indices on unmount so focus
+      // can escape the widget even if the pane is dismissed by an
+      // external state change rather than a user button click.
+      setTabIndices(elements, initialTabIndexMap, true);
+      cleanup();
+    };
   }, []);
 
   // Retry focus once pane is actually visible (isReady) in case initial attempt occurred while wrapper was visibility:hidden

package/lib/esm/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
@@ -19,7 +25,10 @@ export const ConfirmationPaneStateful = props => {
   }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
-  const [state, dispatch] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
   const controlProps = {
     id: "oc-lcw-confirmation-pane",
@@ -73,7 +82,7 @@ export const ConfirmationPaneStateful = props => {
 
   // Move focus to the first button
   useEffect(() => {
-    preventFocusToMoveOutOfElement(controlProps.id);
+    const cleanup = preventFocusToMoveOutOfElement(controlProps.id);
     const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
     requestAnimationFrame(() => {
       if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
@@ -91,6 +100,17 @@ export const ConfirmationPaneStateful = props => {
       Event: TelemetryEvent.UXConfirmationPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: when the confirmation pane unmounts (page reload,
+      // parent state change, or any path that bypasses onConfirm /
+      // onCancel) the tab indices that were forced to -1 on sibling
+      // focusable elements must be restored, otherwise Tab order
+      // remains broken and focus can be trapped inside the widget.
+      // setTabIndices is a no-op when initialTabIndexMap is already
+      // empty (onConfirm / onCancel already restored).
+      setTabIndices(elements, initialTabIndexMap, true);
+      cleanup();
+    };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

package/lib/esm/components/dimlayer/DimLayer.js

@@ -1,8 +1,6 @@
 import React from "react";
 export const DimLayer = _ref => {
-  let {
-    brightness
-  } = _ref;
+  let brightness = _ref.brightness;
   const color = "rgba(0, 0, 0, " + brightness + ")";
   const defaultDimLayerStyles = {
     position: "absolute",

package/lib/esm/components/draggable/DraggableChatWidget.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useCallback, useEffect, useState } from "react";
 import DraggableEventReceiver from "./DraggableEventReceiver";
 import DraggableEventNames from "./DraggableEventNames";
@@ -5,20 +11,34 @@ import useChatContextStore from "../../hooks/useChatContextStore";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { isNullOrUndefined } from "../../common/utils";
 const DraggableChatWidget = props => {
-  const [state] = useChatContextStore();
-  const [initialPosition, setInitialPosition] = useState({
-    offsetLeft: 0,
-    offsetTop: 0
-  });
-  const [cachedPosition, setCachedPosition] = useState(undefined);
-  const [position, setPosition] = useState({
-    offsetLeft: 0,
-    offsetTop: 0
-  });
-  const [delta, setDelta] = useState({
-    left: 0,
-    top: 0
-  });
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
+  const _useState = useState({
+      offsetLeft: 0,
+      offsetTop: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialPosition = _useState2[0],
+    setInitialPosition = _useState2[1];
+  const _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cachedPosition = _useState4[0],
+    setCachedPosition = _useState4[1];
+  const _useState5 = useState({
+      offsetLeft: 0,
+      offsetTop: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  const _useState7 = useState({
+      left: 0,
+      top: 0
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    delta = _useState8[0],
+    setDelta = _useState8[1];
   const repositionElement = (draggableElement, offsetLeft, offsetTop) => {
     draggableElement.style.left = `${offsetLeft}px`;
     draggableElement.style.top = `${offsetTop}px`;

package/lib/esm/components/draggable/DraggableEventEmitter.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useCallback, useEffect, useState } from "react";
 import DraggableEventNames from "./DraggableEventNames";
 /**
@@ -7,7 +13,10 @@ import DraggableEventNames from "./DraggableEventNames";
  * @returns
  */
 const DraggableEventEmitter = props => {
-  const [initialized, setInitialized] = useState(false);
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialized = _useState2[0],
+    setInitialized = _useState2[1];
   const postMessage = useCallback(data => {
     const targetWindow = props.targetWindow ?? window;
     targetWindow.postMessage(data, "*");

package/lib/esm/components/draggable/DraggableEventReceiver.js

@@ -8,9 +8,7 @@ import React, { useEffect } from "react";
 const DraggableEventReceiver = props => {
   useEffect(() => {
     const listener = event => {
-      const {
-        data
-      } = event;
+      const data = event.data;
       if (data.channel && props.channel && data.channel === props.channel) {
         props.onEvent(data);
       }

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -1,6 +1,12 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useCallback, useEffect, useState } from "react";
-import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, formatTemplateString, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { announceMessageImmediately, createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, formatTemplateString, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
 import { DimLayer } from "../dimlayer/DimLayer";
 import { InputValidationPane } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -23,19 +29,34 @@ export const EmailTranscriptPaneStateful = props => {
   }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
-  const [state, dispatch] = useChatContextStore();
-  const [facadeChatSDK] = useFacadeSDKStore();
-  const [initialEmail, setInitialEmail] = useState("");
-  const closeEmailTranscriptPane = () => {
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const _useFacadeSDKStore = useFacadeSDKStore(),
+    _useFacadeSDKStore2 = _slicedToArray(_useFacadeSDKStore, 1),
+    facadeChatSDK = _useFacadeSDKStore2[0];
+  const _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialEmail = _useState2[0],
+    setInitialEmail = _useState2[1];
+  // restoreFocus=false is used on the submit path: the notification banner
+  // (success or error) takes focus via NotificationHandler.setFocusOnNotificationCloseButton,
+  // so an intermediate restore to the chat-widget shell would otherwise cause SRs to
+  // announce "Enter <widget>" in between the dialog and the banner.
+  const closeEmailTranscriptPane = function () {
+    let restoreFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     dispatch({
       type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
       payload: false
     });
-    const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
-    if (previousFocusedElementId) {
-      setFocusOnElement("#" + previousFocusedElementId);
-    } else {
-      setFocusOnSendBox();
+    if (restoreFocus) {
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+      if (previousFocusedElementId) {
+        setFocusOnElement("#" + previousFocusedElementId);
+      } else {
+        setFocusOnSendBox();
+      }
     }
     dispatch({
       type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
@@ -46,23 +67,31 @@ export const EmailTranscriptPaneStateful = props => {
   const onSend = useCallback(async email => {
     var _state$domainStates;
     const liveChatContext = state === null || state === void 0 || (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext;
-    closeEmailTranscriptPane();
+    closeEmailTranscriptPane(false);
     const chatTranscriptBody = {
       emailAddress: email,
       attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
     };
     try {
-      var _state$domainStates2;
+      var _state$domainStates2, _state$domainStates3;
       await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.emailLiveChatTranscript(chatTranscriptBody, {
         liveChatContext
       }));
-      NotificationHandler.notifySuccess(NotificationScenarios.EmailAddressSaved, (state === null || state === void 0 || (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 || (_state$domainStates2 = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS) ?? (defaultMiddlewareLocalizedTexts === null || defaultMiddlewareLocalizedTexts === void 0 ? void 0 : defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS));
+      const successMessage = (state === null || state === void 0 || (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 || (_state$domainStates2 = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS) ?? (defaultMiddlewareLocalizedTexts === null || defaultMiddlewareLocalizedTexts === void 0 ? void 0 : defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS);
+      // Announce from a live region at document.body level so the
+      // screen reader speaks the confirmation immediately, without
+      // traversing the chat transcript on the way to the banner.
+      // Prefix with the explicit state word so SR users hear the outcome
+      // (visual users already see a success icon on the banner).
+      const successSrPrefix = (state === null || state === void 0 || (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 || (_state$domainStates3 = _state$domainStates3.middlewareLocalizedTexts) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.MIDDLEWARE_SR_PREFIX_SUCCESS) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_SR_PREFIX_SUCCESS;
+      announceMessageImmediately(`${successSrPrefix}${successMessage}`);
+      NotificationHandler.notifySuccess(NotificationScenarios.EmailAddressSaved, successMessage);
       TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.EmailTranscriptSent,
         Description: "Transcript sent to email successfully."
       });
     } catch (ex) {
-      var _state$domainStates3;
+      var _state$domainStates4, _state$domainStates5;
       TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
         Event: TelemetryEvent.EmailTranscriptFailed,
         Description: "Email transcript failed.",
@@ -70,8 +99,11 @@ export const EmailTranscriptPaneStateful = props => {
           exception: ex
         }
       });
-      const message = formatTemplateString((state === null || state === void 0 || (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 || (_state$domainStates3 = _state$domainStates3.middlewareLocalizedTexts) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
-      NotificationHandler.notifyError(NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message);
+      const message = formatTemplateString((state === null || state === void 0 || (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 || (_state$domainStates4 = _state$domainStates4.middlewareLocalizedTexts) === null || _state$domainStates4 === void 0 ? void 0 : _state$domainStates4.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
+      const bannerMessage = (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message;
+      const errorSrPrefix = (state === null || state === void 0 || (_state$domainStates5 = state.domainStates) === null || _state$domainStates5 === void 0 || (_state$domainStates5 = _state$domainStates5.middlewareLocalizedTexts) === null || _state$domainStates5 === void 0 ? void 0 : _state$domainStates5.MIDDLEWARE_SR_PREFIX_ERROR) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_SR_PREFIX_ERROR;
+      announceMessageImmediately(`${errorSrPrefix}${bannerMessage}`);
+      NotificationHandler.notifyError(NotificationScenarios.EmailTranscriptError, bannerMessage);
     }
   }, [props.attachmentMessage, props.bannerMessageOnError, facadeChatSDK, state.domainStates.liveChatContext]);
   const controlProps = {
@@ -94,7 +126,7 @@ export const EmailTranscriptPaneStateful = props => {
 
   // Move focus to the first button
   useEffect(() => {
-    preventFocusToMoveOutOfElement(controlProps.id);
+    const cleanup = preventFocusToMoveOutOfElement(controlProps.id);
     const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
     if (focusableElements) {
       focusableElements[0].focus();
@@ -109,6 +141,11 @@ export const EmailTranscriptPaneStateful = props => {
       Event: TelemetryEvent.UXEmailTranscriptPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
+    return () => {
+      // internal tracking: restore parent tab indices on unmount.
+      setTabIndices(elements, initialTabIndexMap, true);
+      cleanup();
+    };
   }, [initialEmail]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

package/lib/esm/components/errorboundary/ErrorBoundary.js

@@ -14,9 +14,7 @@ import React, { Component } from "react";
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 const RenderChildrenFunction = _ref => {
-  let {
-    children
-  } = _ref;
+  let children = _ref.children;
   return typeof children === "function" ? children() : children;
 };
 let ErrorBoundary = /*#__PURE__*/function (_Component) {
@@ -33,9 +31,7 @@ let ErrorBoundary = /*#__PURE__*/function (_Component) {
   return _createClass(ErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(error) {
-      const {
-        onError
-      } = this.props;
+      const onError = this.props.onError;
       this.setState({
         hasError: true
       });
@@ -46,12 +42,8 @@ let ErrorBoundary = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      const {
-        children
-      } = this.props;
-      const {
-        hasError
-      } = this.state;
+      const children = this.props.children;
+      const hasError = this.state.hasError;
       return !hasError && /*#__PURE__*/React.createElement(RenderChildrenFunction, null, children);
     }
   }]);