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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -24475,32 +24475,29 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
24475
24475
  the string given.
24476
24476
 
24477
24477
  A combination string of multiple selectors can also be provided as an item in the array, e.g.:
24478
- ".alert-info, .alert-warning, .alert-error"
24478
+ ".alert-info, .alert-warning, .alert-error". This will return the first element that matches *any* of the provided selectors.
24479
24479
 
24480
- This will return the first element that matches *any* of the provided selectors
24480
+ If the element is present in the DOM (domEL !== null), the function examines the element's bounding box
24481
+ to determine if the element is within the viewport. If any portion of the element is outside of
24482
+ the viewport, the function returns false.
24481
24483
 
24482
- If every element in the array is fully within the viewport, function returns true
24484
+ If all elements that exist are within the viewport, the function returns true.
24483
24485
  */
24484
24486
 
24485
24487
  var useCheckElementsInViewport = function useCheckElementsInViewport() {
24486
24488
  var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
24487
-
24488
- var _useState = React.useState(false),
24489
- _useState2 = _slicedToArray(_useState, 2),
24490
- elementsVisible = _useState2[0],
24491
- setElementsVisible = _useState2[1];
24492
-
24489
+ var elementsVisible = true;
24493
24490
  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
24494
24491
  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
24495
24492
  React.useLayoutEffect(function () {
24496
24493
  elements.forEach(function (element) {
24497
- console.log("element is", element);
24498
24494
  var domEl = document.querySelector(element);
24499
- console.log("domEl is", domEl);
24500
- var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect();
24495
+ var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect(); // Skip any elements not in the DOM
24501
24496
 
24502
- 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) {
24503
- setElementsVisible(true);
24497
+ if (domEl !== null) {
24498
+ if (boundingBox.top < 0 || boundingBox.left < 0 || boundingBox.right > viewportWidth || boundingBox.bottom > viewportHeight) {
24499
+ elementsVisible = false;
24500
+ }
24504
24501
  }
24505
24502
  });
24506
24503
  }, [elements, viewportWidth, viewportHeight]);