@thecb/components 10.12.1-beta.0 → 10.12.1

package/dist/index.cjs.js

@@ -26570,6 +26570,15 @@ var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 var useOutsideClickHook = function useOutsideClickHook(handler) {
   var ref = React.useRef();
   React.useEffect(function () {
+    var handleOutsideClick = function handleOutsideClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick, true);
+    return function () {
+      document.removeEventListener("click", handleOutsideClick, true);
+    };
   }, [ref]);
   return ref;
 };
@@ -26760,7 +26769,9 @@ var Popover = function Popover(_ref) {
       togglePopover(popoverState);
     }
   };
-  var triggerRef = useOutsideClickHook();
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -39861,20 +39872,40 @@ var fallbackValues$E = {
 };
 
 var CardText = function CardText(_ref) {
-  var padding = _ref.padding,
+  var showQuitLink = _ref.showQuitLink,
+    onQuitClick = _ref.onQuitClick,
+    titleAs = _ref.titleAs,
+    padding = _ref.padding,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
-    as: "p",
+  }, /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
+    as: titleAs,
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+  }, titleText), showQuitLink && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    onClick: onQuitClick,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && onQuitClick();
+    },
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Close Card: ".concat(titleText),
+    extraStyles: "cursor: pointer;"
+  }, /*#__PURE__*/React__default.createElement(IconQuitLarge, null))), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    as: textAs,
     color: themeValues.textColor
   }, text))));
 };
@@ -39915,9 +39946,17 @@ var Card = function Card(_ref) {
     _ref$imgObjectFit = _ref.imgObjectFit,
     imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
     imgAltText = _ref.imgAltText,
+    _ref$onQuitClick = _ref.onQuitClick,
+    onQuitClick = _ref$onQuitClick === void 0 ? noop$1 : _ref$onQuitClick,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "24px" : _ref$padding,
+    _ref$showQuitLink = _ref.showQuitLink,
+    showQuitLink = _ref$showQuitLink === void 0 ? false : _ref$showQuitLink,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
+    _ref$titleAs = _ref.titleAs,
+    titleAs = _ref$titleAs === void 0 ? "h2" : _ref$titleAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
@@ -39974,9 +40013,13 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React__default.createElement(CardText$1, {
+    onQuitClick: onQuitClick,
     padding: padding,
+    showQuitLink: showQuitLink,
+    titleAs: titleAs,
     titleText: titleText,
     text: text,
+    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };
@@ -50900,7 +50943,14 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     appliedOptions = _useState4[0],
     setAppliedOptions = _useState4[1];
-  var containerRef = React.useRef(null);
+  var handleClickOutsideContainer = function handleClickOutsideContainer() {
+    setOpened(false);
+    actions.fields.searchTerm.set("");
+    onApply(selectedOptions);
+  };
+  var containerRef = useOutsideClickHook(function () {
+    return handleClickOutsideContainer();
+  });
   var dropdownRef = React.useRef(null);
   var filterButtonRef = React.useRef(null);
   var applyFilterButtonRef = React.useRef(null);
@@ -50928,17 +50978,8 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
         onApply(selectedOptions);
       }
     };
-    var handleClickOutside = function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return function () {
-      document.addEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -50954,7 +50995,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     },
     opened: opened,
     backgroundColor: opened ? themeValues.primaryColor : selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? themeValues.secondaryColor : WHITE,
-    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : "#292A33",
+    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : CHARADE_GREY,
     name: name,
     filterDropdownID: filterDropdownID,
     hasIcon: hasIcon,