@thecb/components 7.7.8-beta.6 → 7.7.8-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.8-beta.6",
+  "version": "7.7.8-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/util/useCheckElementsInViewport.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect } from "react";
 
 /*
   Hook that determines whether every element in an array of DOM selectors is fully present
@@ -13,34 +13,37 @@ import { useEffect, useState } from "react";
   the string given.
 
   A combination string of multiple selectors can also be provided as an item in the array, e.g.:
-  ".alert-info, .alert-warning, .alert-error"
+  ".alert-info, .alert-warning, .alert-error". This will return the first element that matches *any* of the provided selectors.
 
-  This will return the first element that matches *any* of the provided selectors
+  If the element is present in the DOM (domEL !== null), the function examines the element's bounding box
+  to determine if the element is within the viewport. If any portion of the element is outside of
+  the viewport, the function returns false.
 
-  If every element in the array is fully within the viewport, function returns true
+  If all elements that exist are within the viewport, the function returns true.
 */
 
 const useCheckElementsInViewport = (elements = []) => {
-  const [elementsVisible, setElementsVisible] = useState(false);
+  let elementsVisible = true;
   const viewportWidth =
     window.innerWidth || document.documentElement.clientWidth;
   const viewportHeight =
     window.innerHeight || document.documentElement.clientHeight;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     elements.forEach(element => {
-      console.log("element is", element);
       const domEl = document.querySelector(element);
-      console.log("domEl is", domEl);
       const boundingBox = domEl?.getBoundingClientRect();
 
-      if (
-        boundingBox?.top >= 0 &&
-        boundingBox?.left >= 0 &&
-        boundingBox?.right <= viewportWidth &&
-        boundingBox?.bottom <= viewportHeight
-      ) {
-        setElementsVisible(true);
+      // Skip any elements not in the DOM
+      if (domEl !== null) {
+        if (
+          boundingBox.top < 0 ||
+          boundingBox.left < 0 ||
+          boundingBox.right > viewportWidth ||
+          boundingBox.bottom > viewportHeight
+        ) {
+          elementsVisible = false;
+        }
       }
     });
   }, [elements, viewportWidth, viewportHeight]);