@heartlandone/vega 2.77.1 → 2.79.0

package/dist/collection/constants/ui.js

@@ -12,7 +12,14 @@ export const Placements = ['top', 'left', 'bottom', 'right'];
 export const Alignments = ['start', 'center', 'end'];
 export const ItemToggleTransitionMillisecond = 1500;
 // eslint-disable-next-line @typescript-eslint/typedef
-export const FlexDirections = ['row', 'col', 'row-reverse', 'col-reverse'];
+export const FlexDirections = [
+  'row',
+  'col',
+  'column',
+  'row-reverse',
+  'col-reverse',
+  'column-reverse',
+];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const FlexAlignItem = ['start', 'center', 'end', 'baseline', 'stretch'];
 // eslint-disable-next-line @typescript-eslint/typedef
@@ -25,6 +32,8 @@ export const FlexJustifyContent = [
   'space-evenly',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
+export const GridJustifyItems = ['start', 'center', 'end', 'stretch'];
+// eslint-disable-next-line @typescript-eslint/typedef
 export const FlexWrap = ['nowrap', 'wrap', 'wrap-reverse'];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const BoxDisplay = ['block', 'inline-block', 'none'];
@@ -93,6 +102,7 @@ export const VegaNativeEventName = [
   'selectionChange',
   'suggestionItemClick',
   'nativeInputChange',
+  'sourceCodeChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/global/scripts/before-vega-load.js

@@ -24,6 +24,7 @@ import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/ex
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
 import { VegaRTEFunctionExtension } from '../../components/vega-rich-text-editor/extensions/functions/function-extension';
+import { VegaRTETableExtension } from '../../components/vega-rich-text-editor/extensions/table/table-extension';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -196,6 +197,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELanguageExtension = VegaRTELanguageExtension;
   globalThis.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
   globalThis.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+  globalThis.VegaRTETableExtension = VegaRTETableExtension;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaReset, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaReset, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSourceCodeChange, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick, VegaReset]],
@@ -67,7 +67,7 @@ const entries = [
   ['vega-progress-tracker', [VegaCurrentStepUpdate]],
   ['vega-radio', [VegaChange, VegaFocus, VegaBlur]],
   ['vega-radio-group', [VegaChange]],
-  ['vega-rich-text-editor', [VegaChange, VegaImageInserted]],
+  ['vega-rich-text-editor', [VegaChange, VegaImageInserted, VegaSourceCodeChange]],
   ['vega-rich-text-editor-toolbar-button', [VegaClick]],
   ['vega-rich-text-image-editor', [VegaChange]],
   ['vega-rich-text-link-editor', [VegaChange]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -109,3 +109,4 @@ export const VegaMonthYearChange = new VegaEventID('vegaMonthYearChange', 'month
 export const VegaSelectionChange = new VegaEventID('vegaSelectionChange', 'selectionChange');
 export const VegaSuggestionItemClick = new VegaEventID('vegaSuggestionItemClick', 'suggestionItemClick');
 export const VegaNativeInputChange = new VegaEventID('vegaNativeInputChange', 'nativeInputChange');
+export const VegaSourceCodeChange = new VegaEventID('vegaSourceCodeChange', 'sourceCodeChange');

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -67,3 +67,6 @@ export const VegaInternalDatePickerCalendarUpdatePeriodByUser = new VegaInternal
 export const VegaInternalUpdateVegaInputValue = new VegaInternalEventID('updateVegaInputValue');
 export const VegaInternalFocusVegaInput = new VegaInternalEventID('focusVegaInput');
 export const VegaInternalSetupVegaInputMaskConfig = new VegaInternalEventID('setupVegaInputMaskConfig');
+export const VegaInternalCodeBlockBlur = new VegaInternalEventID('codeBlockBlur');
+export const VegaInternalRTEExtensionTableCellsSelectionAnchor = new VegaInternalEventID('rteExtensionTableCellsSelectionAnchor');
+export const VegaInternalRTEExtensionTableCellSelectionChange = new VegaInternalEventID('rteExtensionTableCellSelectionChange');

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-format-facade.js

@@ -3,6 +3,7 @@ import ResponsiveMarginFormatter from './responsive-margin-formatter';
 import ResponsiveGapFormatter from './responsive-gap-formatter';
 import ResponsiveColumnsFormatter from './responsive-grid-columns-formatter';
 import ResponsiveRowsFormatter from './responsive-grid-rows-formatter';
+import ResponsiveGridJustifyItemsFormatter from './responsive-grid-justify-items-formatter';
 import ResponsiveSizeFormatter from './responsive-size-formatter';
 import ResponsiveTranslocationFormatter from './responsive-translocation-formatter';
 import ResponsiveDisplayFormatter from './responsive-display-formatter';
@@ -48,6 +49,8 @@ class ResponsiveFormatFacade {
         return ResponsiveColumnsFormatter.format(input);
       case 'gridRow':
         return ResponsiveRowsFormatter.format(input);
+      case 'gridJustifyItems':
+        return ResponsiveGridJustifyItemsFormatter.format(input);
       case 'size':
         return ResponsiveSizeFormatter.format(input);
       case 'translocation':

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-grid-justify-items-formatter.js

@@ -0,0 +1,29 @@
+import { isBreakpointsForPrefixType, isGridJustifyItemsType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { GridJustifyItems } from '../../../constants/ui';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for formatting GridJustifyItemsType with BreakpointsForPrefixType to CSS class string.
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveGridJustifyItemsFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a GridJustifyItemsType and a breakpoint and returns CSS class string.
+   *
+   * @param {GridJustifyItemsType} input - GridJustifyItemsType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isGridJustifyItemsType(input)) {
+      return `${prefix}v-justify-items-${input}`;
+    }
+    else {
+      LogUtility.warn(`The grid justifyItems value ${input} is invalid, it must be a value of: `, GridJustifyItems);
+      return '';
+    }
+  }
+}
+export default new ResponsiveGridJustifyItemsFormatter();

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-grid-justify-items-formatter.test.js

@@ -0,0 +1,19 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsiveGridJustifyItemsFormatter from '../../responsive-map-formatter/responsive-grid-justify-items-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveGridJustifyItemsFormatter.formatToken('left');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('start');
+  expect(result).toEqual('v-justify-items-start');
+});
+test('should return format when input in scope and with prefix', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('center', 'M');
+  expect(result).toEqual('M:v-justify-items-center');
+});
+test('should return format when input in scope and with prefix not in scope', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('end', 'test');
+  expect(result).toEqual('v-justify-items-end');
+});

package/dist/collection/helpers/slimmers/aria-dialog-focusable-trap-slimmer.js

@@ -0,0 +1,213 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { checkIsVoiceOverClick, getDeepActiveElementInShadow } from '../../utils/ui';
+import { SynchronizeTaskQueue } from '../queue/synchronize-task-queue';
+const focusableSelector = [
+  'a[href]',
+  'area[href]',
+  'button',
+  'input',
+  'select',
+  'textarea',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable="true"]',
+  '[contenteditable=""]',
+  '[tabindex]',
+].join(',');
+/**
+ * The `AriaDialogFocusableTrapSlimmer` class is designed to manage focus behavior for dialog elements appended to the DOM, particularly in scenarios where screen readers like VoiceOver are used.
+ * It detects when a click event is likely triggered by VoiceOver and ensures that focus is appropriately set to the first focusable element
+ * within the dialog content when it is shown, and returns focus to the triggering element when the dialog is hidden.
+ * This helps maintain a logical focus order and improves accessibility for keyboard users and screen reader users.
+ */
+export class AriaDialogFocusableTrapSlimmer extends VegaSlimmer {
+  constructor(entry) {
+    super();
+    this.isVoiceOverClick = false;
+    this.focusTriggerElement = null;
+    this.focusDialogTaskQueue = new SynchronizeTaskQueue();
+    /**
+     * Sets up the event listener for click events on the trigger element or the window.
+     */
+    this.eventListenerHandler = () => {
+      const target = this.entry.triggerEl() || window;
+      target.addEventListener('click', this.handleClickEvent, { capture: true });
+    };
+    /**
+     * Removes the event listener for click events from the trigger element or the window.
+     */
+    this.eventListenerRemover = () => {
+      const target = this.entry.triggerEl();
+      target && target.removeEventListener('click', this.handleClickEvent, { capture: true });
+      window.removeEventListener('click', this.handleClickEvent, { capture: true });
+    };
+    /**
+     * Handles the click event and determines if it is likely triggered by VoiceOver.
+     *  If it is a VoiceOver click, it sets the `isVoiceOverClick` flag to true and stores the currently focused element as the trigger element.
+     * 	If it is not a VoiceOver click, it resets the `focusTriggerElement` to null.
+     *
+     * @param {MouseEvent} e - The click event object that is passed to the event handler.
+     */
+    this.handleClickEvent = (e) => {
+      this.isVoiceOverClick = checkIsVoiceOverClick(e);
+      if (!this.isVoiceOverClick) {
+        this.focusTriggerElement = null;
+      }
+    };
+    /**
+     * Recursively searches for the first focusable element within the given container, including its shadow DOM descendants.
+     * 	If the container itself is focusable, it will be returned.
+     *
+     * @param {HTMLElement | ShadowRoot} container - The container to search within.
+     * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
+     */
+    this.getFirstFocusableElement = (container) => {
+      /**
+       * Recursively search for the first focusable element within the given node and its shadow DOM descendants.
+       *
+       * @param {ParentNode} node - The node to search within.
+       * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
+       */
+      const findFirst = (node) => {
+        if (node instanceof HTMLElement && this.isFocusableElement(node)) {
+          return node;
+        }
+        const elements = Array.from(node.querySelectorAll('*'));
+        for (const element of elements) {
+          if (this.isFocusableElement(element)) {
+            return element;
+          }
+          if (element.shadowRoot) {
+            const found = findFirst(element.shadowRoot);
+            if (found)
+              return found;
+          }
+        }
+        return null;
+      };
+      if (container instanceof HTMLElement && container.shadowRoot) {
+        if (this.isFocusableElement(container))
+          return container;
+        return findFirst(container) || findFirst(container.shadowRoot);
+      }
+      else {
+        return findFirst(container);
+      }
+    };
+    /**
+     * It returns the first focusable element in the modal container, or the modal container itself if it is focusable.
+     *
+     * @param {HTMLElement} element - The element to check for focusable and to search within if it is not focusable.
+     * @returns {boolean} True if the element is focusable, false otherwise.
+     */
+    this.isFocusableElement = (element) => {
+      if (!element.matches(focusableSelector))
+        return false;
+      if (element.hasAttribute('disabled') || element.hasAttribute('inert'))
+        return false;
+      if (element.getAttribute('aria-hidden') === 'true')
+        return false;
+      if (element instanceof HTMLInputElement && element.type === 'hidden')
+        return false;
+      return element.tabIndex >= 0;
+    };
+    this.entry = entry;
+  }
+  /**
+   * Ensures that the event listener for click events is set up when the component is connected to the DOM. This is important for cases where the component might be added to the DOM after it has been initialized, ensuring that the click events are properly handled to manage focus behavior for dialog elements.
+   */
+  connectedCallback() {
+    this.eventListenerHandler();
+  }
+  /**
+   * Removes the event listener for click events from the trigger element or the window when the component is disconnected from the DOM.
+   */
+  disconnectedCallback() {
+    this.eventListenerRemover();
+  }
+  /**
+   * Sets up the event listener for click events on the trigger element or the window after the component has loaded.
+   */
+  componentDidLoad() {
+    this.eventListenerHandler();
+  }
+  /**
+   * Ensures that any pending focus actions are executed after the component has rendered.
+   */
+  async componentDidRender() {
+    await this.focusDialogTaskQueue.runTask();
+  }
+  /**
+   * When showing the dialog, if the last active element before the click event is detected as a VoiceOver click,
+   *
+   * @param {boolean} isOpen - A boolean indicating whether the dialog should be shown or hidden.
+   * @returns {Promise<void>} A promise that resolves when the focus action is complete.
+   */
+  async toggle(isOpen) {
+    if (isOpen) {
+      await this.show();
+    }
+    else {
+      await this.hide();
+    }
+  }
+  /**
+   * When showing the appended element, if the last active element before the click event is detected as a VoiceOver click,
+   *   it will attempt to focus the first focusable element within the appended element.
+   *
+   * @returns {Promise<void>} A promise that resolves when the focus action is complete.
+   */
+  async show() {
+    const activeEl = getDeepActiveElementInShadow();
+    if (activeEl) {
+      await this.focusDialogTaskQueue.enqueue({
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        run: async () => {
+          if (this.isVoiceOverClick) {
+            this.focusTriggerElement = activeEl;
+            const dialogElement = this.entry.dialogEl();
+            const focusableElement = this.getFirstFocusableElement(dialogElement) || dialogElement;
+            focusableElement.focus();
+            this.isVoiceOverClick = false;
+          }
+        },
+      }, false);
+    }
+  }
+  /**
+   * When hiding the appended element, if the last active element before the click event is detected as a VoiceOver click,
+   *    it will attempt to focus back on the element that triggered the show action.
+   *
+   * @returns {Promise<void>} A promise that resolves when the focus action is complete.
+   */
+  async hide() {
+    if (this.focusTriggerElement) {
+      await this.focusDialogTaskQueue.enqueue({
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        run: async () => {
+          this.focusTriggerElement && this.focusTriggerElement.focus();
+          this.focusTriggerElement = null;
+        },
+      }, false);
+    }
+  }
+}
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], AriaDialogFocusableTrapSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], AriaDialogFocusableTrapSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], AriaDialogFocusableTrapSlimmer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], AriaDialogFocusableTrapSlimmer.prototype, "componentDidRender", null);

package/dist/collection/helpers/slimmers/element-appender/body-positioned-wrapper/test/vega-popover-wrapper.test.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ElementAppenderContainerController, } from '../../element-appender-container-controller';
+import '../../../../../polyfill/test-polyfill/unit/index';
+import { InjectVegaSlimmer } from 'vega-slimmer/core';
+describe('VegaPopoverWrapper', () => {
+  class MockedComponent {
+    constructor() {
+      this.controller = new ElementAppenderContainerController();
+    }
+    setContainer() {
+      this.controller.setContainer();
+    }
+    getContainer() {
+      return this.controller['container'];
+    }
+    getVegaPopoverWrapper() {
+      return this.controller['vegaPopoverWrapper'];
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponent.prototype, "controller", void 0);
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+  function makeFixture() {
+    const popoverContainer = document.createElement('div');
+    popoverContainer.classList.add('vega-popover');
+    const target = document.createElement('button');
+    const appendableElement = document.createElement('div');
+    popoverContainer.appendChild(target);
+    document.body.appendChild(popoverContainer);
+    return { popoverContainer, target, appendableElement };
+  }
+  it('appends appendableElement to .vega-popover container on retrieve()', () => {
+    const { popoverContainer, target, appendableElement, } = makeFixture();
+    const component = new MockedComponent();
+    component.showConfig = { target, appendableElement };
+    component.setContainer();
+    expect(component.getContainer()).toBe(popoverContainer);
+    expect(appendableElement.parentElement).toBe(popoverContainer);
+  });
+  it('canRetrieve() returns false when target has no .vega-popover ancestor', () => {
+    const target = document.createElement('button');
+    document.body.appendChild(target);
+    const appendableElement = document.createElement('div');
+    const component = new MockedComponent();
+    component.showConfig = { target, appendableElement };
+    component.setContainer();
+    // Without a .vega-popover ancestor, VegaPopoverWrapper should not activate;
+    // the controller falls through to DefaultWrapper (document.body).
+    expect(component.getContainer()).toBe(document.body);
+  });
+  it('canRetrieve() returns true when .vega-popover ancestor exists', () => {
+    const { popoverContainer, target, appendableElement, } = makeFixture();
+    const component = new MockedComponent();
+    component.showConfig = { target, appendableElement };
+    component.setContainer();
+    expect(component.getContainer()).toBe(popoverContainer);
+  });
+});

package/dist/collection/helpers/slimmers/position-calculation/base-position-calculation-strategy.js

@@ -42,7 +42,7 @@ export class BasePositionCalculationStrategy extends VegaSlimmer {
     positionBox.alignment = suitableAlignment;
     positionBox.left += translocationBox.X;
     positionBox.top += translocationBox.Y;
-    if (!this.showConfig.positionRelativeTo) {
+    if (!this.showConfig.positionRelativeTo && this.showConfig.isScreenPosition) {
       this.adjustPositionForViewport(positionBox, elementBox, targetBox, activePlacement);
     }
     return positionBox;

package/dist/collection/helpers/slimmers/position-calculation/test/body-position-calculation-strategy.test.js

@@ -292,7 +292,9 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox).toEqual({ top: 0, left: 200, placement: 'top', alignment: 'start' });
+      // top=-60: target body-relative top(100) - element height(60) - translocation Y(100) = -60
+      // Before fix: viewport clamping coincidentally floored this to max(0,-60)=0. Now correct.
+      expect(positionBox).toEqual({ top: -60, left: 200, placement: 'top', alignment: 'start' });
       const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
@@ -302,7 +304,9 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox2).toEqual({ top: 200, left: 0, placement: 'left', alignment: 'start' });
+      // left=-60: target body-relative left(100) - element width(60) - translocation X(100) = -60
+      // Before fix: viewport clamping coincidentally floored this to max(0,-60)=0. Now correct.
+      expect(positionBox2).toEqual({ top: 200, left: -60, placement: 'left', alignment: 'start' });
     });
     test('return result as expected when container scrolled', () => {
       container.scrollTop = 20;
@@ -311,7 +315,9 @@ describe('component.getPositionBox', () => {
         X: 100,
         Y: 100,
       });
-      expect(positionBox).toEqual({ top: 0, left: 220, placement: 'top', alignment: 'start' });
+      // top=-40: target body-relative top(100+scrollTop20=120) - element height(60) - translocation Y(100) = -40
+      // Before fix: viewport clamping coincidentally floored this to max(0,-40)=0. Now correct.
+      expect(positionBox).toEqual({ top: -40, left: 220, placement: 'top', alignment: 'start' });
       const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
@@ -350,4 +356,44 @@ describe('component.getPositionBox', () => {
       expect(positionBox12).toEqual({ top: 140, left: 200, placement: 'right', alignment: 'end' });
     });
   });
+  describe('viewport clamping must not apply to body-relative positions (VD-8494)', () => {
+    beforeEach(() => {
+      container.style.position = 'relative';
+      container.scrollTop = 0;
+      container.scrollLeft = 0;
+      spyOn(window, 'getComputedStyle').and.returnValue({ position: 'relative' });
+      // Uses the outer beforeAll container mock: { width: 500, height: 500, top: 0, left: 0 }
+      // and scrollHeight/scrollWidth: 500. Target positions are chosen to fit within these bounds.
+    });
+    test('body-relative bottom position should not be clamped to viewport innerHeight', () => {
+      // innerHeight (400) causes keepVerticallyInView to clamp: min(380, 400 - 100) = 300.
+      // After the fix, viewport clamping is skipped for body positioning → top stays 380.
+      Object.assign(window, { innerHeight: 400, innerWidth: 1000 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 200, height: 100 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 200,
+        height: 30,
+        top: 350,
+        left: 100,
+      });
+      // bottom position = 350 + 30 = 380; fits in container (380 + 100 = 480 < scrollHeight 500)
+      const positionBox = component.getPositionBox(container, element, target, 'bottom');
+      expect(positionBox).toEqual({ top: 380, left: 100, placement: 'bottom', alignment: 'start' });
+    });
+    test('body-relative right position should not be clamped to viewport innerWidth', () => {
+      // innerWidth (300) causes keepHorizontallyInView to clamp: min(280, 300 - 100) = 200.
+      // After the fix, viewport clamping is skipped for body positioning → left stays 280.
+      Object.assign(window, { innerHeight: 1000, innerWidth: 300 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 100, height: 100 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 30,
+        height: 50,
+        top: 100,
+        left: 250, // body-relative = 250 (container.left=0)
+      });
+      // right position = 250 + 30 = 280; fits in container (280 + 100 = 380 < scrollWidth 500)
+      const positionBox = component.getPositionBox(container, element, target, 'right');
+      expect(positionBox).toEqual({ top: 100, left: 280, placement: 'right', alignment: 'start' });
+    });
+  });
 });

package/dist/collection/helpers/slimmers/position-calculation/test/screen-position-calculation-strategy.test.js

@@ -237,6 +237,24 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'center',
       });
     });
+    test('does not clamp position when target is fully outside viewport (isTargetInView=false)', () => {
+      // Target is entirely below the viewport bottom edge → isTargetInView returns false
+      // → adjustPositionForViewport returns early without calling keepVerticallyInView.
+      // The raw calculated position is preserved unchanged.
+      Object.assign(window, { innerHeight: 500, innerWidth: 500 });
+      elementRectSpy.mockReturnValue({ width: 50, height: 50 });
+      targetRectSpy.mockReturnValue({
+        width: 100,
+        height: 100,
+        top: 600,
+        left: 100,
+      });
+      const result = component.getPositionBox(container, element, target, ['bottom'], ['start']);
+      // bottom position = 600 + 100 = 700; keepVerticallyInView would clamp → min(700, 450)=450.
+      // Since isTargetInView is false, no clamping occurs → top stays 700.
+      expect(result.top).toBe(700);
+      expect(result.left).toBe(100);
+    });
     describe('positionRelativeTo — viewport adjustment is skipped', () => {
       beforeEach(() => {
         Object.assign(window, { innerHeight: 500, innerWidth: 500 });