@microsoft/omnichannel-chat-components 1.1.13 → 1.1.15

package/lib/esm/components/citationpane/CitationPane.js

@@ -0,0 +1,124 @@
+import { DefaultButton, IconButton, Label, Stack } from "@fluentui/react";
+import { ElementType, EventNames } from "../../common/Constants";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../services/BroadcastService";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { defaultCitationPaneCloseButtonFocusedStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles";
+import { defaultCitationPaneCloseButtonHoveredStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles";
+import { defaultCitationPaneCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "./common/defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneControlProps } from "./common/defaultProps/defaultCitationPaneControlProps";
+import { defaultCitationPaneGeneralStyles } from "./common/defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "./common/defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonFocusedStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles";
+import { defaultCitationPaneTopCloseButtonHoveredStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+
+function CitationPane(props) {
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps4, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$controlProps5, _props$styleProps12, _props$styleProps12$c, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$componentOverr2, _props$styleProps14, _props$styleProps14$c, _props$controlProps9, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps16, _props$styleProps16$c;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultCitationPaneControlProps.id;
+  const handleClose = useCallback(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+    }
+  }, [props.controlProps, elementId]);
+  const handleTopClose = useCallback(() => {
+    if (handleClose) {
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-top-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      handleClose();
+    }
+  }, [props.controlProps, elementId]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleEscKeyDown = useCallback(e => {
+    if (e.key === "Escape") {
+      handleClose();
+    }
+  }, [handleClose]);
+  const containerStyles = {
+    root: Object.assign({}, defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
+      position: "relative" // Ensure container is positioned for absolute positioning of top close button
+
+    })
+  };
+  const titleStyles = {
+    root: Object.assign({}, defaultCitationPaneTitleStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const contentStyles = { ...defaultCitationPaneContentStyles,
+    ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps),
+    rootHovered: Object.assign({}, defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.closeButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, defaultCitationPaneCloseButtonFocusedStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, defaultCitationPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps)
+  };
+  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || defaultCitationPaneControlProps.topCloseButtonPosition;
+  const topCloseButtonStyles = {
+    root: Object.assign({}, defaultCitationPaneTopCloseButtonStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
+      left: "0.5em",
+      right: "auto"
+    } : {
+      right: "0.5em",
+      left: "auto"
+    }),
+    rootHovered: Object.assign({}, defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.topCloseButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, defaultCitationPaneTopCloseButtonFocusedStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.topCloseButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, defaultCitationPaneTopCloseButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.topCloseButtonHoveredStyleProps)
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    id: elementId,
+    role: "dialog",
+    "aria-labelledby": elementId + "-title",
+    "aria-describedby": elementId + "-content",
+    dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || defaultCitationPaneControlProps.dir,
+    styles: containerStyles,
+    className: (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : (_props$styleProps12$c = _props$styleProps12.classNames) === null || _props$styleProps12$c === void 0 ? void 0 : _props$styleProps12$c.containerClassName,
+    onKeyDown: handleEscKeyDown,
+    tabIndex: -1
+  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleTopClose,
+    id: elementId + "-top-close",
+    iconProps: {
+      iconName: "ChromeClose"
+    },
+    ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || defaultCitationPaneControlProps.topCloseButtonAriaLabel,
+    styles: topCloseButtonStyles,
+    className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.topCloseButtonClassName
+  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/React.createElement(Label, {
+    id: elementId + "-title",
+    styles: titleStyles,
+    className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.titleClassName
+  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || defaultCitationPaneControlProps.titleText)), /*#__PURE__*/React.createElement("div", {
+    id: elementId + "-content",
+    style: contentStyles,
+    className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.contentClassName,
+    dangerouslySetInnerHTML: {
+      __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
+    }
+  }), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(DefaultButton, {
+    onClick: handleClose,
+    id: elementId + "-close",
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || defaultCitationPaneControlProps.closeButtonText,
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || defaultCitationPaneControlProps.closeButtonAriaLabel,
+    styles: closeButtonStyles,
+    className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.closeButtonClassName
+  }))));
+}
+
+export default CitationPane;

package/lib/esm/components/citationpane/ScalingTest.js

@@ -0,0 +1,64 @@
+import CitationPane from "./CitationPane";
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+
+export const CitationPaneScalingTest = () => {
+  const baseProps = {
+    controlProps: {
+      id: "scaling-test-citation",
+      titleText: "Scaling Test Citation",
+      contentHtml: `
+                <div>
+                    <p>This citation pane is designed to scale properly from 50% to 400% zoom levels.</p>
+                    <p><strong>Key improvements for scaling:</strong></p>
+                    <ul>
+                        <li>Uses <code>em</code> units instead of <code>px</code> for dimensions</li>
+                        <li>Scalable padding, margins, and positioning</li>
+                        <li>Relative font sizes throughout</li>
+                        <li>Container-relative maximum height instead of viewport-based</li>
+                    </ul>
+                    <p><strong>Test Instructions:</strong></p>
+                    <ol>
+                        <li>Use your browser's zoom controls (Ctrl/Cmd + or -)</li>
+                        <li>Test zoom levels: 50%, 75%, 100%, 150%, 200%, 300%, 400%</li>
+                        <li>Verify all elements remain proportional and usable</li>
+                        <li>Check that buttons remain clickable and text remains readable</li>
+                    </ol>
+                </div>
+            `,
+      closeButtonText: "Close Test",
+      onClose: () => {
+        console.log("Scaling test close button clicked at current zoom level");
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "2em",
+      backgroundColor: "#f5f5f5",
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "600px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      marginBottom: "1em",
+      textAlign: "center"
+    }
+  }, "CitationPane Scaling Test"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: "2em",
+      textAlign: "center",
+      fontSize: "0.9em"
+    }
+  }, "Test this component at browser zoom levels from 50% to 400%"), /*#__PURE__*/React.createElement(CitationPane, baseProps)));
+};
+export default CitationPaneScalingTest;

package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.js

@@ -0,0 +1,15 @@
+export const defaultCitationPaneControlProps = {
+  id: "ocw-citation-pane",
+  dir: "ltr",
+  hideTitle: false,
+  titleText: "Citation",
+  hideCloseButton: false,
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close citation",
+  hideTopCloseButton: false,
+  topCloseButtonAriaLabel: "Close",
+  topCloseButtonPosition: "topRight",
+  onClose: () => {
+    console.log("Citation pane close");
+  }
+};

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

@@ -0,0 +1,6 @@
+import { defaultCitationPaneControlProps } from "./defaultCitationPaneControlProps";
+import { defaultCitationPaneStyleProps } from "./defaultCitationPaneStyleProps";
+export const defaultCitationPaneProps = {
+  controlProps: defaultCitationPaneControlProps,
+  styleProps: defaultCitationPaneStyleProps
+};

package/lib/esm/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js

@@ -0,0 +1,20 @@
+import { defaultCitationPaneCloseButtonFocusedStyles } from "../defaultStyles/defaultCitationPaneCloseButtonFocusedStyles";
+import { defaultCitationPaneCloseButtonHoveredStyles } from "../defaultStyles/defaultCitationPaneCloseButtonHoveredStyles";
+import { defaultCitationPaneCloseButtonStyles } from "../defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "../defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneGeneralStyles } from "../defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "../defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonFocusedStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles";
+import { defaultCitationPaneTopCloseButtonHoveredStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+export const defaultCitationPaneStyleProps = {
+  generalStyleProps: defaultCitationPaneGeneralStyles,
+  titleStyleProps: defaultCitationPaneTitleStyles,
+  contentStyleProps: defaultCitationPaneContentStyles,
+  closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
+  closeButtonHoveredStyleProps: defaultCitationPaneCloseButtonHoveredStyles,
+  closeButtonFocusedStyleProps: defaultCitationPaneCloseButtonFocusedStyles,
+  topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles,
+  topCloseButtonHoveredStyleProps: defaultCitationPaneTopCloseButtonHoveredStyles,
+  topCloseButtonFocusedStyleProps: defaultCitationPaneTopCloseButtonFocusedStyles
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.js

@@ -0,0 +1,4 @@
+export const defaultCitationPaneCloseButtonFocusedStyles = {
+  border: "2px dotted #605e5c",
+  outline: "none"
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.js

@@ -0,0 +1,4 @@
+export const defaultCitationPaneCloseButtonHoveredStyles = {
+  backgroundColor: "#f3f2f1",
+  color: "#323130"
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js

@@ -0,0 +1,42 @@
+export const defaultCitationPaneCloseButtonStyles = {
+  marginTop: "1em",
+  // Space between content and close button (scalable)
+  alignSelf: "center",
+  // Center the button horizontally
+  backgroundColor: "#f3f2f1",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  color: "#323130",
+  cursor: "pointer",
+  fontSize: "1em",
+  // Use relative font size for better scaling
+  fontWeight: "500",
+  minHeight: "2.75em",
+  // A11Y compliant minimum height (44px at 16px base)
+  minWidth: "5.5em",
+  // A11Y compliant minimum width (88px at 16px base)
+  padding: "0.5em 1em",
+  // Scalable padding
+  // Responsive hiding at high zoom levels for better content space
+  "@media (min-resolution: 2.5dppx), (min-resolution: 240dpi)": {
+    display: "none" // Hide at 250%+ zoom to preserve content space
+
+  },
+  selectors: {
+    ":hover": {
+      backgroundColor: "#e1dfdd",
+      borderColor: "#c8c6c4"
+    },
+    ":focus": {
+      outline: "0.125em solid #0078d4",
+      // Scalable outline
+      outlineOffset: "0.125em" // Scalable offset
+
+    },
+    ":active": {
+      backgroundColor: "#d2d0ce",
+      borderColor: "#c8c6c4"
+    }
+  }
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js

@@ -0,0 +1,14 @@
+export const defaultCitationPaneContentStyles = {
+  fontSize: "1em",
+  // Use relative units for better scaling
+  lineHeight: "1.5",
+  // Already relative, good for scaling
+  marginBottom: "0",
+  // No bottom margin since close button has top margin
+  flex: "1",
+  // Allow content to grow and push close button to bottom
+  overflow: "auto",
+  // Enable scrolling for long content
+  paddingRight: "0.125em" // Reduced padding to give more space for text at high zoom (scalable)
+
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js

@@ -0,0 +1,26 @@
+export const defaultCitationPaneGeneralStyles = {
+  position: "relative",
+  // Required for absolute positioning of top close button
+  paddingTop: "2em",
+  // Reduced space for top close button (scalable)
+  paddingLeft: "0.75em",
+  // Reduced left padding (scalable)
+  paddingRight: "0.75em",
+  // Reduced right padding (scalable)
+  paddingBottom: "0.75em",
+  // Reduced bottom padding (scalable)
+  backgroundColor: "#ffffff",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.5em",
+  // Scalable border radius
+  boxShadow: "0px 0.125em 0.25em rgba(0, 0, 0, 0.1)",
+  // Scalable shadow
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "7.5em",
+  // Minimum height to ensure proper layout (scalable)
+  maxHeight: "30em",
+  // Container-relative height instead of viewport-based
+  overflow: "hidden" // Hide overflow on container, let content area handle scrolling
+
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.js

@@ -0,0 +1,20 @@
+import { defaultCitationPaneCloseButtonFocusedStyles } from "./defaultCitationPaneCloseButtonFocusedStyles";
+import { defaultCitationPaneCloseButtonHoveredStyles } from "./defaultCitationPaneCloseButtonHoveredStyles";
+import { defaultCitationPaneCloseButtonStyles } from "./defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "./defaultCitationPaneContentStyles";
+import { defaultCitationPaneGeneralStyles } from "./defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "./defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonFocusedStyles } from "./defaultCitationPaneTopCloseButtonFocusedStyles";
+import { defaultCitationPaneTopCloseButtonHoveredStyles } from "./defaultCitationPaneTopCloseButtonHoveredStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "./defaultCitationPaneTopCloseButtonStyles";
+export const defaultCitationPaneStyles = {
+  generalStyleProps: defaultCitationPaneGeneralStyles,
+  titleStyleProps: defaultCitationPaneTitleStyles,
+  contentStyleProps: defaultCitationPaneContentStyles,
+  closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
+  closeButtonHoveredStyleProps: defaultCitationPaneCloseButtonHoveredStyles,
+  closeButtonFocusedStyleProps: defaultCitationPaneCloseButtonFocusedStyles,
+  topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles,
+  topCloseButtonHoveredStyleProps: defaultCitationPaneTopCloseButtonHoveredStyles,
+  topCloseButtonFocusedStyleProps: defaultCitationPaneTopCloseButtonFocusedStyles
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.js

@@ -0,0 +1 @@
+export const defaultCitationPaneTitleStyles = {};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.js

@@ -0,0 +1,4 @@
+export const defaultCitationPaneTopCloseButtonFocusedStyles = {
+  border: "2px dotted #605e5c",
+  outline: "none"
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.js

@@ -0,0 +1,4 @@
+export const defaultCitationPaneTopCloseButtonHoveredStyles = {
+  backgroundColor: "#f3f2f1",
+  color: "#323130"
+};

package/lib/esm/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.js

@@ -0,0 +1,36 @@
+export const defaultCitationPaneTopCloseButtonStyles = {
+  position: "absolute",
+  top: "0.5em",
+  // Scalable positioning
+  right: "0.5em",
+  // Scalable positioning
+  minWidth: "2em",
+  // Scalable minimum width
+  height: "2em",
+  // Scalable height
+  padding: "0",
+  fontSize: "1em",
+  // Scalable font size
+  fontWeight: "bold",
+  color: "#605e5c",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  cursor: "pointer",
+  zIndex: 1000,
+  ":hover": {
+    backgroundColor: "#f3f2f1",
+    color: "#323130"
+  },
+  ":active": {
+    backgroundColor: "#edebe9",
+    color: "#201f1e"
+  },
+  ":focus": {
+    outline: "0.125em solid #605e5c",
+    // Scalable outline
+    outlineOffset: "0.125em" // Scalable offset
+
+  }
+};

package/lib/esm/components/citationpane/interfaces/ICitationPaneClassNames.js

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

package/lib/esm/components/citationpane/interfaces/ICitationPaneComponentOverrides.js

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

package/lib/esm/components/citationpane/interfaces/ICitationPaneControlProps.js

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

package/lib/esm/components/citationpane/interfaces/ICitationPaneProps.js

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

package/lib/esm/components/citationpane/interfaces/ICitationPaneStyleProps.js

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

package/lib/esm/index.js

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/lib/types/common/Constants.d.ts

@@ -31,6 +31,7 @@ export declare enum ElementType {
     ReconnectChatPane = "ReconnectChatPane",
     ConfirmationPaneConfirmButton = "ConfirmationPaneConfirmButton",
     ConfirmationPaneCancelButton = "ConfirmationPaneCancelButton",
+    CitationPaneCloseButton = "CitationPaneCloseButton",
     PreChatSurveySubmitButton = "PreChatSurveySubmitButton",
     PreChatSurveyError = "PreChatSurveyError",
     IncomingCallDeclineCallButton = "IncomingCallDeclineCallButton",

package/lib/types/components/citationpane/CitationPane.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ICitationPaneProps } from "./interfaces/ICitationPaneProps";
+declare function CitationPane(props: ICitationPaneProps): React.JSX.Element;
+export default CitationPane;

package/lib/types/components/citationpane/ScalingTest.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+export declare const CitationPaneScalingTest: React.FC;
+export default CitationPaneScalingTest;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneControlProps } from "../../interfaces/ICitationPaneControlProps";
+export declare const defaultCitationPaneControlProps: ICitationPaneControlProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneProps } from "../../interfaces/ICitationPaneProps";
+export declare const defaultCitationPaneProps: ICitationPaneProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneStyleProps } from "../../interfaces/ICitationPaneStyleProps";
+export declare const defaultCitationPaneStyleProps: ICitationPaneStyleProps;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonFocusedStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneCloseButtonFocusedStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonHoveredStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneCloseButtonHoveredStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneContentStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneGeneralStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneStyles.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneStyleProps } from "../../interfaces/ICitationPaneStyleProps";
+export declare const defaultCitationPaneStyles: ICitationPaneStyleProps;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTitleStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonFocusedStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTopCloseButtonFocusedStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonHoveredStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTopCloseButtonHoveredStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTopCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/interfaces/ICitationPaneClassNames.d.ts

@@ -0,0 +1,7 @@
+export interface ICitationPaneClassNames {
+    containerClassName?: string;
+    titleClassName?: string;
+    contentClassName?: string;
+    closeButtonClassName?: string;
+    topCloseButtonClassName?: string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneComponentOverrides.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ICitationPaneComponentOverrides {
+    title?: ReactNode | string;
+    closeButton?: ReactNode | string;
+    topCloseButton?: ReactNode | string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneControlProps.d.ts

@@ -0,0 +1,16 @@
+export interface ICitationPaneControlProps {
+    id?: string;
+    dir?: "ltr" | "rtl" | "auto";
+    hideCitationPane?: boolean;
+    hideTitle?: boolean;
+    titleText?: string;
+    contentHtml?: string;
+    hideCloseButton?: boolean;
+    closeButtonText?: string;
+    closeButtonAriaLabel?: string;
+    hideTopCloseButton?: boolean;
+    topCloseButtonAriaLabel?: string;
+    topCloseButtonPosition?: "topLeft" | "topRight";
+    brightnessValueOnDim?: string;
+    onClose?: () => void;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneProps.d.ts

@@ -0,0 +1,8 @@
+import { ICitationPaneComponentOverrides } from "./ICitationPaneComponentOverrides";
+import { ICitationPaneControlProps } from "./ICitationPaneControlProps";
+import { ICitationPaneStyleProps } from "./ICitationPaneStyleProps";
+export interface ICitationPaneProps {
+    controlProps?: ICitationPaneControlProps;
+    styleProps?: ICitationPaneStyleProps;
+    componentOverrides?: ICitationPaneComponentOverrides;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneStyleProps.d.ts

@@ -0,0 +1,14 @@
+import { ICitationPaneClassNames } from "./ICitationPaneClassNames";
+import { IStyle } from "@fluentui/react";
+export interface ICitationPaneStyleProps {
+    generalStyleProps?: IStyle;
+    titleStyleProps?: IStyle;
+    contentStyleProps?: IStyle;
+    closeButtonStyleProps?: IStyle;
+    closeButtonHoveredStyleProps?: IStyle;
+    closeButtonFocusedStyleProps?: IStyle;
+    topCloseButtonStyleProps?: IStyle;
+    topCloseButtonHoveredStyleProps?: IStyle;
+    topCloseButtonFocusedStyleProps?: IStyle;
+    classNames?: ICitationPaneClassNames;
+}

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-components",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "Microsoft Omnichannel Chat Components",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",