From 94e641ea1eb1e059b91e778bcda060dc85a8cf3d Mon Sep 17 00:00:00 2001
From: Derrick Greyvensteyn <derrick.greyvensteyn@ebury.com>
Date: Mon, 5 Dec 2022 11:28:18 +0000
Subject: [PATCH] ONL-7032 Adds popover inject functionality (#1375)

* Adds popover inject functionality

* Expose overlayContent container

* Added overlay expose test

* Added export of Symbol

* 2.1.29
---
 package-lock.json                                  |  4 ++--
 package.json                                       |  2 +-
 .../ec-full-screen-overlay.spec.js                 |  9 +++++++++
 .../ec-full-screen-overlay.vue                     |  8 ++++++++
 .../__snapshots__/ec-popover.spec.js.snap          | 13 +++++++++++++
 src/components/ec-popover/ec-popover-provide.js    |  1 +
 src/components/ec-popover/ec-popover.spec.js       | 14 ++++++++++++++
 src/components/ec-popover/ec-popover.vue           |  8 ++++++--
 src/main.js                                        |  1 +
 9 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ec-popover/ec-popover-provide.js

diff --git a/package-lock.json b/package-lock.json
index 843d79262..0f9e947e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.1.28",
+      "version": "2.1.29",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "9.2.0",
diff --git a/package.json b/package.json
index 252b0b6f2..53facef37 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-full-screen-overlay/ec-full-screen-overlay.spec.js b/src/components/ec-full-screen-overlay/ec-full-screen-overlay.spec.js
index 5fc633c0b..90802f01e 100644
--- a/src/components/ec-full-screen-overlay/ec-full-screen-overlay.spec.js
+++ b/src/components/ec-full-screen-overlay/ec-full-screen-overlay.spec.js
@@ -39,6 +39,15 @@ describe('EcFullScreenOverlay', () => {
     expect(document.activeElement).toEqual(wrapper.findByDataTest('ec-full-screen-overlay__close-icon-btn').element);
   });
 
+  describe('defineExpose', () => {
+    it('should return the container that was exposed', () => {
+      const wrapper = mountFullScreenOverlay();
+      const container = wrapper.vm.getFocusTrapContainer();
+      const { overlayContent } = wrapper.vm;
+      expect(container).toEqual(overlayContent);
+    });
+  });
+
   describe(':props', () => {
     it(':show - should not render the overlay when is false', () => {
       const wrapper = mountFullScreenOverlay({ show: false });
diff --git a/src/components/ec-full-screen-overlay/ec-full-screen-overlay.vue b/src/components/ec-full-screen-overlay/ec-full-screen-overlay.vue
index 691519f6c..7aaea320f 100644
--- a/src/components/ec-full-screen-overlay/ec-full-screen-overlay.vue
+++ b/src/components/ec-full-screen-overlay/ec-full-screen-overlay.vue
@@ -80,6 +80,14 @@ const { deactivate } = useFocusTrap(overlayContent, {
   allowOutsideClick: true,
 });
 
+function getFocusTrapContainer() {
+  return overlayContent.value;
+}
+
+defineExpose({
+  getFocusTrapContainer,
+});
+
 onUnmounted(() => {
   deactivate();
 });
diff --git a/src/components/ec-popover/__snapshots__/ec-popover.spec.js.snap b/src/components/ec-popover/__snapshots__/ec-popover.spec.js.snap
index ce470be43..b4e369610 100644
--- a/src/components/ec-popover/__snapshots__/ec-popover.spec.js.snap
+++ b/src/components/ec-popover/__snapshots__/ec-popover.spec.js.snap
@@ -10,6 +10,19 @@ exports[`EcPopover component should add the z-index level class if the level was
 >
   
   
+</fv-dropdown-stub>
+`;
+
+exports[`EcPopover component should attach to a different element when provided 1`] = `
+<fv-dropdown-stub
+  ariaid="ec-popover-1"
+  arrowoverflow="true"
+  container="custom-element"
+  data-test="ec-popover"
+  popperclass="ec-popover"
+>
+  
+  
 </fv-dropdown-stub>
 `;
 
diff --git a/src/components/ec-popover/ec-popover-provide.js b/src/components/ec-popover/ec-popover-provide.js
new file mode 100644
index 000000000..9309f6c69
--- /dev/null
+++ b/src/components/ec-popover/ec-popover-provide.js
@@ -0,0 +1 @@
+export const POPOVER_CONTAINER_KEY = Symbol('popoverContainer');
diff --git a/src/components/ec-popover/ec-popover.spec.js b/src/components/ec-popover/ec-popover.spec.js
index 30c8aca93..06abfde80 100644
--- a/src/components/ec-popover/ec-popover.spec.js
+++ b/src/components/ec-popover/ec-popover.spec.js
@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
 
 import EcPopover from './ec-popover.vue';
+import { POPOVER_CONTAINER_KEY } from './ec-popover-provide';
 
 describe('EcPopover component', () => {
   function mountEcPopover(props, mountOpts) {
@@ -53,4 +55,16 @@ describe('EcPopover component', () => {
     const wrapper = mountEcPopover();
     expect(typeof wrapper.vm.update).toBe('function');
   });
+
+  it('should attach to a different element when provided', () => {
+    const wrapper = mount(EcPopover, {
+      global: {
+        stubs: { FvDropdown: true },
+        provide: {
+          [POPOVER_CONTAINER_KEY]: { container: ref('custom-element') },
+        },
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });
diff --git a/src/components/ec-popover/ec-popover.vue b/src/components/ec-popover/ec-popover.vue
index 7a05c15e8..f2dadb2c8 100644
--- a/src/components/ec-popover/ec-popover.vue
+++ b/src/components/ec-popover/ec-popover.vue
@@ -22,9 +22,12 @@ export default {
 
 <script setup>
 import { Dropdown as FvDropdown } from 'floating-vue';
-import { ref, toRefs, useAttrs } from 'vue';
+import {
+  inject, ref, toRefs, useAttrs,
+} from 'vue';
 
 import { getUid } from '../../utils/uid';
+import { POPOVER_CONTAINER_KEY } from './ec-popover-provide';
 
 const attrs = useAttrs();
 const props = defineProps({
@@ -42,11 +45,12 @@ const id = getUid();
 const popover = ref(null);
 
 const { level, popperClass } = toRefs(props);
+const { container: containerInject } = inject(POPOVER_CONTAINER_KEY, { container: ref('body') });
 
 function getOptions() {
   return {
     popperClass: `${popperClass.value} ec-popover${level.value && ` ec-popover--${level.value}`}`.trim(),
-    container: 'body',
+    container: containerInject.value,
     ariaId: `ec-popover-${id}`,
     arrowOverflow: true, // to hide the arrow for popover
     ...attrs,
diff --git a/src/main.js b/src/main.js
index 7fae80e3a..dbe5cb089 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,7 @@ export { default as EcNavigationLink } from './components/ec-navigation-link';
 export { default as EcPanel } from './components/ec-panel';
 export { default as EcPhoneNumberInput } from './components/ec-phone-number-input';
 export { default as EcPopover } from './components/ec-popover';
+export { POPOVER_CONTAINER_KEY } from './components/ec-popover/ec-popover-provide';
 export { default as EcPrivacyPolicy } from './components/ec-privacy-policy';
 export { default as EcSmartTable } from './components/ec-smart-table';
 export { default as EcSubmenu } from './components/ec-submenu';