@thecb/components 10.12.1-beta.0 → 10.12.1

package/dist/index.d.ts

@@ -372,12 +372,11 @@ declare const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);
 
@@ -576,8 +575,10 @@ declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -601,6 +602,10 @@ interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 declare const Card: React.FC<Expand<CardProps> &

package/dist/index.esm.js

@@ -26562,6 +26562,15 @@ var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 var useOutsideClickHook = function useOutsideClickHook(handler) {
   var ref = useRef();
   useEffect$1(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;
 };
@@ -26752,7 +26761,9 @@ var Popover = function Popover(_ref) {
       togglePopover(popoverState);
     }
   };
-  var triggerRef = useOutsideClickHook();
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -39853,20 +39864,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.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
-    as: "p",
+  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, titleText && /*#__PURE__*/React.createElement(Title$1, {
+    as: titleAs,
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, titleText), showQuitLink && /*#__PURE__*/React.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.createElement(IconQuitLarge, null))), /*#__PURE__*/React.createElement(Paragraph$1, {
+    as: textAs,
     color: themeValues.textColor
   }, text))));
 };
@@ -39907,9 +39938,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,
@@ -39966,9 +40005,13 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React.createElement(CardText$1, {
+    onQuitClick: onQuitClick,
     padding: padding,
+    showQuitLink: showQuitLink,
+    titleAs: titleAs,
     titleText: titleText,
     text: text,
+    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };
@@ -50892,7 +50935,14 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     appliedOptions = _useState4[0],
     setAppliedOptions = _useState4[1];
-  var containerRef = useRef(null);
+  var handleClickOutsideContainer = function handleClickOutsideContainer() {
+    setOpened(false);
+    actions.fields.searchTerm.set("");
+    onApply(selectedOptions);
+  };
+  var containerRef = useOutsideClickHook(function () {
+    return handleClickOutsideContainer();
+  });
   var dropdownRef = useRef(null);
   var filterButtonRef = useRef(null);
   var applyFilterButtonRef = useRef(null);
@@ -50920,17 +50970,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);
     };
   }, []);
@@ -50946,7 +50987,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,