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

package/lib/esm/components/loadingpanestateful/LoadingPaneStateful.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 } from "../../common/utils";
@@ -18,11 +24,11 @@ export const LoadingPaneStateful = props => {
       Event: TelemetryEvent.UXLoadingPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
-  const {
-    loadingPaneProps,
-    startChatErrorPaneProps
-  } = props;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
+  const loadingPaneProps = props.loadingPaneProps,
+    startChatErrorPaneProps = props.startChatErrorPaneProps;
   const generalLoadingPaneStyleProps = Object.assign({}, defaultGeneralLoadingPaneStyleProps, loadingPaneProps === null || loadingPaneProps === void 0 || (_loadingPaneProps$sty = loadingPaneProps.styleProps) === null || _loadingPaneProps$sty === void 0 ? void 0 : _loadingPaneProps$sty.generalStyleProps);
   const loadingPaneStyleProps = {
     ...(loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.styleProps),
@@ -45,10 +51,9 @@ export const LoadingPaneStateful = props => {
     hideSpinner: true,
     hideSpinnerText: true
   };
-  const {
-    height,
-    width
-  } = useWindowDimensions();
+  const _useWindowDimensions = useWindowDimensions(),
+    height = _useWindowDimensions.height,
+    width = _useWindowDimensions.width;
 
   // Move focus to the first button
   useEffect(() => {

package/lib/esm/components/notificationpanestateful/NotificationPaneStateful.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 { ConfirmationState, NotificationPaneConstants } from "../../common/Constants";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef } from "react";
@@ -21,14 +27,17 @@ export const NotificationPaneStateful = props => {
       Event: TelemetryEvent.UXNotificationPaneStart
     });
   }, []);
-  const {
-    notificationPaneProps,
-    notificationScenarioType,
-    endChat
-  } = props;
-  const [state, dispatch] = useChatContextStore();
+  const notificationPaneProps = props.notificationPaneProps,
+    notificationScenarioType = props.notificationScenarioType,
+    endChat = props.endChat;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [adapter] = useChatAdapterStore();
+  const _useChatAdapterStore = useChatAdapterStore(),
+    _useChatAdapterStore2 = _slicedToArray(_useChatAdapterStore, 1),
+    adapter = _useChatAdapterStore2[0];
   const localConfirmationPaneState = useRef(state === null || state === void 0 || (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.confirmationState);
   const onCloseChatClick = async () => {
     TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -51,9 +60,7 @@ export const NotificationPaneStateful = props => {
     var _state$domainStates2;
     localConfirmationPaneState.current = state === null || state === void 0 || (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
   }, [state === null || state === void 0 || (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.confirmationState]);
-  const {
-    useDismissNotification
-  } = hooks;
+  const useDismissNotification = hooks.useDismissNotification;
   const dismissNotification = useDismissNotification();
   const handleDismissNotification = useCallback(() => {
     TelemetryHelper.logActionEvent(LogLevel.INFO, {

package/lib/esm/components/ooohpanestateful/OOOHPaneStateful.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 } from "../../common/utils";
@@ -17,7 +23,9 @@ export const OutOfOfficeHoursPaneStateful = props => {
       Description: "Out of office hours pane loading started."
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
     ...props.styleProps,
@@ -49,10 +57,9 @@ export const OutOfOfficeHoursPaneStateful = props => {
 
   // Enhanced titleText sanitization
   if (controlProps !== null && controlProps !== void 0 && controlProps.titleText) {
-    const {
-      cleanText,
-      isXSSDetected
-    } = detectAndCleanXSS(controlProps.titleText);
+    const _detectAndCleanXSS = detectAndCleanXSS(controlProps.titleText),
+      cleanText = _detectAndCleanXSS.cleanText,
+      isXSSDetected = _detectAndCleanXSS.isXSSDetected;
     if (!isXSSDetected) {
       // replace with the sanitized text
       controlProps.titleText = cleanText;

package/lib/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -1,5 +1,11 @@
+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 React, { useEffect, useState } from "react";
 import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
@@ -7,14 +13,28 @@ import { defaultGeneralPostChatLoadingPaneStyleProps } from "./common/defaultgen
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
 export const PostChatLoadingPaneStateful = props => {
-  var _props$styleProps;
+  var _props$controlProps, _props$styleProps;
+  const defaultSubtitleText = "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.";
+  const subtitleText = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.subtitleText) ?? defaultSubtitleText;
+  const _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    announcedSubtitleText = _useState2[0],
+    setAnnouncedSubtitleText = _useState2[1];
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.UXPostChatLoadingPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setAnnouncedSubtitleText(subtitleText);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [subtitleText]);
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
     ...props.styleProps,
@@ -27,8 +47,11 @@ export const PostChatLoadingPaneStateful = props => {
     hideTitle: true,
     hideSpinner: true,
     hideSpinnerText: true,
-    subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.",
-    ...props.controlProps
+    ...props.controlProps,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    subtitleText: announcedSubtitleText
   };
 
   // Move focus to the first button

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.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 } from "react";
 import { ParticipantType } from "../../common/Constants";
@@ -33,7 +39,9 @@ export const PostChatSurveyPaneStateful = props => {
       }
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : "contents"
   });
@@ -58,6 +66,7 @@ export const PostChatSurveyPaneStateful = props => {
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
+    title: "Post-chat survey",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
   };
@@ -96,9 +105,7 @@ export const PostChatSurveyPaneStateful = props => {
     //Customer Voice Telemetry Events
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener("message", message => {
-      const {
-        data
-      } = message;
+      const data = message.data;
       if (!data) return;
       if (data === CustomerVoiceEvents.ResponsePageLoaded) {
         TelemetryHelper.logActionEvent(LogLevel.INFO, {

package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.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 { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -11,6 +17,34 @@ import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyle
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
+const getFocusedElementAnnouncement = element => {
+  var _element$textContent;
+  const ariaLabel = element.getAttribute(HtmlAttributeNames.ariaLabel);
+  if (ariaLabel) {
+    return ariaLabel.trim();
+  }
+  const ariaLabelledBy = element.getAttribute(HtmlAttributeNames.ariaLabelledby);
+  if (ariaLabelledBy) {
+    const labelledByText = ariaLabelledBy.split(/\s+/).map(id => {
+      var _document$getElementB;
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || (_document$getElementB = _document$getElementB.textContent) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.trim();
+    }).filter(Boolean).join(" ");
+    if (labelledByText) {
+      return labelledByText;
+    }
+  }
+  if (element.id) {
+    const label = Array.from(document.querySelectorAll("label")).find(candidate => candidate.htmlFor === element.id || candidate.getAttribute("for") === element.id);
+    if (label !== null && label !== void 0 && label.textContent) {
+      return label.textContent.trim();
+    }
+  }
+  const parentLabel = element.closest("label");
+  if (parentLabel !== null && parentLabel !== void 0 && parentLabel.textContent) {
+    return parentLabel.textContent.trim();
+  }
+  return ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) ?? "";
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
@@ -27,12 +61,18 @@ export const PreChatSurveyPaneStateful = props => {
   }, []);
 
   // Set MarkDown global variable to be used for prechat adaptive cards
-  window["markdownit"] = MarkdownIt;
-  const [state, dispatch] = useChatContextStore();
-  const {
-    surveyProps,
-    initStartChat
-  } = props;
+  window.markdownit = MarkdownIt;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const surveyProps = props.surveyProps,
+    initStartChat = props.initStartChat;
+  const _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    preChatFocusAnnouncement = _useState2[0],
+    setPreChatFocusAnnouncement = _useState2[1];
+  const liveRegionUpdateTimeout = useRef();
   const generalStyleProps = Object.assign({}, defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 || (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
@@ -119,6 +159,16 @@ export const PreChatSurveyPaneStateful = props => {
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
+  const announceFocusedElement = event => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+    const announcement = getFocusedElementAnnouncement(event.target);
+    setPreChatFocusAnnouncement("");
+    liveRegionUpdateTimeout.current = window.setTimeout(() => {
+      setPreChatFocusAnnouncement(announcement);
+    }, 0);
+  };
   useEffect(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(HtmlAttributeNames.adaptiveCardClassName);
@@ -166,9 +216,53 @@ export const PreChatSurveyPaneStateful = props => {
       }
     }
   }, [state.appStates.isMinimized]);
-  return /*#__PURE__*/React.createElement(PreChatSurveyPane, {
-    controlProps: controlProps,
-    styleProps: styleProps
-  });
+  useEffect(() => () => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+  }, []);
+  return (
+    /*#__PURE__*/
+    // Bug 6525143 / Bug 6423684: the LiveChatWidget container is a centered
+    // flex column (HeaderStateful first, this pane second) with
+    // justifyContent: center and clipped overflow. Sizing this focus-capture
+    // wrapper to height: 100% makes it 100% of the ENTIRE container rather than
+    // the space remaining below the header, so header + pane overflow the
+    // container and the centered column splits the overflow top & bottom -
+    // clipping the header's top edge. Instead, fill only the remaining space
+    // with flex (flex: 1 1 auto + minHeight: 0) and lay out as a column so the
+    // header stays fully visible while the inner pane (a flex child that grows
+    // via flexGrow/flexBasis - see defaultGeneralPreChatSurveyPaneStyleProps)
+    // fills the leftover area and scrolls, instead of collapsing to its
+    // intrinsic content size.
+    React.createElement("div", {
+      onFocusCapture: announceFocusedElement,
+      style: {
+        width: "100%",
+        flex: "1 1 auto",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        margin: "-1px",
+        padding: 0,
+        border: 0,
+        clip: "rect(0, 0, 0, 0)",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      }
+    }, preChatFocusAnnouncement), /*#__PURE__*/React.createElement(PreChatSurveyPane, {
+      controlProps: controlProps,
+      styleProps: styleProps
+    }))
+  );
 };
 export default PreChatSurveyPaneStateful;

package/lib/esm/components/prechatsurveypanestateful/common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps.js

@@ -5,6 +5,17 @@ export const defaultGeneralPreChatSurveyPaneStyleProps = {
   backgroundColor: "#FFFFFF",
   borderColor: "#F1F1F1",
   overflowY: "auto",
-  height: "inherit",
+  // Bug 6525143 / Bug 6423684: the focus-capture wrapper is a flex column sized to
+  // the space remaining below the header (flex: 1 1 auto). Fill that space via flex
+  // (flexGrow: 1 / flexBasis: 0 / minHeight: 0) instead of height: 100%, which
+  // resolved against the whole centered #oc-lcw container and pushed the header out
+  // (the clip). minHeight: 0 keeps the pane shrinkable so its overflowY scroll
+  // engages for tall surveys rather than growing the column and clipping the header.
+  // Note: the shared PreChatSurveyPane default (chat-components) still merges
+  // height: "inherit" underneath these props; under this flex parent that resolves
+  // to auto and is overridden by the flex main-size, so the pane still fills via flex.
+  flexGrow: 1,
+  flexBasis: 0,
+  minHeight: 0,
   width: "inherit"
 };

package/lib/esm/components/proactivechatpanestateful/ProactiveChatPaneStateful.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 { BroadcastEvent, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useState } from "react";
 import { createTimer } from "../../common/utils";
@@ -21,13 +27,17 @@ export const ProactiveChatPaneStateful = props => {
       Description: "Proactive chat pane loading started."
     });
   }, []);
-  const [state, dispatch] = useChatContextStore();
-  const {
-    proactiveChatProps,
-    startChat
-  } = props;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const proactiveChatProps = props.proactiveChatProps,
+    startChat = props.startChat;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [timeoutRemoved, setTimeoutRemoved] = useState(false);
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeoutRemoved = _useState2[0],
+    setTimeoutRemoved = _useState2[1];
   const handleProactiveChatInviteTimeout = () => {
     if (!timeoutRemoved) {
       setTimeoutRemoved(true);

package/lib/esm/components/reconnectchatpanestateful/ReconnectChatPaneStateful.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, setFocusOnElement } from "../../common/utils";
@@ -16,15 +22,18 @@ export const ReconnectChatPaneStateful = props => {
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);
-  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
   //const chatSDK: any = useChatSDKStore();
-  const [facadeChatSDK] = useFacadeChatSDKStore();
+  const _useFacadeChatSDKStor = useFacadeChatSDKStore(),
+    _useFacadeChatSDKStor2 = _slicedToArray(_useFacadeChatSDKStor, 1),
+    facadeChatSDK = _useFacadeChatSDKStor2[0];
   const chatSDK = facadeChatSDK.getChatSDK();
-  const {
-    reconnectChatProps,
-    initStartChat
-  } = props;
+  const reconnectChatProps = props.reconnectChatProps,
+    initStartChat = props.initStartChat;
   const startChat = async continueChat => {
     dispatch({
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,

package/lib/esm/components/startchaterrorpanestateful/StartChatErrorPaneStateful.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 } from "../../common/utils";
@@ -20,7 +26,9 @@ export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
       Event: TelemetryEvent.UXStartChatErrorPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultStartChatErrorPaneGeneralStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.generalStyleProps);
   const titleStyleProps = Object.assign({}, defaultStartChatErrorPaneTitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr2 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.titleStyleProps);
   const subtitleStyleProps = Object.assign({}, defaultStartChatErrorPaneSubtitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr3 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr3 === void 0 ? void 0 : _startChatErrorPanePr3.subtitleStyleProps);