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

package/dist/index.cjs.js

@@ -24466,24 +24466,30 @@ 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>, Function) => undefined;
 
   Takes an array of strings that correspond to DOM selectors. Examples:
   "#submit-button", ".module-small", "h2.alert-title"
 
+  Also takes a handler function (such as a useState updater) to receive the Boolean
+  that the hook generates
+
   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.:
+  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
 
   If every element in the array is fully within the viewport, function returns true
+
+  Calls the provided handler function with the Boolean result
 */
 
 var useCheckElementsInViewport = function useCheckElementsInViewport() {
   var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var handler = arguments.length > 1 ? arguments[1] : undefined;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24502,7 +24508,7 @@ var useCheckElementsInViewport = function useCheckElementsInViewport() {
       }
     });
   }, [elements]);
-  return elementsVisible;
+  handler(elementsVisible);
 };
 
 
@@ -40330,6 +40336,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 +40352,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 +45546,27 @@ 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: "center",
+    align: "space-between"
+  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: padding,