@thecb/components 7.7.8-beta.7 → 7.7.8-beta.9

package/dist/index.cjs.js

@@ -24475,32 +24475,54 @@ 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 elementsVisible = true;
+  var timeoutID = false;
+  var delay = 250;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(window.innerWidth || document.documentElement.clientWidth),
       _useState2 = _slicedToArray(_useState, 2),
-      elementsVisible = _useState2[0],
-      setElementsVisible = _useState2[1];
+      viewportWidth = _useState2[0],
+      setViewportWidth = _useState2[1];
 
-  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  var _useState3 = React.useState(window.innerHeight || document.documentElement.clientHeight),
+      _useState4 = _slicedToArray(_useState3, 2),
+      viewportHeight = _useState4[0],
+      setViewportHeight = _useState4[1];
+
+  var updateViewportValues = function updateViewportValues() {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(function () {
+      setViewportWidth(window.innerWidth || document.documentElement.clientWidth);
+      setViewportHeight(window.innerHeight || document.documentElement.clientHeight);
+    }, delay);
+  };
+
+  React.useEffect(function () {
+    window.addEventListener("resize", updateViewportValues);
+    return function () {
+      clearTimeout(timeoutID);
+    };
+  }, []);
   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]);