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

package/dist/index.cjs.js

@@ -24466,43 +24466,85 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   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.
 */
 
 var useCheckElementsInViewport = function useCheckElementsInViewport() {
   var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var viewportWidth = arguments.length > 1 ? arguments[1] : undefined;
+  var viewportHeight = arguments.length > 2 ? arguments[2] : undefined;
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      elementsVisible = _useState2[0],
-      setElementsVisible = _useState2[1];
+  for (var i = 0; i < elements.length; i++) {
+    var domEl = document.querySelector(elements[i]);
+    var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect();
 
-  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  React.useEffect(function () {
-    elements.forEach(function (element) {
-      var domEl = document.querySelector(element);
-      var boundingBox = domEl.getBoundingClientRect();
+    if (domEl !== null) {
+      if (boundingBox.top < 0 || boundingBox.left < 0 || boundingBox.right > viewportWidth || boundingBox.bottom > viewportHeight) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+/*
+  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
+*/
+
+var useGetViewportOnResize = function useGetViewportOnResize(viewport, updateViewport) {
+  var timeoutID = false;
+  var delay = 250;
 
-      if (boundingBox.top >= 0 && boundingBox.left >= 0 && boundingBox.right <= viewportWidth && boundingBox.bottom <= viewportHeight) {
-        setElementsVisible(true);
+  var updateViewportValues = function updateViewportValues() {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(function () {
+      var newWidth = window.innerWidth || document.documentElement.clientWidth;
+      var newHeight = window.innerHeight || document.documentElement.clientHeight;
+
+      if (viewport !== null && viewport !== void 0 && viewport.width && (viewport === null || viewport === void 0 ? void 0 : viewport.width) !== newWidth || viewport !== null && viewport !== void 0 && viewport.height && (viewport === null || viewport === void 0 ? void 0 : viewport.height) !== newHeight) {
+        updateViewport({
+          width: newWidth,
+          height: newHeight
+        });
       }
-    });
-  }, [elements]);
-  return elementsVisible;
+    }, delay);
+  };
+
+  React.useEffect(function () {
+    window.addEventListener("resize", updateViewportValues);
+    return function () {
+      clearTimeout(timeoutID);
+    };
+  }, []);
 };
 
 
@@ -24514,7 +24556,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
   useOutsideClick: useOutsideClickHook,
-  useCheckElementsInViewport: useCheckElementsInViewport
+  useCheckElementsInViewport: useCheckElementsInViewport,
+  useGetViewportOnResize: useGetViewportOnResize
 });
 
 var hoverColor$4 = "#116285";
@@ -40330,6 +40373,8 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
+    var _t$toLowerCase;
+
     return /*#__PURE__*/React__default.createElement(Box, {
       key: t,
       borderSize: "3px",
@@ -40344,7 +40389,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       color: themeValues.textColor,
       weight: FONT_WEIGHT_SEMIBOLD,
       extraStyles: "display: block; white-space: nowrap;",
-      id: "".concat(t, "-tab-text")
+      id: "".concat(t === null || t === void 0 ? void 0 : (_t$toLowerCase = t.toLowerCase()) === null || _t$toLowerCase === void 0 ? void 0 : _t$toLowerCase.replace(/\s/g, "-"), "-tab-text")
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
@@ -45538,19 +45583,28 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       fontSize = _ref.fontSize,
       as = _ref.as,
+      _ref$titleID = _ref.titleID,
+      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
+      rightTitleContent = _ref.rightTitleContent,
       children = _ref.children;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
   var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   var computedElemType = as || themedElemType;
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Title$1, {
+  var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
     textAlign: themeValues.textAlign,
     as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";")
-  }, heading), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "font-size: ".concat(computedFontSize, ";"),
+    id: titleID
+  }, heading);
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: padding,