@thecb/components 7.7.8-beta.1 → 7.7.8-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.8-beta.1",
+  "version": "7.7.8-beta.10",
   "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,7 +67,7 @@ const HighlightTabRow = ({
                 color={themeValues.textColor}
                 weight={FONT_WEIGHT_SEMIBOLD}
                 extraStyles="display: block; white-space: nowrap;"
-                id={`${t}-tab-text`}
+                id={`${t?.toLowerCase()?.replace(/\s/g, "-")}-tab-text`}
               >
                 {t}
               </Text>

package/src/components/molecules/module/Module.js

@@ -1,9 +1,8 @@
 import React, { Fragment, memo } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Module.theme";
-import Heading from "../../atoms/heading";
 import Title from "../../atoms/title";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster } from "../../atoms/layouts";
 
 /*
   New (01/22) - updated <Module /> to use <Title /> atom
@@ -25,6 +24,8 @@ const Module = ({
   variant = "default",
   fontSize,
   as,
+  titleID = "",
+  rightTitleContent,
   children
 }) => {
   const themedFontSize =
@@ -37,20 +38,28 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
+  const headingText = (
+    <Title
+      weight={themeValues.fontWeight}
+      color={themeValues.fontColor}
+      margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+      textAlign={themeValues.textAlign}
+      as={computedElemType}
+      extraStyles={`font-size: ${computedFontSize};`}
+      id={titleID}
+    >
+      {heading}
+    </Title>
+  );
 
   return (
     <Fragment>
-      {heading && (
-        <Title
-          weight={themeValues.fontWeight}
-          color={themeValues.fontColor}
-          margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
-          textAlign={themeValues.textAlign}
-          as={computedElemType}
-          extraStyles={`font-size: ${computedFontSize};`}
-        >
-          {heading}
-        </Title>
+      {heading && !rightTitleContent && headingText}
+      {heading && rightTitleContent && (
+        <Cluster justify="space-between" align="center" nowrap>
+          {headingText}
+          {rightTitleContent}
+        </Cluster>
       )}
       <Box padding={`0 0 ${spacingBottom}`}>
         <Box

package/src/util/index.js

@@ -4,6 +4,7 @@ import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "./useOutsideClick";
 import useCheckElementsInViewport from "./useCheckElementsInViewport";
+import useGetViewportOnResize from "./useGetViewportOnResize";
 
 export {
   formats,
@@ -11,5 +12,6 @@ export {
   theme,
   useFocusInvalidInput,
   useOutsideClick,
-  useCheckElementsInViewport
+  useCheckElementsInViewport,
+  useGetViewportOnResize
 };

package/src/util/useCheckElementsInViewport.js

@@ -1,49 +1,55 @@
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, 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;
+  (elements: Array<String>, Number, Number) => Boolean;
+  (["#submit-button", "#.module-small", "h2.alert-title"], 1024, 768) => true;
 
   Takes an array of strings that correspond to DOM selectors. Examples:
   "#submit-button", ".module-small", "h2.alert-title"
 
+  Also takes numbers that represent the current viewport width and height.
+  You can either calculate these once in your application before running this hook
+  (so that they only update when the component running the hook re-renders), or you can
+  use the useGetViewportOnResize hook to calculate them when the browser window is resized
+
   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"
+  A combination string of multiple selectors can also be provided as an item in the array, e.g.:
+  ".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);
-  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();
-
+const useCheckElementsInViewport = (
+  elements = [],
+  viewportWidth,
+  viewportHeight
+) => {
+  for (let i = 0; i < elements.length; i++) {
+    const domEl = document.querySelector(elements[i]);
+    const boundingBox = domEl?.getBoundingClientRect();
+    timesRun++;
+
+    if (domEl !== null) {
       if (
-        boundingBox.top >= 0 &&
-        boundingBox.left >= 0 &&
-        boundingBox.right <= viewportWidth &&
-        boundingBox.bottom <= viewportHeight
+        boundingBox.top < 0 ||
+        boundingBox.left < 0 ||
+        boundingBox.right > viewportWidth ||
+        boundingBox.bottom > viewportHeight
       ) {
-        setElementsVisible(true);
+        return false;
       }
-    });
-  }, [elements]);
-
-  return elementsVisible;
+    }
+  }
+  return true;
 };
 
 export default useCheckElementsInViewport;

package/src/util/useGetViewportOnResize.js

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+
+/*
+  Hook that adds a resize listener to the window and updates viewport size via
+  a provided handler function
+
+  (Object: {width: Number, height: Number}, Function) => undefined;
+
+  Provide the current value of the user's viewport and a handler function to receive updated values
+
+  Best used in combination with a useState hook in your component to receive updated values
+*/
+
+const useGetViewportOnResize = (viewport, updateViewport) => {
+  let timeoutID = false;
+  let delay = 250;
+
+  const updateViewportValues = () => {
+    clearTimeout(timeoutID);
+
+    timeoutID = setTimeout(() => {
+      let newWidth = window.innerWidth || document.documentElement.clientWidth;
+      let newHeight =
+        window.innerHeight || document.documentElement.clientHeight;
+
+      if (
+        (viewport?.width && viewport?.width !== newWidth) ||
+        (viewport?.height && viewport?.height !== newHeight)
+      ) {
+        updateViewport({
+          width: newWidth,
+          height: newHeight
+        });
+      }
+    }, delay);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateViewportValues);
+
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, []);
+};
+
+export default useGetViewportOnResize;