@heartlandone/vega 2.75.1 → 2.76.0

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

@@ -6,10 +6,83 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField } from 'vega-slimmer/core';
 import { BasePositionCalculationStrategy } from './base-position-calculation-strategy';
+import { ScreenScrollPositionUpdate } from './screen-scroll-position-update';
+import { tryGetDocument } from '../../../utils/try-get-document';
+import { FeatureFlag } from '../../feature-control/feature-flag-controller';
 /**
  * calculate position by screen container
  */
 export class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy {
+  constructor() {
+    super(...arguments);
+    this.scrollFrameRequestId = null;
+    this.usePreviousPlacement = false;
+    this.scrollPositionUpdateStrategy = new ScreenScrollPositionUpdate();
+  }
+  /**
+   * For screen-positioned appendable we may get a lot of scroll events.
+   * This hook throttles the check with requestAnimationFrame and only allows an adjust when
+   * the strategy determines we should update.
+   *
+   * @returns {boolean} True when controller should perform a position adjustment.
+   */
+  shouldAdjustPosition() {
+    if (this.scrollFrameRequestId !== null) {
+      return false;
+    }
+    if (!FeatureFlag.isEnabled('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT')) {
+      this.usePreviousPlacement = true;
+      return true;
+    }
+    if (!this.previousTargetRect) {
+      this.previousTargetRect = this.showConfig.target.getBoundingClientRect();
+      this.usePreviousPlacement = false;
+      return true;
+    }
+    /**
+     * This avoids doing expensive DOM reads on every scroll event, while still
+     * updating placement/alignment when the trigger moves and the appendable
+     * would be clipped by the viewport (auto placement).
+     *
+     * The below method is e2e-test covered in @see{module:the-screen-position-scroll-RAFCallback-trigger-as-expected}
+     */
+    /* istanbul ignore next */
+    this.scrollFrameRequestId = requestAnimationFrame(() => {
+      var _a;
+      this.scrollFrameRequestId = null;
+      let viewportWidth = window.innerWidth;
+      let viewportHeight = window.innerHeight;
+      if (this.showConfig.positionRelativeTo) {
+        const containerDom = (_a = tryGetDocument()) === null || _a === void 0 ? void 0 : _a.querySelector(this.showConfig.positionRelativeTo);
+        if (containerDom) {
+          viewportWidth = containerDom.getBoundingClientRect().width;
+          viewportHeight = containerDom.getBoundingClientRect().height;
+        }
+      }
+      const currentTargetRect = this.showConfig.target.getBoundingClientRect();
+      const appendableRect = this.showConfig.appendableElement.getBoundingClientRect();
+      const { shouldUpdate } = this.scrollPositionUpdateStrategy.shouldUpdatePosition({
+        currentTargetRect,
+        previousTargetRect: this.previousTargetRect,
+        appendableRect,
+        viewportWidth,
+        viewportHeight,
+      });
+      this.usePreviousPlacement = !shouldUpdate;
+      this.previousTargetRect = currentTargetRect;
+    });
+    return true;
+  }
+  /**
+   * Clears any pending scroll animation frame callback.
+   * Call this when popover is hidden/destroyed to avoid leaks and stale callbacks.
+   */
+  clearScrollFrame() {
+    if (this.scrollFrameRequestId !== null) {
+      cancelAnimationFrame(this.scrollFrameRequestId);
+      this.scrollFrameRequestId = null;
+    }
+  }
   /**
    * Get the position of the element in the container according to the target element and the placement
    * If give a translocation, it will apply the translocation to the result.
@@ -19,7 +92,8 @@ export class ScreenPositionCalculationStrategy extends BasePositionCalculationSt
    * returns an ElementPositionBox.
    */
   getPosition(usePreviousPlacement) {
-    const positionBox = usePreviousPlacement
+    const stayPlacement = usePreviousPlacement ? this.usePreviousPlacement : false;
+    const positionBox = stayPlacement
       ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
       : this.getPositionBox();
     this.previousPositionBox = positionBox;
@@ -53,6 +127,43 @@ export class ScreenPositionCalculationStrategy extends BasePositionCalculationSt
       height: window.innerHeight,
     };
   }
+  /**
+   * Whether the alignment space is enough
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PlacementType} alignment - The alignment of the element relative to the target.
+   * @returns {boolean} return true if it has enough space, otherwise false
+   */
+  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
+    const left = this.calculateLeft(elementBox, targetBox, placement, alignment);
+    const top = this.calculateTop(elementBox, targetBox, placement, alignment);
+    return (left >= 0 &&
+      top >= 0 &&
+      left + elementBox.width <= containerBox.width &&
+      top + elementBox.height <= containerBox.height);
+  }
+  /**
+   * Screen-specific suitable placement selection.
+   * Tries to find a placement that has enough alignment space within the viewport first,
+   * otherwise falls back to the base strategy.
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container.
+   * @param {ElementBoundBox} elementBox - The box of the element to place.
+   * @param {ElementBoundBox} targetBox - The box of the target element.
+   * @param {PlacementType[]} placements - Ordered list of placements to try.
+   * @returns {PlacementType} The chosen placement.
+   */
+  getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
+    const alignments = this.getAlignments();
+    const suitablePlacement = placements.find((placement) => alignments.some((alignment) => this.hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment)));
+    if (suitablePlacement) {
+      return suitablePlacement;
+    }
+    return super.getSuitablePlacement(containerBox, elementBox, targetBox, placements);
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/helpers/slimmers/position-calculation/screen-scroll-position-update.js

@@ -0,0 +1,53 @@
+/**
+ * Updates position on scroll When the target rect changes, we recompute placement/alignment.
+ */
+export class ScreenScrollPositionUpdate {
+  constructor() {
+    this.viewportWidth = window.innerWidth;
+    this.viewportHeight = window.innerHeight;
+  }
+  /**
+   * Determines whether the appendable element's position should update on scroll.
+   *
+   * @param {ScrollPositionUpdateStrategyContext} context - Current/previous rectangles plus viewport size.
+   * @returns {ScrollPositionUpdateDecision} Decision that indicates whether to recompute position.
+   */
+  shouldUpdatePosition(context) {
+    const { previousTargetRect, currentTargetRect, appendableRect, viewportWidth, viewportHeight, } = context;
+    this.viewportWidth = viewportWidth;
+    this.viewportHeight = viewportHeight;
+    const targetChanged = !previousTargetRect ||
+      currentTargetRect.left !== previousTargetRect.left ||
+      currentTargetRect.top !== previousTargetRect.top;
+    const isTargetWithinViewport = !this.isRectOutsideViewport(currentTargetRect);
+    const isAppendableNotEntirelyInViewport = !this.isRectEntirelyWithinViewport(appendableRect);
+    return {
+      shouldUpdate: targetChanged && isTargetWithinViewport && isAppendableNotEntirelyInViewport,
+    };
+  }
+  /**
+   * Whether the rect is fully within the viewport bounds.
+   *
+   * @param {DOMRect} rect - The DOMRect to check.
+   * @returns {boolean} True when rect is fully within the viewport.
+   */
+  isRectEntirelyWithinViewport(rect) {
+    return (rect.left >= 0 &&
+      rect.top >= 0 &&
+      rect.right <= this.viewportWidth &&
+      rect.bottom <= this.viewportHeight);
+  }
+  /**
+   * Whether the element is fully outside the viewport.
+   * If true, the rect has "disappeared" from the viewport.
+   *
+   * @param {DOMRect} rect - The DOMRect to check.
+   * @returns {boolean} True when rect is completely outside viewport bounds.
+   */
+  isRectOutsideViewport(rect) {
+    return (rect.right <= 0 ||
+      rect.bottom <= 0 ||
+      rect.left >= this.viewportWidth ||
+      rect.top >= this.viewportHeight);
+  }
+}

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

@@ -1,7 +1,6 @@
 import { PositionCalculationMockedComponent } from './body-position-calculation-strategy.test';
+import { ScreenScrollPositionUpdate } from '../screen-scroll-position-update';
 describe('BodyPositionCalculationStrategy.getPositionBox', () => {
-  const component = new PositionCalculationMockedComponent();
-  component.setIsScreenPosition(true);
   const innerHTML = `
 	<div class='container'>
         <div class='target'> test target </div>
@@ -20,6 +19,11 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
     Object.assign(window, { innerHeight: 500 });
   });
   describe('directions', () => {
+    let component;
+    beforeEach(() => {
+      component = new PositionCalculationMockedComponent();
+      component.setIsScreenPosition(true);
+    });
     beforeAll(() => {
       mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
       mockElementReturn(target, 'getBoundingClientRect', {
@@ -29,19 +33,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         left: 100,
       });
     });
-    test('return result as expected in top', () => {
+    test('return result as expected in top-start', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
         top: 50,
         left: 100,
         placement: 'top',
         alignment: 'start',
       });
+    });
+    test('return result as expected in top-center', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['center'])).toEqual({
         top: 50,
         left: 125,
         placement: 'top',
         alignment: 'center',
       });
+    });
+    test('return result as expected in top-end', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['end'])).toEqual({
         top: 50,
         left: 150,
@@ -49,19 +57,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in left', () => {
+    test('return result as expected in left-start', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['start'])).toEqual({
         top: 100,
         left: 50,
         placement: 'left',
         alignment: 'start',
       });
+    });
+    test('return result as expected in left-center', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['center'])).toEqual({
         top: 125,
         left: 50,
         placement: 'left',
         alignment: 'center',
       });
+    });
+    test('return result as expected in left-end', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['end'])).toEqual({
         top: 150,
         left: 50,
@@ -69,19 +81,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in bottom', () => {
+    test('return result as expected in bottom-start', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
         top: 200,
         left: 100,
         placement: 'bottom',
         alignment: 'start',
       });
+    });
+    test('return result as expected in bottom-center', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['center'])).toEqual({
         top: 200,
         left: 125,
         placement: 'bottom',
         alignment: 'center',
       });
+    });
+    test('return result as expected in bottom-end', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['end'])).toEqual({
         top: 200,
         left: 150,
@@ -89,19 +105,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in right', () => {
+    test('return result as expected in right-start', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['start'])).toEqual({
         top: 100,
         left: 200,
         placement: 'right',
         alignment: 'start',
       });
+    });
+    test('return result as expected in right-center', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['center'])).toEqual({
         top: 125,
         left: 200,
         placement: 'right',
         alignment: 'center',
       });
+    });
+    test('return result as expected in right-end', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['end'])).toEqual({
         top: 150,
         left: 200,
@@ -111,3 +131,80 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
     });
   });
 });
+describe('ScreenScrollPositionUpdate.shouldUpdatePosition', () => {
+  function makeRect(bounds) {
+    var _a, _b;
+    const width = (_a = bounds.width) !== null && _a !== void 0 ? _a : bounds.right - bounds.left;
+    const height = (_b = bounds.height) !== null && _b !== void 0 ? _b : bounds.bottom - bounds.top;
+    return {
+      x: bounds.left,
+      y: bounds.top,
+      left: bounds.left,
+      top: bounds.top,
+      right: bounds.right,
+      bottom: bounds.bottom,
+      width,
+      height,
+      toJSON: () => ({}),
+    };
+  }
+  test('returns shouldUpdate=true when target moved, target is within viewport, and appendable is not entirely within viewport', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 110, right: 200, bottom: 210 });
+    // Appendable is partially outside viewport (bottom > viewportHeight)
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: true });
+  });
+  test('returns shouldUpdate=false when target did not move', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+  test('returns shouldUpdate=false when target moved but is outside viewport', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    // Target moved fully outside viewport (top >= viewportHeight)
+    const currentTargetRect = makeRect({ left: 100, top: 600, right: 200, bottom: 700 });
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+  test('returns shouldUpdate=false when appendable is entirely within viewport even if target moved', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 110, right: 200, bottom: 210 });
+    // Appendable fully inside viewport
+    const appendableRect = makeRect({ left: 100, top: 300, right: 200, bottom: 350 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+});

package/dist/collection/helpers/slimmers/string-input-formatter-slimmer.js

@@ -9,7 +9,7 @@ import { isNonNullable } from '../../types/type-guard';
 import ChangeManager from '../change-manager/change-manager';
 import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender, VegaInternalPasteEvent, } from '../event-manager/event-id/vega-internal-event-id';
-import { waitForComponentDidRender } from '../common';
+import { waitForComponentDidRender } from '../common/wait-for-component-did-render';
 /** The `StringInputFormatterSlimmer` class in TypeScript is used to format input values based on specified strategies and handle events like keydown, blur, and focus. */
 export class StringInputFormatterSlimmer extends VegaSlimmer {
   constructor() {

package/dist/collection/helpers/slimmers/translation/translation-slimmer.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { VegaInternalTranslation } from '../../translation';
+import { VegaInternalTranslation } from '../../translation/internal-translation-controller';
 /**
  * Translation slimmer for components to use.
  * Automatically triggers re-render in components that rely on this utility when the language changes.

package/dist/collection/helpers/theme/controllers/brand-style-controller.js

@@ -6,6 +6,7 @@ import ChangeManager from '../../change-manager/change-manager';
 import { DARK_MODE_CHANGE, GP_BRAND_CHANGE, } from '../../change-manager/subject/static-subject/static-subject-title';
 import { VegaInternalThemeManager } from '../internal-theme-manager';
 import { StyleControllerAbstract } from './style-controller.abstract';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 /**
  * Vega components brand style controller
  */
@@ -34,9 +35,10 @@ class BrandStyleController extends StyleControllerAbstract {
   generateThemeStyle() {
     this.tokens = Object.assign(LightModeColorTokens, LightModeBorderTokens, LightModeShadowTokens);
     const keys = Object.keys(this.tokens);
-    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = `
+    const styleString = `
 :root {
 \t\t${keys.map((key) => `--v-${key}: ${this.tokens[key]};`).join('\n\t\t')}}`;
+    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /**
    * Determines whether the observer should accept changes.

package/dist/collection/helpers/theme/controllers/color-schema-overriding-controller.js

@@ -1,8 +1,9 @@
-import tinycolor from 'tinycolor2';
+import { tinycolor } from '../../../polyfill/tinycolor/tinycolor-polyfill';
 import { OverridableColorTokens } from '../../../constants/tokens/overridable-color-tokens';
 import { OverridableBorderTokens } from '../../../constants/tokens/overridable-border-tokens';
 import { OverridableRingTokens } from '../../../constants/tokens/overridable-ring-tokens';
 import { vegaNonceManager } from '../../csp/vega-nonce-manager';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 /**
  * Vega components color override controller
  */
@@ -27,16 +28,17 @@ class ColorSchemaOverridingController {
    * @param {OverrideColor[]} overrideThemes Parsed custom override colors
    */
   applyTheme(overrideThemes) {
-    this.getOverrideThemeContainer().innerHTML = `
-:root {
-\t\t${overrideThemes
+    const styleString = `
+		:root {
+		\t\t${overrideThemes
       .filter((item) => {
       return !!item.value;
     })
       .map((item) => `--v-${item.name}: ${item.value};`)
       .join('\n\t\t')}
-}
-				`;
+		}
+						`;
+    this.getOverrideThemeContainer().innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /* eslint-disable no-restricted-globals */
   /**

package/dist/collection/helpers/theme/controllers/dark-mode-style-controller.js

@@ -11,6 +11,7 @@ import ChangeManager from '../../change-manager/change-manager';
 import { Observer } from '../../change-manager/observer/observer';
 import { VegaInternalThemeManager } from '../internal-theme-manager';
 import { StyleControllerAbstract } from './style-controller.abstract';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 // TODO: Remove this after the token add in vega design.
 const CustomDarkModeColorTokens = {
   'bg-backdrop-loading': '0, 0, 0, 0.5',
@@ -57,9 +58,10 @@ class DarkModeStyleController extends StyleControllerAbstract {
     const oldTokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens);
     this.darkModeColorAllTokens = Object.assign(VegaInternalThemeManager.getBranding() === 'heartland' ? oldTokens : newBrandTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
     const keys = Object.keys(this.darkModeColorAllTokens);
-    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = `
+    const styleString = `
 html.dark {
 \t\t${keys.map((key) => `--v-${key}: ${this.darkModeColorAllTokens[key]};`).join('\n\t\t')}}`;
+    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /**
    * Determines whether the observer should accept changes.

package/dist/collection/helpers/theme/internal-theme-manager.js

@@ -3,6 +3,7 @@ import './controllers/dark-mode-style-controller';
 import ChangeManager from '../change-manager/change-manager';
 import { DARK_MODE_CHANGE, GP_BRAND_CHANGE, } from '../change-manager/subject/static-subject/static-subject-title';
 import './controllers/brand-style-controller';
+import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
  * Vega components controller to control the internal theme manager
  */
@@ -23,7 +24,7 @@ class InternalThemeManager {
    * It removes all the custom override theme styles from the DOM
    */
   reset() {
-    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = '';
+    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
   }
   /* eslint-disable no-restricted-globals */
   /**

package/dist/collection/helpers/theme/tests/theme-manager-controller.test.js

@@ -308,8 +308,7 @@ describe('Dark mode', () => {
     var _a;
     VegaThemeManager.toggleDarkMode(true);
     expect((_a = document.head.querySelector('#vegaDarkModeStyle')) === null || _a === void 0 ? void 0 : _a.textContent).toMatchInlineSnapshot(`
-		"
-		html.dark {
+		"html.dark {
 				--v-bg-brand: 176, 180, 181, 1;
 				--v-bg-page: 24, 24, 48, 1;
 				--v-bg-primary: 4, 4, 28, 1;

package/dist/collection/helpers/ui/element-appender.js

@@ -71,6 +71,7 @@ export class ElementAppender {
    * @returns {void} Nothing is being returned.
    */
   show() {
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.setShowConfig();
     if (!this.showConfig.target) {
       LogUtility.error(`No target element found, please add it at new elementAppender.`);
@@ -94,6 +95,7 @@ export class ElementAppender {
   hide() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.toggleShow(false);
     this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
@@ -102,11 +104,7 @@ export class ElementAppender {
    * Update position while window scroll.
    */
   onScroll() {
-    var _a;
-    const currentTargetRect = this.showConfig.target.getBoundingClientRect();
-    if (this.showConfig.isScreenPosition &&
-      (currentTargetRect.left !== ((_a = this.previousTargetRect) === null || _a === void 0 ? void 0 : _a.left) ||
-        currentTargetRect.top !== this.previousTargetRect.top)) {
+    if (this.showConfig.isScreenPosition) {
       this.adjustPosition(true);
     }
   }
@@ -118,6 +116,7 @@ export class ElementAppender {
   destroy() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.removeVisibleAppendElement(this.showConfig.appendableElement);
     this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -1,5 +1,6 @@
 import { LogUtility } from '../../../utils/log';
 import { ElementAppender } from '../element-appender';
+import { FeatureFlag } from '../../feature-control/feature-flag-controller';
 const innerHTML = `<div class='test-parent-host'><div class='test-host'><div class='dropdown'></div></div></div>`;
 test('return result as expect when call show', () => {
   document.body.innerHTML = innerHTML;
@@ -448,21 +449,41 @@ describe('screen position', () => {
       isScreenPosition: true,
     });
     drop1.show();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
-		`);
-    drop1['previousTargetRect'] = {
-      left: 10,
-      top: 10,
-    };
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 40,
+      left: 100,
+    });
     drop1.onScroll();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
-		`);
-    drop1['previousTargetRect'] = {
+    expect(element).toHaveClass('vega-placement-bottom');
+    expect(element.style.top).toEqual('140px');
+  });
+  test('should auto placement when body is scroll', () => {
+    const callbacks = [];
+    spyOn(FeatureFlag, 'isEnabled').and.returnValue(true);
+    spyOn(window, 'requestAnimationFrame').and.callFake((callback) => {
+      callbacks.push(callback);
+      return callbacks.length;
+    });
+    const targetRectSpyOn = spyOn(target, 'getBoundingClientRect');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 100,
       left: 100,
-      top: 10,
-    };
+    });
+    const drop1 = new ElementAppender({
+      target: target,
+      appendableElement: element,
+      placement: ['top', 'bottom'],
+      isScreenPosition: true,
+    });
+    drop1.show();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
     targetRectSpyOn.and.returnValue({
       width: 100,
       height: 100,
@@ -470,10 +491,38 @@ describe('screen position', () => {
       left: 100,
     });
     drop1.onScroll();
-    drop1['previousTargetRect'] = undefined;
     drop1.onScroll();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
-		`);
+    callbacks.forEach((callback) => callback(0));
+    expect(element).toHaveClass('vega-placement-bottom');
+    expect(element.style.top).toEqual('140px');
+    drop1.hide();
+  });
+  test('should not change placement when body is scroll and FeatureFlag is disabled', () => {
+    FeatureFlag.disable('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT');
+    const targetRectSpyOn = spyOn(target, 'getBoundingClientRect');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+    });
+    const drop1 = new ElementAppender({
+      target: target,
+      appendableElement: element,
+      placement: ['top', 'bottom'],
+      isScreenPosition: true,
+    });
+    drop1.show();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 40,
+      left: 100,
+    });
+    drop1.onScroll();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('-10px');
   });
 });

package/dist/collection/index.js

@@ -4,3 +4,5 @@ export * from './constants/public-api';
 export * from './helpers/public-api';
 export * from './types/public-api';
 export * from './helpers/validator/public-rules';
+export { VegaRTEContent } from './components/vega-rich-text-editor/dto/content-state';
+export * from './components/vega-rich-text-editor/public-api';

package/dist/collection/polyfill/prism/index.js

@@ -0,0 +1,2 @@
+export { tokenize } from './tokenizer';
+export { getLanguageGrammar } from './languages/language-registry';