@thecb/components 7.7.7 → 7.7.8-beta.1

package/package.json

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

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -67,6 +67,7 @@ const HighlightTabRow = ({
                 color={themeValues.textColor}
                 weight={FONT_WEIGHT_SEMIBOLD}
                 extraStyles="display: block; white-space: nowrap;"
+                id={`${t}-tab-text`}
               >
                 {t}
               </Text>

package/src/util/index.js

@@ -3,5 +3,13 @@ import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "./useOutsideClick";
+import useCheckElementsInViewport from "./useCheckElementsInViewport";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClick };
+export {
+  formats,
+  general,
+  theme,
+  useFocusInvalidInput,
+  useOutsideClick,
+  useCheckElementsInViewport
+};

package/src/util/useCheckElementsInViewport.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+/*
+  Hook that determines whether every element in an array of DOM selectors is fully present
+  within the user's current viewport.
+
+  (elements: Array<String>) => Boolean;
+
+  Takes an array of strings that correspond to DOM selectors. Examples:
+  "#submit-button", ".module-small", "h2.alert-title"
+
+  The document query function will return the *first* element in the document that matches
+  the string given.
+
+  A combination string of multiple selectors can also be provided, e.g.:
+  ".alert-info, .alert-warning, .alert-error"
+
+  This will return the first element that matches *any* of the provided selectors
+
+  If every element in the array is fully within the viewport, function returns true
+*/
+
+const useCheckElementsInViewport = (elements = []) => {
+  const [elementsVisible, setElementsVisible] = useState(false);
+  const viewportWidth =
+    window.innerWidth || document.documentElement.clientWidth;
+  const viewportHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+
+  useEffect(() => {
+    elements.forEach(element => {
+      const domEl = document.querySelector(element);
+      const boundingBox = domEl.getBoundingClientRect();
+
+      if (
+        boundingBox.top >= 0 &&
+        boundingBox.left >= 0 &&
+        boundingBox.right <= viewportWidth &&
+        boundingBox.bottom <= viewportHeight
+      ) {
+        setElementsVisible(true);
+      }
+    });
+  }, [elements]);
+
+  return elementsVisible;
+};
+
+export default useCheckElementsInViewport;