@heartlandone/vega 1.3.0 → 1.3.3

package/dist/cjs/{app-globals-3109659d.js → app-globals-d0304093.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const featureFlagController = require('./featureFlagController-0fbc9f6a.js');
+const featureFlagController = require('./featureFlagController-619c8f22.js');
 
 /**
  * Default export function that will be used by stencil global script,

package/dist/cjs/{featureFlagController-0fbc9f6a.js → featureFlagController-619c8f22.js}

@@ -9,6 +9,11 @@ const FeatureFlagsMap = {
     createdTimestamp: 1660330561422,
     createdAtVersion: '1.2.0',
   },
+  'POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE': {
+    description: `Feature flag to enable the new calculate of target position. this change is suitable the case which target have relative parent`,
+    createdTimestamp: 1660800418146,
+    createdAtVersion: '1.3.0',
+  },
 };
 const FeatureFlagsMap$1 = Object.freeze(FeatureFlagsMap);
 

package/dist/cjs/index.cjs.js

@@ -7,7 +7,7 @@ const log = require('./log-7b0974fb.js');
 const typeGuard = require('./typeGuard-162ede83.js');
 const icons = require('./icons-ab5c5f17.js');
 const ui = require('./ui-2ae913d5.js');
-const featureFlagController = require('./featureFlagController-0fbc9f6a.js');
+const featureFlagController = require('./featureFlagController-619c8f22.js');
 require('./number-2eb7b8f3.js');
 
 /* This file is generated by vega-design 2.0.60 */

package/dist/cjs/loader.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e8b771c.js');
-const appGlobals = require('./app-globals-3109659d.js');
-require('./featureFlagController-0fbc9f6a.js');
+const appGlobals = require('./app-globals-d0304093.js');
+require('./featureFlagController-619c8f22.js');
 
 /*
  Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/vega-button_20.cjs.entry.js

@@ -12,6 +12,7 @@ const log = require('./log-7b0974fb.js');
 const array = require('./array-414f6d01.js');
 const ui = require('./ui-2ae913d5.js');
 const typeGuard = require('./typeGuard-162ede83.js');
+const featureFlagController = require('./featureFlagController-619c8f22.js');
 const misc = require('./misc-649f158c.js');
 const icons = require('./icons-ab5c5f17.js');
 const subject = require('./subject-fdccaa01.js');
@@ -1586,7 +1587,7 @@ const getPositionBox = (container, element, target, placement, translocation = {
     log.LogUtility.warn(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
   }
   const placements = getPlacements(placement);
-  const targetBox = getTargetPositionBox(target);
+  const targetBox = getTargetPositionBox(target, container);
   const elementBox = getElementPositionBox(element);
   const containerBox = getContainerPositionBox(container);
   const suitablePlacement = getSuitablePlacement(containerBox, elementBox, targetBox, placements, element);
@@ -1746,18 +1747,26 @@ function hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
   }
 }
 /**
- * It returns an object with the width, height, top, and left properties of the target element
+ * It returns the position of an element relative to its container and also includes the scroll height of container.
  *
- * @param {HTMLElement} target - HTMLElement - The element that you want to get the position of.
+ * @param {HTMLElement} target - The element that you want to position.
+ * @param {HTMLElement} container - The container element that the target element is inside of.
  * @returns {ElementPositionBox} An object with the properties width, height, top, and left.
  */
-function getTargetPositionBox(target) {
+function getTargetPositionBox(target, container) {
+  const containerRect = container.getBoundingClientRect();
   const targetRect = target.getBoundingClientRect();
+  let targetTop = target.offsetTop;
+  let targetLeft = target.offsetLeft;
+  if (featureFlagController.FeatureFlag.isEnabled('POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE')) {
+    targetTop = targetRect.top - containerRect.top + container.scrollTop;
+    targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+  }
   return {
     width: targetRect.width,
     height: targetRect.height,
-    top: target.offsetTop,
-    left: target.offsetLeft,
+    top: targetTop,
+    left: targetLeft,
   };
 }
 /**
@@ -5393,7 +5402,7 @@ let VegaTable = class {
     this.renderRowSelection = (item) => {
       return (index.h("td", { class: "vega-table-selection-column" }, index.h("div", { class: "vega-table-checkbox-wrapper" }, index.h("vega-checkbox", { size: "small", checked: this.isChecked(item.key),
         /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaChange: (e) => this.handleRowSelect(e.detail, item) }))));
+        onVegaChange: (e) => this.handleRowSelect(e.detail, item), onClick: this.stopRowSelectionPropagation }))));
     };
     this.renderSelectionHeader = () => {
       const checkAllDisabled = this.currentData.length === 0;
@@ -5585,6 +5594,9 @@ let VegaTable = class {
     this.handleRowClick = (record, index) => {
       this.vegaRowClick.emit({ record: record, index: index });
     };
+    this.stopRowSelectionPropagation = (e) => {
+      e.stopPropagation();
+    };
   }
   watchCurrentData(currentData) {
     this.syncUpSelectedKeySetWithCurrentData(currentData);

package/dist/cjs/vega.cjs.js

@@ -1,8 +1,8 @@
 'use strict';
 
 const index = require('./index-2e8b771c.js');
-const appGlobals = require('./app-globals-3109659d.js');
-require('./featureFlagController-0fbc9f6a.js');
+const appGlobals = require('./app-globals-d0304093.js');
+require('./featureFlagController-619c8f22.js');
 
 /*
  Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com

package/dist/collection/components/vega-table/vega-table.js

@@ -131,7 +131,7 @@ export class VegaTable {
         h("div", { class: "vega-table-checkbox-wrapper" },
           h("vega-checkbox", { size: "small", checked: this.isChecked(item.key), 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onVegaChange: (e) => this.handleRowSelect(e.detail, item) }))));
+            onVegaChange: (e) => this.handleRowSelect(e.detail, item), onClick: this.stopRowSelectionPropagation }))));
     };
     this.renderSelectionHeader = () => {
       const checkAllDisabled = this.currentData.length === 0;
@@ -324,6 +324,9 @@ export class VegaTable {
     this.handleRowClick = (record, index) => {
       this.vegaRowClick.emit({ record: record, index: index });
     };
+    this.stopRowSelectionPropagation = (e) => {
+      e.stopPropagation();
+    };
   }
   watchCurrentData(currentData) {
     this.syncUpSelectedKeySetWithCurrentData(currentData);

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -7,5 +7,10 @@ const FeatureFlagsMap = {
     createdTimestamp: 1660330561422,
     createdAtVersion: '1.2.0',
   },
+  'POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE': {
+    description: `Feature flag to enable the new calculate of target position. this change is suitable the case which target have relative parent`,
+    createdTimestamp: 1660800418146,
+    createdAtVersion: '1.3.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/ui/test/elementAppender.test.js

@@ -8,10 +8,16 @@ test('return result as expect when call show', () => {
   document.body.innerHTML = innerHTML;
   const element = document.querySelector('.dropdown');
   const target = document.querySelector('.test-host');
-  Object.assign(document.body, { scrollHeight: 500 });
-  Object.assign(document.body, { scrollWidth: 500 });
-  Object.assign(target, { offsetTop: 0 });
-  Object.assign(target, { offsetLeft: 0 });
+  Object.assign(document.body, {
+    scrollHeight: 500,
+    scrollWidth: 500,
+    scrollTop: 0,
+    scrollLeft: 0,
+  });
+  Object.assign(target, {
+    offsetTop: 0,
+    offsetLeft: 0,
+  });
   const drop = new ElementAppender(target, element);
   drop.show({ placement: ['bottom', 'top'] });
   expect(document.body).toEqualHtml(`
@@ -21,9 +27,9 @@ test('return result as expect when call show', () => {
   spyOn(target, 'getBoundingClientRect').and.returnValue({
     width: 120,
     height: 0,
+    top: 120,
+    left: 0,
   });
-  Object.assign(target, { offsetTop: 120 });
-  Object.assign(target, { offsetLeft: 0 });
   drop.show({
     size: 200,
     translocation: { X: 20, Y: 20 },
@@ -51,10 +57,16 @@ test('return result as expect when call hide', () => {
   const element = document.querySelector('.dropdown');
   const target = document.querySelector('.test-host');
   const drop = new ElementAppender(target, element);
-  Object.assign(target, { offsetTop: 0 });
-  Object.assign(target, { offsetLeft: 0 });
-  Object.assign(document.body, { scrollHeight: 500 });
-  Object.assign(document.body, { scrollWidth: 500 });
+  Object.assign(target, {
+    offsetTop: 0,
+    offsetLeft: 0,
+  });
+  Object.assign(document.body, {
+    scrollHeight: 500,
+    scrollWidth: 500,
+    scrollTop: 0,
+    scrollLeft: 0,
+  });
   drop.show({
     placement: ['bottom', 'top'],
   });

package/dist/collection/utils/position.js

@@ -1,6 +1,7 @@
 import { LogUtility } from './log';
 import { Placements } from '../constants/ui';
 import { isTranslocationType } from '../types/typeGuard';
+import { FeatureFlag } from '../helpers/publicApi';
 /**
  * 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.
@@ -22,7 +23,7 @@ export const getPositionBox = (container, element, target, placement, translocat
     LogUtility.warn(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
   }
   const placements = getPlacements(placement);
-  const targetBox = getTargetPositionBox(target);
+  const targetBox = getTargetPositionBox(target, container);
   const elementBox = getElementPositionBox(element);
   const containerBox = getContainerPositionBox(container);
   const suitablePlacement = getSuitablePlacement(containerBox, elementBox, targetBox, placements, element);
@@ -182,18 +183,26 @@ function hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
   }
 }
 /**
- * It returns an object with the width, height, top, and left properties of the target element
+ * It returns the position of an element relative to its container and also includes the scroll height of container.
  *
- * @param {HTMLElement} target - HTMLElement - The element that you want to get the position of.
+ * @param {HTMLElement} target - The element that you want to position.
+ * @param {HTMLElement} container - The container element that the target element is inside of.
  * @returns {ElementPositionBox} An object with the properties width, height, top, and left.
  */
-function getTargetPositionBox(target) {
+function getTargetPositionBox(target, container) {
+  const containerRect = container.getBoundingClientRect();
   const targetRect = target.getBoundingClientRect();
+  let targetTop = target.offsetTop;
+  let targetLeft = target.offsetLeft;
+  if (FeatureFlag.isEnabled('POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE')) {
+    targetTop = targetRect.top - containerRect.top + container.scrollTop;
+    targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+  }
   return {
     width: targetRect.width,
     height: targetRect.height,
-    top: target.offsetTop,
-    left: target.offsetLeft,
+    top: targetTop,
+    left: targetLeft,
   };
 }
 /**

package/dist/collection/utils/test/position.test.js

@@ -1,3 +1,4 @@
+import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
 import { getPositionBox } from '../../utils/position';
 describe('getPositionBox', () => {
   const innerHTML = `
@@ -37,8 +38,6 @@ describe('getPositionBox', () => {
   describe('directions', () => {
     beforeEach(() => {
       container.style.position = 'relative';
-      Object.assign(target, { offsetTop: 100 });
-      Object.assign(target, { offsetLeft: 100 });
       spyOn(window, 'getComputedStyle').and.returnValue({ position: 'relative' });
     });
     test('return result as expected when with array placement', () => {
@@ -46,6 +45,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
       const positionBox = getPositionBox(container, element, target, [
         'left',
@@ -59,6 +60,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
       const positionBox = getPositionBox(container, element, target);
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top' });
@@ -68,6 +71,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
       let positionBox;
       positionBox = getPositionBox(container, element, target, 'left');
@@ -84,6 +89,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 80,
+        left: 80,
       });
       let positionBox;
       container.scrollTop = 20;
@@ -102,6 +109,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
       const positionBox = getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left' });
@@ -111,6 +120,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
       const positionBox = getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom' });
@@ -120,6 +131,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 300,
+        top: 100,
+        left: 100,
       });
       const positionBox = getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right' });
@@ -131,9 +144,9 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 200,
         height: 200,
+        top: 200,
+        left: 200,
       });
-      Object.assign(target, { offsetTop: 200 });
-      Object.assign(target, { offsetLeft: 200 });
       const positionBox = getPositionBox(container, element, target, [
         'bottom',
         'top',
@@ -149,6 +162,8 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 1024,
         height: 1024,
+        top: 100,
+        left: 100,
       });
       Object.assign(target, { offsetTop: 0 });
       Object.assign(target, { offsetLeft: 0 });
@@ -163,9 +178,9 @@ describe('getPositionBox', () => {
       mockElementReturn(target, 'getBoundingClientRect', {
         width: 100,
         height: 100,
+        top: 100,
+        left: 100,
       });
-      Object.assign(target, { offsetTop: 100 });
-      Object.assign(target, { offsetLeft: 100 });
     });
     test('return result as expected when container not scrolled', () => {
       const positionBox = getPositionBox(container, element, target, 'top', {
@@ -184,6 +199,226 @@ describe('getPositionBox', () => {
       });
       expect(positionBox2).toEqual({ top: 200, left: -60, placement: 'left' });
     });
+    test('return result as expected when container scrolled', () => {
+      container.scrollTop = 20;
+      container.scrollLeft = 20;
+      const positionBox = getPositionBox(container, element, target, 'top', {
+        X: 100,
+        Y: 100,
+      });
+      expect(positionBox).toEqual({ top: -40, left: 220, placement: 'top' });
+      const positionBox1 = getPositionBox(container, element, target, 'right', {
+        X: 100,
+        Y: 100,
+      });
+      expect(positionBox1).toEqual({ top: 220, left: 320, placement: 'right' });
+    });
+    test('return result as expected when translocation set', () => {
+      const positionBox1 = getPositionBox(container, element, target, 'bottom', {
+        X: 'start',
+        Y: 'start',
+      });
+      expect(positionBox1).toEqual({ top: 200, left: 100, placement: 'bottom' });
+      const positionBox2 = getPositionBox(container, element, target, 'bottom', {
+        X: 'center',
+        Y: 'center',
+      });
+      expect(positionBox2).toEqual({ top: 200, left: 120, placement: 'bottom' });
+      const positionBox3 = getPositionBox(container, element, target, 'bottom', {
+        X: 'end',
+        Y: 'end',
+      });
+      expect(positionBox3).toEqual({ top: 200, left: 140, placement: 'bottom' });
+      const positionBox4 = getPositionBox(container, element, target, 'top', {
+        X: 'start',
+        Y: 'start',
+      });
+      expect(positionBox4).toEqual({ top: 40, left: 100, placement: 'top' });
+      const positionBox5 = getPositionBox(container, element, target, 'top', {
+        X: 'center',
+        Y: 'center',
+      });
+      expect(positionBox5).toEqual({ top: 40, left: 120, placement: 'top' });
+      const positionBox6 = getPositionBox(container, element, target, 'top', {
+        X: 'end',
+        Y: 'end',
+      });
+      expect(positionBox6).toEqual({ top: 40, left: 140, placement: 'top' });
+      const positionBox7 = getPositionBox(container, element, target, 'left', {
+        X: 'start',
+        Y: 'start',
+      });
+      expect(positionBox7).toEqual({ top: 100, left: 40, placement: 'left' });
+      const positionBox8 = getPositionBox(container, element, target, 'left', {
+        X: 'center',
+        Y: 'center',
+      });
+      expect(positionBox8).toEqual({ top: 120, left: 40, placement: 'left' });
+      const positionBox9 = getPositionBox(container, element, target, 'left', {
+        X: 'end',
+        Y: 'end',
+      });
+      expect(positionBox9).toEqual({ top: 140, left: 40, placement: 'left' });
+      const positionBox10 = getPositionBox(container, element, target, 'right', {
+        X: 'start',
+        Y: 'start',
+      });
+      expect(positionBox10).toEqual({ top: 100, left: 200, placement: 'right' });
+      const positionBox11 = getPositionBox(container, element, target, 'right', {
+        X: 'center',
+        Y: 'center',
+      });
+      expect(positionBox11).toEqual({ top: 120, left: 200, placement: 'right' });
+      const positionBox12 = getPositionBox(container, element, target, 'right', {
+        X: 'end',
+        Y: 'end',
+      });
+      expect(positionBox12).toEqual({ top: 140, left: 200, placement: 'right' });
+    });
+  });
+  // POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE
+  describe("return result as expected when disabled feature flag 'POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE'", () => {
+    beforeAll(() => {
+      FeatureFlag.disable('POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE');
+    });
+    beforeEach(() => {
+      container.style.position = 'relative';
+      Object.assign(target, { offsetTop: 100 });
+      Object.assign(target, { offsetLeft: 100 });
+      spyOn(window, 'getComputedStyle').and.returnValue({ position: 'relative' });
+    });
+    test('return result as expected when with array placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      const positionBox = getPositionBox(container, element, target, [
+        'left',
+        'bottom',
+        'right',
+      ]);
+      expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left' });
+    });
+    test('return result as expected when without placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      const positionBox = getPositionBox(container, element, target);
+      expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top' });
+    });
+    test('return result as expected when with single placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      let positionBox;
+      positionBox = getPositionBox(container, element, target, 'left');
+      expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left' });
+      positionBox = getPositionBox(container, element, target, 'top');
+      expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top' });
+      positionBox = getPositionBox(container, element, target, 'right');
+      expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right' });
+      positionBox = getPositionBox(container, element, target, 'bottom');
+      expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom' });
+    });
+    test('return result as expected when container scroll', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      let positionBox;
+      container.scrollTop = 20;
+      container.scrollLeft = 20;
+      positionBox = getPositionBox(container, element, target, 'left');
+      expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left' });
+      positionBox = getPositionBox(container, element, target, 'top');
+      expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top' });
+      positionBox = getPositionBox(container, element, target, 'right');
+      expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right' });
+      positionBox = getPositionBox(container, element, target, 'bottom');
+      expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom' });
+    });
+    test('return result as expected when top have not enough placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 120 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      const positionBox = getPositionBox(container, element, target, 'top');
+      expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left' });
+    });
+    test('return result as expected when top and left have not enough placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 120, height: 120 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      const positionBox = getPositionBox(container, element, target, 'top');
+      expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom' });
+    });
+    test('return result as expected when top, left and bottom have not enough placement', () => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 120, height: 120 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 300,
+      });
+      Object.assign(container, { scrollHeight: 500 });
+      Object.assign(container, { scrollWidth: 500 });
+      const positionBox = getPositionBox(container, element, target, 'top');
+      expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right' });
+    });
+    test('return result as expected when container scrollHeight/scrollWidth is big than body scrollHeight/scrollWidth', () => {
+      Object.assign(container, { scrollHeight: 530 });
+      Object.assign(container, { scrollWidth: 530 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 120, height: 120 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 200,
+        height: 200,
+      });
+      Object.assign(target, { offsetTop: 200 });
+      Object.assign(target, { offsetLeft: 200 });
+      const positionBox = getPositionBox(container, element, target, [
+        'bottom',
+        'top',
+      ]);
+      expect(positionBox).toEqual({ top: 400, left: 200, placement: 'bottom' });
+      const positionBox1 = getPositionBox(container, element, target, [
+        'right',
+        'left',
+      ]);
+      expect(positionBox1).toEqual({ top: 200, left: 400, placement: 'right' });
+    });
+    test('return result as expected when without enough placement', () => {
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 1024,
+        height: 1024,
+      });
+      Object.assign(target, { offsetTop: 0 });
+      Object.assign(target, { offsetLeft: 0 });
+      console.warn = jest.fn();
+      getPositionBox(container, target, element);
+      expect(console.warn).toBeCalled();
+    });
+  });
+  // POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE
+  describe("return result as expected when disabled feature flag 'POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE'", () => {
+    beforeAll(() => {
+      FeatureFlag.disable('POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE');
+    });
+    beforeAll(() => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 60, height: 60 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+      });
+      Object.assign(target, { offsetTop: 100 });
+      Object.assign(target, { offsetLeft: 100 });
+    });
     test('return result as expected when container scrolled', () => {
       container.scrollTop = 20;
       container.scrollLeft = 20;

package/dist/esm/{app-globals-88f422e9.js → app-globals-0bb1611b.js}

@@ -1,4 +1,4 @@
-import { F as FeatureFlag } from './featureFlagController-2a73d90d.js';
+import { F as FeatureFlag } from './featureFlagController-c4da7f0a.js';
 
 /**
  * Default export function that will be used by stencil global script,

package/dist/esm/{featureFlagController-2a73d90d.js → featureFlagController-c4da7f0a.js}

@@ -7,6 +7,11 @@ const FeatureFlagsMap = {
     createdTimestamp: 1660330561422,
     createdAtVersion: '1.2.0',
   },
+  'POSITION.FIX_TARGET_POSITION_WHEN_PARENT_IS_RELATIVE': {
+    description: `Feature flag to enable the new calculate of target position. this change is suitable the case which target have relative parent`,
+    createdTimestamp: 1660800418146,
+    createdAtVersion: '1.3.0',
+  },
 };
 const FeatureFlagsMap$1 = Object.freeze(FeatureFlagsMap);
 

package/dist/esm/index.js

@@ -3,7 +3,7 @@ export { L as LogUtility } from './log-374f2d69.js';
 export { b as BackgroundColors, c as BorderColors, B as BorderRadius, a as Breakpoints, C as Colors, S as Shadows, d as Spacing, T as TextColors } from './typeGuard-edb77afc.js';
 export { I as Icons, g as getIconFromToken } from './icons-08b1359e.js';
 export { B as BreakpointKeys } from './ui-7e43c621.js';
-export { F as FeatureFlag } from './featureFlagController-2a73d90d.js';
+export { F as FeatureFlag } from './featureFlagController-c4da7f0a.js';
 import './number-930a4cd6.js';
 
 /* This file is generated by vega-design 2.0.60 */

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-35aa4542.js';
-import { g as globalScripts } from './app-globals-88f422e9.js';
-import './featureFlagController-2a73d90d.js';
+import { g as globalScripts } from './app-globals-0bb1611b.js';
+import './featureFlagController-c4da7f0a.js';
 
 /*
  Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com