@ndla/ui 6.1.1 → 6.1.2

package/es/Masthead/utils.js

@@ -17,11 +17,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { resizeObserver } from '@ndla/util';
 export var getMastheadHeight = function getMastheadHeight() {
-  var masthead = document && document.getElementById('masthead');
-  return masthead === null || masthead === void 0 ? void 0 : masthead.getBoundingClientRect().height;
+  if (typeof window !== 'undefined') {
+    var masthead = document.getElementById('masthead');
+    return masthead === null || masthead === void 0 ? void 0 : masthead.getBoundingClientRect().height;
+  }
 };
 export var useMastheadHeight = function useMastheadHeight() {
   var _useState = useState(),
@@ -29,17 +31,28 @@ export var useMastheadHeight = function useMastheadHeight() {
       height = _useState2[0],
       setHeight = _useState2[1];
 
-  var masthead = document && document.getElementById('masthead');
-
-  var handleHeightChange = function handleHeightChange(el) {
-    var newHeight = el.getBoundingClientRect().height;
-    setHeight(newHeight);
-  };
-
-  if (masthead) {
-    resizeObserver(masthead, handleHeightChange);
-  }
-
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mounted = _useState4[0],
+      setMounted = _useState4[1];
+
+  useEffect(function () {
+    setMounted(true);
+  }, []);
+  useEffect(function () {
+    if (mounted) {
+      var masthead = document.getElementById('masthead');
+
+      var handleHeightChange = function handleHeightChange(el) {
+        var newHeight = el.getBoundingClientRect().height;
+        setHeight(newHeight);
+      };
+
+      if (masthead) {
+        resizeObserver(masthead, handleHeightChange);
+      }
+    }
+  }, [mounted]);
   return {
     height: height
   };

package/lib/Masthead/utils.js

@@ -22,8 +22,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var getMastheadHeight = function getMastheadHeight() {
-  var masthead = document && document.getElementById('masthead');
-  return masthead === null || masthead === void 0 ? void 0 : masthead.getBoundingClientRect().height;
+  if (typeof window !== 'undefined') {
+    var masthead = document.getElementById('masthead');
+    return masthead === null || masthead === void 0 ? void 0 : masthead.getBoundingClientRect().height;
+  }
 };
 
 exports.getMastheadHeight = getMastheadHeight;
@@ -34,17 +36,28 @@ var useMastheadHeight = function useMastheadHeight() {
       height = _useState2[0],
       setHeight = _useState2[1];
 
-  var masthead = document && document.getElementById('masthead');
-
-  var handleHeightChange = function handleHeightChange(el) {
-    var newHeight = el.getBoundingClientRect().height;
-    setHeight(newHeight);
-  };
-
-  if (masthead) {
-    (0, _util.resizeObserver)(masthead, handleHeightChange);
-  }
-
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mounted = _useState4[0],
+      setMounted = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setMounted(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (mounted) {
+      var masthead = document.getElementById('masthead');
+
+      var handleHeightChange = function handleHeightChange(el) {
+        var newHeight = el.getBoundingClientRect().height;
+        setHeight(newHeight);
+      };
+
+      if (masthead) {
+        (0, _util.resizeObserver)(masthead, handleHeightChange);
+      }
+    }
+  }, [mounted]);
   return {
     height: height
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa8891f69438a94440d4fbb73c8ed7dfff867311"
+  "gitHead": "6002d3517851d20c9b1c2ab5267d0c91ec74721b"
 }

package/src/Masthead/utils.ts

@@ -6,26 +6,38 @@
  *
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { resizeObserver } from '@ndla/util';
 
 export const getMastheadHeight = (): number | undefined => {
-  const masthead = document && document.getElementById('masthead');
-  return masthead?.getBoundingClientRect().height;
+  if (typeof window !== 'undefined') {
+    const masthead = document.getElementById('masthead');
+    return masthead?.getBoundingClientRect().height;
+  }
 };
 
 export const useMastheadHeight = () => {
   const [height, setHeight] = useState<number>();
-  const masthead = document && document.getElementById('masthead');
+  const [mounted, setMounted] = useState(false);
 
-  const handleHeightChange = (el: HTMLElement) => {
-    const newHeight = el.getBoundingClientRect().height;
-    setHeight(newHeight);
-  };
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-  if (masthead) {
-    resizeObserver(masthead, handleHeightChange);
-  }
+  useEffect(() => {
+    if (mounted) {
+      const masthead = document.getElementById('masthead');
+
+      const handleHeightChange = (el: HTMLElement) => {
+        const newHeight = el.getBoundingClientRect().height;
+        setHeight(newHeight);
+      };
+
+      if (masthead) {
+        resizeObserver(masthead, handleHeightChange);
+      }
+    }
+  }, [mounted]);
 
   return {
     height,