From 2e8e547cd4ba179722a6c998c9eed011d7dc7b54 Mon Sep 17 00:00:00 2001
From: Jonathan <barroudjo@gmail.com>
Date: Fri, 22 Jan 2021 15:37:19 +0100
Subject: [PATCH] fix(overlays): prevent error throw for body margin auto

---
 .changeset/pink-crabs-begin.md             |  5 ++++
 packages/overlays/src/OverlayController.js | 31 +++++++---------------
 2 files changed, 15 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/pink-crabs-begin.md

diff --git a/.changeset/pink-crabs-begin.md b/.changeset/pink-crabs-begin.md
new file mode 100644
index 000000000..c1f8c6b5c
--- /dev/null
+++ b/.changeset/pink-crabs-begin.md
@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+Prevent error throw for body margin auto on overlay hide/show.
diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js
index 510ef10f7..2945b15a6 100644
--- a/packages/overlays/src/OverlayController.js
+++ b/packages/overlays/src/OverlayController.js
@@ -735,21 +735,17 @@ export class OverlayController extends EventTargetShim {
       case 'before-show':
         this.__bodyClientWidth = document.body.clientWidth;
         this.__bodyClientHeight = document.body.clientHeight;
-        this.__bodyMarginRight = 0;
-        this.__bodyMarginBottom = 0;
+        this.__bodyMarginRightInline = document.body.style.marginRight;
+        this.__bodyMarginBottomInline = document.body.style.marginBottom;
         break;
       case 'show': {
-        if (supportsCSSTypedObject) {
-          // @ts-expect-error types attributeStyleMap not available yet
-          this.__bodyMarginRight = document.body.computedStyleMap().get('margin-right').value;
-          // @ts-expect-error types computedStyleMap not available yet
-          this.__bodyMarginBottom = document.body.computedStyleMap().get('margin-bottom').value;
-        } else if (window.getComputedStyle) {
+        if (window.getComputedStyle) {
           const bodyStyle = window.getComputedStyle(document.body);
-          if (bodyStyle) {
-            this.__bodyMarginRight = parseInt(bodyStyle.getPropertyValue('margin-right'), 10);
-            this.__bodyMarginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
-          }
+          this.__bodyMarginRight = parseInt(bodyStyle.getPropertyValue('margin-right'), 10);
+          this.__bodyMarginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
+        } else {
+          this.__bodyMarginRight = 0;
+          this.__bodyMarginBottom = 0;
         }
         const scrollbarWidth =
           document.body.clientWidth - /** @type {number} */ (this.__bodyClientWidth);
@@ -769,15 +765,8 @@ export class OverlayController extends EventTargetShim {
         break;
       }
       case 'hide':
-        if (supportsCSSTypedObject) {
-          // @ts-expect-error types attributeStyleMap + CSS.px not available yet
-          document.body.attributeStyleMap.set('margin-right', CSS.px(this.__bodyMarginRight));
-          // @ts-expect-error types attributeStyleMap + CSS.px not available yet
-          document.body.attributeStyleMap.set('margin-bottom', CSS.px(this.__bodyMarginBottom));
-        } else {
-          document.body.style.marginRight = `${this.__bodyMarginRight}px`;
-          document.body.style.marginBottom = `${this.__bodyMarginBottom}px`;
-        }
+        document.body.style.marginRight = this.__bodyMarginRightInline || '';
+        document.body.style.marginBottom = this.__bodyMarginBottomInline || '';
         break;
       /* no default */
     }