From 9142a53da3ea10824836508f2cc40d4693c5cfad Mon Sep 17 00:00:00 2001
From: Thijs Louisse <thijs.louisse@ing.com>
Date: Thu, 19 Nov 2020 10:58:05 +0100
Subject: [PATCH] feat(overlays): make arrow config more composable (#1101)

---
 .changeset/proud-geckos-arrive.md   |  5 +++
 packages/overlays/src/ArrowMixin.js | 54 +++++++++++++++++------------
 2 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/proud-geckos-arrive.md

diff --git a/.changeset/proud-geckos-arrive.md b/.changeset/proud-geckos-arrive.md
new file mode 100644
index 000000000..356c765e9
--- /dev/null
+++ b/.changeset/proud-geckos-arrive.md
@@ -0,0 +1,5 @@
+---
+"@lion/overlays": patch
+---
+
+overlays: make arrow config more composable
diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js
index 6df30d522..f205d096c 100644
--- a/packages/overlays/src/ArrowMixin.js
+++ b/packages/overlays/src/ArrowMixin.js
@@ -4,7 +4,7 @@ import { OverlayMixin } from './OverlayMixin.js';
 /**
  * @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
  * @typedef {import('../types/ArrowMixinTypes').ArrowMixin} ArrowMixin
- *
+ * @typedef {import('popper.js').PopperOptions} PopperOptions
  */
 
 /**
@@ -109,36 +109,46 @@ export const ArrowMixinImplementation = superclass =>
      */
     // eslint-disable-next-line
     _defineOverlayConfig() {
+      const superConfig = super._defineOverlayConfig() || {};
       if (!this.hasArrow) {
-        return super._defineOverlayConfig();
+        return superConfig;
       }
       return {
-        ...super._defineOverlayConfig(),
+        ...superConfig,
         popperConfig: {
-          ...super._defineOverlayConfig()?.popperConfig,
-          placement: 'top',
+          ...this._getPopperArrowConfig(superConfig.popperConfig),
+        },
+      };
+    }
 
-          modifiers: {
-            ...super._defineOverlayConfig()?.popperConfig?.modifiers,
-            keepTogether: {
-              ...super._defineOverlayConfig()?.popperConfig?.modifiers?.keepTogether,
-              enabled: true,
-            },
-            arrow: {
-              ...super._defineOverlayConfig()?.popperConfig?.modifiers?.arrow,
-              enabled: true,
-            },
-          },
+    /**
+     * @param {PopperOptions} popperConfigToExtendFrom
+     * @returns {PopperOptions}
+     */
+    _getPopperArrowConfig(popperConfigToExtendFrom = {}) {
+      return {
+        placement: 'top',
 
-          /** @param {import("popper.js").default.Data} data */
-          onCreate: data => {
-            this.__syncFromPopperState(data);
+        modifiers: {
+          ...popperConfigToExtendFrom.modifiers,
+          keepTogether: {
+            ...popperConfigToExtendFrom.modifiers?.keepTogether,
+            enabled: true,
           },
-          /** @param {import("popper.js").default.Data} data */
-          onUpdate: data => {
-            this.__syncFromPopperState(data);
+          arrow: {
+            ...popperConfigToExtendFrom.modifiers?.arrow,
+            enabled: true,
           },
         },
+
+        /** @param {import("popper.js").default.Data} data */
+        onCreate: data => {
+          this.__syncFromPopperState(data);
+        },
+        /** @param {import("popper.js").default.Data} data */
+        onUpdate: data => {
+          this.__syncFromPopperState(data);
+        },
       };
     }