@microsoft/omnichannel-chat-widget 1.8.3-main.ec1328d → 1.8.4-main.4478bbf

package/lib/esm/common/utils/SecureEventBus.js

@@ -0,0 +1,328 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { TelemetryHelper } from "../telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../telemetry/TelemetryConstants";
+
+/**
+ * SecureEventBus - A private, authenticated event system for internal chat widget communication
+ * 
+ * This replaces the vulnerable global window event system to prevent external scripts
+ * from injecting malicious events into the chat widget.
+ * 
+ * @example
+ * ```typescript
+ * const eventBus = SecureEventBus.getInstance();
+ * const token = eventBus.getAuthToken();
+ * 
+ * // Subscribe to an event
+ * const unsubscribe = eventBus.subscribe('userMessage', (payload) => {
+ *   console.log('Message received:', payload);
+ * });
+ * 
+ * // Dispatch an event
+ * eventBus.dispatch('userMessage', { text: 'Hello' }, token);
+ * 
+ * // Unsubscribe
+ * unsubscribe();
+ * ```
+ */
+
+/**
+ * Interface representing an event listener with callback and unique identifier
+ */
+/**
+ * SecureEventBus class implementing the singleton pattern for secure event communication.
+ * Provides authentication-based event dispatching to prevent unauthorized external access.
+ */
+let SecureEventBus = /*#__PURE__*/function () {
+  /**
+   * Private constructor to enforce singleton pattern.
+   * Generates a unique authentication token for this session.
+   */
+  function SecureEventBus() {
+    _classCallCheck(this, SecureEventBus);
+    _defineProperty(this, "listeners", new Map());
+    _defineProperty(this, "authToken", void 0);
+    _defineProperty(this, "eventCounter", 0);
+    // Generate a secure, unique token for this session
+    this.authToken = this.generateAuthToken();
+  }
+
+  /**
+   * Get the singleton instance of SecureEventBus.
+   * Creates a new instance if one doesn't exist.
+   * 
+   * @returns The singleton instance of SecureEventBus
+   * 
+   * @example
+   * ```typescript
+   * const eventBus = SecureEventBus.getInstance();
+   * ```
+   */
+  _createClass(SecureEventBus, [{
+    key: "generateAuthToken",
+    value:
+    /**
+     * Generate a cryptographically secure authentication token.
+     * Uses crypto.getRandomValues when available, falls back to Math.random.
+     * 
+     * @private
+     * @returns A 64-character hexadecimal string representing the authentication token
+     */
+    function generateAuthToken() {
+      const array = new Uint8Array(32);
+      if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+        crypto.getRandomValues(array);
+      } else {
+        // Fallback for environments without crypto.getRandomValues
+        for (let i = 0; i < array.length; i++) {
+          array[i] = Math.floor(Math.random() * 256);
+        }
+      }
+      return Array.from(array, byte => byte.toString(16).padStart(2, "0")).join("");
+    }
+
+    /**
+     * Get the authentication token for this SecureEventBus instance.
+     * This token is required for dispatching events and should only be used internally.
+     * 
+     * @returns The authentication token string
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * const token = eventBus.getAuthToken();
+     * eventBus.dispatch('myEvent', { data: 'value' }, token);
+     * ```
+     */
+  }, {
+    key: "getAuthToken",
+    value: function getAuthToken() {
+      return this.authToken;
+    }
+
+    /**
+     * Dispatch an event with authentication to all registered listeners.
+     * Verifies the authentication token before dispatching to prevent unauthorized access.
+     * 
+     * @param eventName - The name of the event to dispatch
+     * @param payload - The data to send with the event (optional)
+     * @param token - Authentication token (must match the internal token)
+     * @returns true if event was successfully dispatched, false if unauthorized or error occurred
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * const token = eventBus.getAuthToken();
+     * 
+     * // Dispatch with payload
+     * const success = eventBus.dispatch('userAction', { action: 'click', target: 'button' }, token);
+     * 
+     * // Dispatch without payload
+     * eventBus.dispatch('windowClosed', undefined, token);
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {
+    key: "dispatch",
+    value: function dispatch(eventName, payload, token) {
+      // Verify authentication token
+      if (token !== this.authToken) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.SecureEventBusUnauthorizedDispatch,
+          Description: `Unauthorized event dispatch attempt blocked: ${eventName}`,
+          ExceptionDetails: {
+            eventName,
+            providedToken: token ? "provided" : "missing",
+            expectedToken: "secured"
+          }
+        });
+        return false;
+      }
+      const listeners = this.listeners.get(eventName);
+      if (!listeners || listeners.length === 0) {
+        return true; // No listeners, but not an error
+      }
+
+      // Dispatch to all registered listeners
+      try {
+        listeners.forEach(listener => {
+          try {
+            listener.callback(payload);
+          } catch (error) {
+            TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+              Event: TelemetryEvent.SecureEventBusListenerError,
+              Description: `Error in event listener for event: ${eventName}`,
+              ExceptionDetails: error
+            });
+          }
+        });
+        return true;
+      } catch (error) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.SecureEventBusDispatchError,
+          Description: `Error dispatching event: ${eventName}`,
+          ExceptionDetails: error
+        });
+        return false;
+      }
+    }
+
+    /**
+     * Subscribe to an event with a callback function.
+     * The callback will be executed whenever the specified event is dispatched.
+     * 
+     * @param eventName - The name of the event to listen for
+     * @param callback - The function to execute when the event is fired
+     * @returns A function that can be called to unsubscribe from the event
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * 
+     * // Subscribe to an event
+     * const unsubscribe = eventBus.subscribe('chatMessage', (message) => {
+     *   console.log('New message:', message.text);
+     *   console.log('From user:', message.userId);
+     * });
+     * 
+     * // Later, unsubscribe
+     * unsubscribe();
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {
+    key: "subscribe",
+    value: function subscribe(eventName, callback) {
+      const listenerId = `listener_${++this.eventCounter}`;
+      if (!this.listeners.has(eventName)) {
+        this.listeners.set(eventName, []);
+      }
+      const listeners = this.listeners.get(eventName);
+      if (!listeners) {
+        throw new Error(`Listeners for event "${eventName}" not found.`);
+      }
+      const listener = {
+        callback,
+        id: listenerId
+      };
+      listeners.push(listener);
+
+      // Return unsubscribe function
+      return () => {
+        const currentListeners = this.listeners.get(eventName);
+        if (currentListeners) {
+          const index = currentListeners.findIndex(l => l.id === listenerId);
+          if (index !== -1) {
+            currentListeners.splice(index, 1);
+          }
+
+          // Clean up empty listener arrays
+          if (currentListeners.length === 0) {
+            this.listeners.delete(eventName);
+          }
+        }
+      };
+    }
+
+    /**
+     * Remove all listeners for a specific event.
+     * This completely removes the event from the internal listeners map.
+     * 
+     * @param eventName - The name of the event to remove all listeners for
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * 
+     * // Remove all listeners for 'chatClosed' event
+     * eventBus.removeAllListeners('chatClosed');
+     * ```
+     */
+  }, {
+    key: "removeAllListeners",
+    value: function removeAllListeners(eventName) {
+      this.listeners.delete(eventName);
+    }
+
+    /**
+     * Clear all listeners for all events.
+     * This resets the entire event bus to its initial state.
+     * Useful for cleanup during application shutdown or testing.
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * 
+     * // Clear all event listeners
+     * eventBus.clear();
+     * ```
+     */
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.listeners.clear();
+    }
+
+    /**
+     * Get the number of listeners for a specific event.
+     * Useful for debugging and monitoring purposes.
+     * 
+     * @param eventName - The name of the event to count listeners for
+     * @returns The number of listeners registered for the event
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * 
+     * // Check how many listeners are registered for 'userAction'
+     * const count = eventBus.getListenerCount('userAction');
+     * console.log(`${count} listeners registered for userAction`);
+     * ```
+     */
+  }, {
+    key: "getListenerCount",
+    value: function getListenerCount(eventName) {
+      var _this$listeners$get;
+      return ((_this$listeners$get = this.listeners.get(eventName)) === null || _this$listeners$get === void 0 ? void 0 : _this$listeners$get.length) || 0;
+    }
+
+    /**
+     * Get all registered event names.
+     * Returns an array of event names that currently have listeners.
+     * Useful for debugging and monitoring purposes.
+     * 
+     * @returns An array of event names that have registered listeners
+     * 
+     * @example
+     * ```typescript
+     * const eventBus = SecureEventBus.getInstance();
+     * 
+     * // Get all registered events
+     * const events = eventBus.getRegisteredEvents();
+     * console.log('Active events:', events);
+     * // Output: ['userAction', 'chatMessage', 'windowResize']
+     * ```
+     */
+  }, {
+    key: "getRegisteredEvents",
+    value: function getRegisteredEvents() {
+      return Array.from(this.listeners.keys());
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance() {
+      if (!SecureEventBus.instance) {
+        SecureEventBus.instance = new SecureEventBus();
+      }
+      return SecureEventBus.instance;
+    }
+  }]);
+  return SecureEventBus;
+}();
+_defineProperty(SecureEventBus, "instance", null);
+export default SecureEventBus;

package/lib/esm/common/utils/dispatchCustomEvent.js

@@ -0,0 +1,18 @@
+import SecureEventBus from "./SecureEventBus";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const dispatchCustomEvent = (name, payload) => {
+  try {
+    const eventBus = SecureEventBus.getInstance();
+    const authToken = eventBus.getAuthToken();
+
+    // Dispatch through the secure event bus instead of global window
+    const success = eventBus.dispatch(name, payload, authToken);
+    if (!success) {
+      console.error("Failed to dispatch secure event:", name);
+    }
+  } catch (error) {
+    console.error("Error dispatching secure custom event:", name, payload, error);
+  }
+};
+export default dispatchCustomEvent;

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

@@ -1,4 +1,4 @@
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef, useState } from "react";
 import { createTimer, setFocusOnElement } from "../../common/utils";
 import { ChatButton } from "@microsoft/omnichannel-chat-components";
@@ -17,7 +17,10 @@ export const ChatButtonStateful = props => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXLCWChatButtonLoadingStart,
-      Description: "Chat button loading started"
+      Description: "Chat button loading started",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
 
@@ -40,7 +43,10 @@ export const ChatButtonStateful = props => {
   ref.current = async () => {
     TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.LCWChatButtonClicked,
-      Description: "Chat button click action started"
+      Description: "Chat button click action started",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
     if (state.appStates.isMinimized) {
       dispatch({
@@ -60,7 +66,10 @@ export const ChatButtonStateful = props => {
     }
     TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.LCWChatButtonActionCompleted,
-      Description: "Chat button action completed"
+      Description: "Chat button action completed",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   };
   const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
@@ -114,7 +123,10 @@ export const ChatButtonStateful = props => {
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXLCWChatButtonLoadingCompleted,
       Description: "Chat button loading completed",
-      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
   useEffect(() => {

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

@@ -0,0 +1,20 @@
+import React from "react";
+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;
+  const container = document.querySelector(CONTAINER_SELECTOR);
+  if (!container) return null;
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0
+    }
+  }, /*#__PURE__*/React.createElement(DimLayer, {
+    brightness: brightness
+  })), container);
+};
+export default CitationDim;

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

@@ -0,0 +1,188 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useState } from "react";
+import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setTabIndices } from "../../common/utils";
+import CitationDim from "./CitationDim";
+import { CitationPane } from "@microsoft/omnichannel-chat-components";
+import { HtmlAttributeNames } from "../../common/Constants";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { defaultCitationPaneStyles } from "./common/defaultProps/defaultCitationPaneProps";
+import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
+export const CitationPaneStateful = props => {
+  var _props$styleProps3;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXCitationPaneStart
+    });
+  }, []);
+  const initialTabIndexMap = new Map();
+  let elements = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [state, dispatch] = useChatContextStore();
+
+  // Use props.id if provided, otherwise fall back to default
+  const controlId = props.id || HtmlAttributeNames.ocwCitationPaneClassName;
+
+  // Pane style computed to match the webchat widget container bounds so the pane
+  // 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);
+
+  // Move focus to the container
+  useEffect(() => {
+    preventFocusToMoveOutOfElement(controlId);
+    const focusableElements = findAllFocusableElement(`#${controlId}`);
+    requestAnimationFrame(() => {
+      if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
+        focusableElements[0].focus({
+          preventScroll: true
+        });
+      }
+    });
+    elements = findParentFocusableElementsWithoutChildContainer(controlId);
+    setTabIndices(elements, initialTabIndexMap, false);
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.CitationPaneLoaded
+    });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXCitationPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
+
+  // Compute the widget bounds and set pane style accordingly (95% of widget size
+  // and centered inside the widget). If the widget container can't be found,
+  // fall back to the default pane styles from defaultCitationPaneProps.
+  useEffect(() => {
+    const compute = () => {
+      var _props$styleProps2;
+      try {
+        const container = document.querySelector(".webchat__stacked-layout_container");
+        if (container) {
+          var _props$styleProps;
+          const rect = container.getBoundingClientRect();
+          const widthPx = Math.round(rect.width * 0.95);
+          const heightPx = Math.round(rect.height * 0.95);
+          const leftPx = Math.round(rect.left + (rect.width - widthPx) / 2);
+          const topPx = Math.round(rect.top + (rect.height - heightPx) / 2);
+          // Clone defaults and remove transform so explicit left/top pixel
+          // coordinates are respected and the pane stays within the
+          // widget bounds.
+          const base = Object.assign({}, defaultCitationPaneStyles.pane);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          if (base && base.transform) {
+            // remove centering transform when we compute exact pixel coords
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            delete base.transform;
+          }
+
+          // Merge user styles first, then computed positioning to ensure proper positioning
+          const computedStyle = {
+            left: `${leftPx}px`,
+            top: `${topPx}px`,
+            width: `${widthPx}px`,
+            height: `${heightPx}px`
+          };
+
+          // Apply user styles first, then override with computed positioning
+          const generalProps = (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps;
+          const userStyles = generalProps && typeof generalProps === "object" ? Object.assign({}, generalProps) : {};
+          // Remove positioning properties from user styles that would interfere
+          delete userStyles.position;
+          delete userStyles.left;
+          delete userStyles.top;
+          delete userStyles.width;
+          delete userStyles.height;
+          setPaneStyle(Object.assign({}, base, userStyles, computedStyle));
+          // Make the pane visible after the next paint to avoid layout
+          // flashes on initial mount.
+          requestAnimationFrame(() => setIsReady(true));
+          return;
+        }
+      } catch (e) {
+        // ignore
+      }
+
+      // fallback - merge defaults with user-provided styles but preserve positioning
+      const generalProps = (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.generalStyleProps;
+      const userStyles = generalProps && typeof generalProps === "object" ? Object.assign({}, generalProps) : {};
+      // Remove positioning properties from user styles for fallback
+      delete userStyles.position;
+      delete userStyles.left;
+      delete userStyles.top;
+      delete userStyles.width;
+      delete userStyles.height;
+      const fallbackStyle = Object.assign({}, defaultCitationPaneStyles.pane, userStyles);
+      setPaneStyle(fallbackStyle);
+      requestAnimationFrame(() => setIsReady(true));
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, [(_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.generalStyleProps]);
+  const handleClose = () => {
+    if (props.onClose) props.onClose();
+    dispatch({
+      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+      payload: null
+    });
+    setTabIndices(elements, initialTabIndexMap, true);
+  };
+
+  // Merge a safe style object for the container and cast to CSSProperties to satisfy TS
+  const baseStyle = Object.assign({
+    position: "relative"
+  }, paneStyle ?? {
+    position: "fixed"
+  });
+
+  // If paneStyle hasn't been computed yet, render the DimLayer so clicks
+  // still close overlays but hide the pane itself to avoid flashes.
+  const hiddenStyle = {
+    visibility: isReady ? "visible" : "hidden",
+    pointerEvents: isReady ? "auto" : "none"
+  };
+
+  // Default wrapper styles - these control the positioning container
+  const defaultWrapperStyles = {
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 10001
+  };
+
+  // Wrapper styles for the positioning container
+  const wrapperStyles = Object.assign({}, baseStyle, hiddenStyle, defaultWrapperStyles);
+
+  // Merge the computed positioning styles with user's generalStyleProps for the CitationPane
+  const mergedStyleProps = props.styleProps ? {
+    ...props.styleProps,
+    generalStyleProps: Object.assign({}, props.styleProps.generalStyleProps)
+  } : undefined;
+  const controlProps = {
+    id: controlId,
+    dir: state.domainStates.globalDir,
+    titleText: props.title,
+    contentHtml: props.contentHtml,
+    brightnessValueOnDim: "0.2",
+    // Default brightness
+    onClose: handleClose,
+    ...(props === null || props === void 0 ? void 0 : props.controlProps) // User props override defaults
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CitationDim, {
+    brightness: controlProps.brightnessValueOnDim
+  }), /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyles
+  }, /*#__PURE__*/React.createElement(CitationPane, {
+    componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
+    controlProps: controlProps,
+    styleProps: mergedStyleProps
+  })));
+};
+export default CitationPaneStateful;

package/lib/esm/components/citationpanestateful/common/defaultProps/defaultCitationPaneProps.js

@@ -0,0 +1,61 @@
+export const defaultCitationPaneStyles = {
+  pane: {
+    position: "fixed",
+    left: "50%",
+    top: "18%",
+    transform: "translateX(-50%)",
+    background: "#fff",
+    width: "85%",
+    height: "85%",
+    overflowY: "auto",
+    overflowX: "hidden",
+    padding: 16,
+    borderRadius: 6,
+    zIndex: 10001,
+    boxSizing: "border-box"
+  }
+};
+export const defaultCitationContentCSS = controlId => `
+    #${controlId} .citation-content {
+        flex: 1;
+        min-height: 0; /* allow flex child to scroll */
+        overflow-y: auto;
+        overflow-x: auto;
+        margin-bottom: 12px;
+        white-space: normal; /* wrap normal text */
+        word-break: break-word;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    #${controlId} .citation-content pre,
+    #${controlId} .citation-content code {
+        white-space: pre; /* preserve formatting */
+    }
+
+    #${controlId} .citation-content table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 12px;
+        table-layout: auto;
+        overflow-x: auto;
+        display: block;
+    }
+
+    #${controlId} .citation-content table th,
+    #${controlId} .citation-content table td {
+        padding: 8px 12px;
+        border: 1px solid rgba(0,0,0,0.08);
+        text-align: left;
+        vertical-align: top;
+        word-break: break-word;
+    }
+
+    #${controlId} .citation-content img {
+        max-width: 100%;
+        height: auto;
+    }
+`;
+export default {
+  defaultCitationPaneStyles,
+  defaultCitationContentCSS
+};

package/lib/esm/components/confirmationpanestateful/interfaces/IConfirmationPaneLocalizedTexts.js

@@ -0,0 +1 @@
+export {};