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

package/dist/index.cjs.js

@@ -24475,32 +24475,29 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   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.
 */
 
 var useCheckElementsInViewport = function useCheckElementsInViewport() {
   var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      elementsVisible = _useState2[0],
-      setElementsVisible = _useState2[1];
-
+  var elementsVisible = true;
   var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
   var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
     elements.forEach(function (element) {
-      console.log("element is", element);
       var domEl = document.querySelector(element);
-      console.log("domEl is", domEl);
-      var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect();
+      var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect(); // Skip any elements not in the DOM
 
-      if ((boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.top) >= 0 && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.left) >= 0 && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.right) <= viewportWidth && (boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.bottom) <= viewportHeight) {
-        setElementsVisible(true);
+      if (domEl !== null) {
+        if (boundingBox.top < 0 || boundingBox.left < 0 || boundingBox.right > viewportWidth || boundingBox.bottom > viewportHeight) {
+          elementsVisible = false;
+        }
       }
     });
   }, [elements, viewportWidth, viewportHeight]);