@coveo/quantic 3.37.9 → 3.38.0

package/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.js

@@ -12,8 +12,27 @@ import {LightningElement, api} from 'lwc';
 export default class QuanticGeneratedAnswerCopyToClipboard extends LightningElement {
   /**
    * The answer to copy
+   * @type {string}
    */
-  @api answer;
+  @api answer = '';
+
+  /**
+   * The size of the copy icon.
+   * @api
+   * @type {'xx-small' | 'x-small' | 'small' | 'medium' | 'large'}
+   */
+  @api
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    if (['xx-small', 'x-small', 'small', 'medium', 'large'].includes(value)) {
+      this._size = value;
+    }
+  }
+
+  /** @type {'xx-small' | 'x-small' | 'small' | 'medium' | 'large'} */
+  _size = 'xx-small';
 
   labels = {
     copy,

package/force-app/main/default/lwc/quanticResultHighlightedTextField/quanticResultHighlightedTextField.js

@@ -4,6 +4,7 @@ import {
   initializeWithHeadless,
   getHeadlessBundle,
 } from 'c/quanticHeadlessLoader';
+import {unwrapLockerProxiedObject} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 
 /** @typedef {import("coveo").Result} Result */
@@ -28,7 +29,13 @@ export default class QuanticResultHighlightedTextField extends LightningElement
    * @api
    * @type {Result}
    */
-  @api result;
+  @api
+  get result() {
+    return this._result;
+  }
+  set result(result) {
+    this._result = unwrapLockerProxiedObject(result);
+  }
   /**
    * (Optional) The label to display.
    * @api
@@ -49,6 +56,8 @@ export default class QuanticResultHighlightedTextField extends LightningElement
   isInitialized = false;
   /** @type {boolean} */
   validated = false;
+  /** @type {Result} */
+  _result;
 
   connectedCallback() {
     this.validateProps();

package/force-app/main/default/lwc/quanticResultLink/quanticResultLink.js

@@ -4,7 +4,7 @@ import {
   getHeadlessBundle,
   getHeadlessEnginePromise,
 } from 'c/quanticHeadlessLoader';
-import {ResultUtils} from 'c/quanticUtils';
+import {ResultUtils, unwrapLockerProxiedObject} from 'c/quanticUtils';
 import {NavigationMixin} from 'lightning/navigation';
 import {LightningElement, api} from 'lwc';
 
@@ -38,7 +38,13 @@ export default class QuanticResultLink extends NavigationMixin(
    * @api
    * @type {Result}
    */
-  @api result;
+  @api
+  get result() {
+    return this._result;
+  }
+  set result(result) {
+    this._result = unwrapLockerProxiedObject(result);
+  }
   /**
    * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
    * The following keywords have special meanings for where to load the URL:
@@ -75,6 +81,8 @@ export default class QuanticResultLink extends NavigationMixin(
   engine;
   /** @type {AnyHeadless} */
   headless;
+  /** @type {Result} */
+  _result;
   /** @type {string} */
   salesforceRecordUrl;
 
@@ -113,8 +121,7 @@ export default class QuanticResultLink extends NavigationMixin(
     this.engine = engine;
     ResultUtils.bindClickEventsOnResult(
       this.engine,
-      // Destructuring transforms the Proxy object created by Salesforce to a normal object so no unexpected behaviour will occur with the Headless library.
-      {...this.result, raw: {...this.result.raw}},
+      this.result,
       this.template,
       this.headless.buildInteractiveResult
     );

package/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js

@@ -8,7 +8,11 @@ import {
   HeadlessBundleNames,
   isHeadlessBundle,
 } from 'c/quanticHeadlessLoader';
-import {I18nUtils, getLastFocusableElement} from 'c/quanticUtils';
+import {
+  I18nUtils,
+  getLastFocusableElement,
+  unwrapLockerProxiedObject,
+} from 'c/quanticUtils';
 import {LightningElement, api, track} from 'lwc';
 
 /** @typedef {import("coveo").Result} Result */
@@ -42,7 +46,13 @@ export default class QuanticResultQuickview extends LightningElement {
    * @api
    * @type {ResultWithFolding}
    */
-  @api result;
+  @api
+  get result() {
+    return this._result;
+  }
+  set result(result) {
+    this._result = unwrapLockerProxiedObject(result);
+  }
   /**
    * The maximum preview size to retrieve, in bytes. By default, the full preview is retrieved.
    * @api
@@ -84,6 +94,8 @@ export default class QuanticResultQuickview extends LightningElement {
 
   /** @type {Quickview} */
   quickview;
+  /** @type {ResultWithFolding} */
+  _result;
   /** @type {boolean} */
   isQuickviewOpen = false;
   /** @type {Function} */

package/force-app/main/default/lwc/quanticThreadItem/__tests__/quanticThreadItem.test.js

@@ -0,0 +1,176 @@
+// @ts-ignore
+import QuanticThreadItem from '../quanticThreadItem';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+
+const selectors = {
+  titleButton: '[data-testid="thread-item-title-button"]',
+  titleSpan: '[data-testid="thread-item-title-static"]',
+  boldTitle: '.slds-text-title_bold',
+  contentWrapper: '[data-testid="thread-item-content"]',
+  visibleContent: '[data-testid="thread-item-content"] > div:not([hidden])',
+  line: '[data-testid="thread-item-line"]',
+  dot: '[data-testid="thread-item-dot"]',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticThreadItem,
+  'c-quantic-thread-item',
+  {
+    title: 'Test title',
+  }
+);
+
+describe('c-quantic-thread-item', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('initial rendering', () => {
+    it('renders a button when collapse is enabled', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button).not.toBeNull();
+    });
+
+    it('renders a span instead of a button when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      const span = element.shadowRoot.querySelector(selectors.titleSpan);
+      expect(button).toBeNull();
+      expect(span).not.toBeNull();
+    });
+
+    it('renders the timeline line by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const line = element.shadowRoot.querySelector(selectors.line);
+      expect(line).not.toBeNull();
+    });
+
+    it('hides the timeline line when hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true});
+      await flushPromises();
+
+      const line = element.shadowRoot.querySelector(selectors.line);
+      expect(line).toBeNull();
+    });
+  });
+
+  describe('collapsed state', () => {
+    it('does not render the content by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('button has aria-expanded set to false when collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('dot does not have expanded class when collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).not.toContain('thread-item__dot--expanded');
+    });
+  });
+
+  describe('expanded state', () => {
+    it('renders the content when isExpanded is true', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('button has aria-expanded set to true when expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button.getAttribute('aria-expanded')).toBe('true');
+    });
+
+    it('dot has expanded class when expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).toContain('thread-item__dot--expanded');
+    });
+  });
+
+  describe('toggle interaction', () => {
+    it('renders the content when the button is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.titleButton).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('does not render the content when the button is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.titleButton).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+  });
+
+  describe('disableCollapse', () => {
+    it('forces item to be expanded regardless of isExpanded prop', async () => {
+      const element = createTestComponent({
+        disableCollapse: true,
+        isExpanded: false,
+      });
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('renders a bold title when collapse is disabled', async () => {
+      const element = createTestComponent({
+        disableCollapse: true,
+        isExpanded: false,
+      });
+      await flushPromises();
+
+      const title = element.shadowRoot.querySelector(selectors.titleSpan);
+      expect(title.className).toContain('slds-text-title_bold');
+      expect(
+        element.shadowRoot.querySelector(selectors.boldTitle)
+      ).not.toBeNull();
+    });
+  });
+});

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.css

@@ -0,0 +1,64 @@
+.thread-item {
+  list-style: none;
+}
+
+.thread-item__dot-column,
+.thread-item__line-column {
+  width: 10px;
+}
+
+.thread-item__line-column {
+  align-items: stretch;
+}
+
+.thread-item__dot {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__dot--expanded {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
+.thread-item__line {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__line::before,
+.thread-item__line::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 1px;
+  height: 8px;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__line::before {
+  top: -8px;
+}
+
+.thread-item__line::after {
+  bottom: -8px;
+}
+
+.thread-item__clamped-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.thread-item__title-button {
+  width: fit-content;
+  border-radius: var(--slds-g-radius-border-2, 4px);
+}
+
+.thread-item__title-button:hover {
+  background-color: var(--lwc-colorBackgroundRowHover, #f3f2f2);
+}

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.html

@@ -0,0 +1,48 @@
+<template>
+  <li class="thread-item">
+    <div class="slds-grid slds-grid_vertical-align-center">
+      <div
+        class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small thread-item__dot-column"
+      >
+        <span class={dotClass} data-testid="thread-item-dot"></span>
+      </div>
+      <div class="slds-col slds-has-flexi-truncate">
+        <template lwc:if={disableCollapse}>
+          <span class={titleClass} data-testid="thread-item-title-static"
+            >{title}</span
+          >
+        </template>
+        <template lwc:else>
+          <button
+            type="button"
+            class={titleButtonClass}
+            aria-expanded={isExpanded}
+            data-testid="thread-item-title-button"
+            onclick={handleTitleClick}
+            aria-controls="thread-item-content"
+          >
+            {title}
+          </button>
+        </template>
+      </div>
+    </div>
+    <div class="slds-grid">
+      <div
+        class="slds-grid slds-grid_align-center slds-shrink-none thread-item__line-column slds-m-right_x-small"
+      >
+        <template lwc:if={shouldDisplayLine}>
+          <span class="thread-item__line" data-testid="thread-item-line"></span>
+        </template>
+      </div>
+      <div
+        id="thread-item-content"
+        class="slds-col slds-p-left_x-small slds-p-vertical_xx-small"
+        data-testid="thread-item-content"
+      >
+        <div hidden={contentHidden}>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.js

@@ -0,0 +1,80 @@
+import {LightningElement, api} from 'lwc';
+
+/**
+ * The `QuanticThreadItem` component renders a thread item with timeline visuals and collapsible content.
+ * @category Internal
+ * @example
+ * <c-quantic-thread-item title="Step title" hide-line is-expanded></c-quantic-thread-item>
+ */
+export default class QuanticThreadItem extends LightningElement {
+  /**
+   * The title displayed for the thread item.
+   * @api
+   * @type {string}
+   */
+  @api title = '';
+
+  /**
+   * Whether the thread item can be expanded or collapsed.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api disableCollapse = false;
+
+  /**
+   * Whether the timeline line should be hidden.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api hideLine = false;
+
+  /**
+   * Whether the thread item is expanded.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api
+  get isExpanded() {
+    return this._isExpanded;
+  }
+  set isExpanded(value) {
+    this._isExpanded = value;
+  }
+
+  /** @type {boolean} */
+  _isExpanded = false;
+
+  connectedCallback() {
+    this._isExpanded = this.disableCollapse ? true : this.isExpanded;
+  }
+
+  handleTitleClick() {
+    if (this.disableCollapse) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
+  get shouldDisplayLine() {
+    return !this.hideLine;
+  }
+
+  get contentHidden() {
+    return !this._isExpanded;
+  }
+
+  get titleClass() {
+    return `thread-item__clamped-text slds-text-body_regular slds-p-horizontal_x-small slds-p-vertical_xx-small${this._isExpanded ? ' slds-text-title_bold' : ''}`;
+  }
+
+  get titleButtonClass() {
+    return `slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small thread-item__title-button thread-item__clamped-text${this._isExpanded ? ' slds-text-title_bold' : ''}`;
+  }
+
+  get dotClass() {
+    return `thread-item__dot${this._isExpanded ? ' thread-item__dot--expanded' : ''}`;
+  }
+}

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

package/force-app/main/default/lwc/quanticUtils/__tests__/quanticUtils.test.js

@@ -2,6 +2,7 @@ import {
   I18nUtils,
   buildTemplateTextFromResult,
   copyToClipboard,
+  unwrapLockerProxiedObject,
 } from 'c/quanticUtils';
 
 describe('c/quanticUtils', () => {
@@ -200,4 +201,33 @@ describe('c/quanticUtils', () => {
       );
     });
   });
+
+  describe('unwrapLockerObject', () => {
+    it('should deeply clone complex objects while preserving primitive values', () => {
+      const original = {
+        title: 'Example',
+        raw: {
+          foo: 'bar',
+          tags: ['a', {value: 'b'}],
+        },
+        score: 42,
+      };
+
+      const unwrapped = unwrapLockerProxiedObject(original);
+
+      expect(unwrapped).toEqual(original);
+      expect(unwrapped).not.toBe(original);
+      expect(unwrapped.raw).not.toBe(original.raw);
+      expect(unwrapped.raw.tags).not.toBe(original.raw.tags);
+      expect(unwrapped.raw.tags[1]).not.toBe(original.raw.tags[1]);
+    });
+
+    it('should return primitive values as-is', () => {
+      expect(unwrapLockerProxiedObject(undefined)).toBeUndefined();
+      expect(unwrapLockerProxiedObject(null)).toBeNull();
+      expect(unwrapLockerProxiedObject('value')).toBe('value');
+      expect(unwrapLockerProxiedObject(0)).toBe(0);
+      expect(unwrapLockerProxiedObject(false)).toBe(false);
+    });
+  });
 });

package/force-app/main/default/lwc/quanticUtils/quanticUtils.js

@@ -259,6 +259,30 @@ export function parseXML(string) {
   return new window.DOMParser().parseFromString(string, 'text/xml');
 }
 
+/**
+ * Recursively clones objects to break Locker proxy chains.
+ * @param {any} value
+ * @returns {any}
+ */
+export function unwrapLockerProxiedObject(value) {
+  if (value === null || typeof value !== 'object') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => unwrapLockerProxiedObject(item));
+  }
+
+  const unwrappedValue = {};
+  for (const key in value) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      unwrappedValue[key] = unwrapLockerProxiedObject(value[key]);
+    }
+  }
+
+  return unwrappedValue;
+}
+
 /**
  * Utility class for managing a simple in-memory store.
  * Supports registering and retrieving facet and sort option data.