@thecb/components 6.3.0-beta.0 → 6.3.0

package/dist/index.esm.js

@@ -44278,16 +44278,16 @@ var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
 };
 
 /* 
-  Hook that assigns an onPointerUp event listener to the main document element
+  Hook that assigns a click event listener to the main document element
   Returns a ref to attach to another element (like an icon/button that triggers a popover)
-  If a pointerup event gets captured by the document and the assigned element isn't the target
+  If a click event gets captured by the document and the assigned element isn't the target
   hook will run whatever handler is passed (eg a function that closes a popover)
 
-  See tooltip component for implementation
+  See popover component for implementation
 
 */
 
-var useOutsideClickHook = function useOutsideClickHook(handler) {
+var useOutsideClickHook$1 = function useOutsideClickHook(handler) {
   var ref = useRef();
   useEffect$1(function () {
   }, [ref]);
@@ -44302,7 +44302,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClickHook: useOutsideClickHook
+  useOutsideClick: useOutsideClickHook$1
 });
 
 var hoverColor$5 = "#116285";
@@ -44320,8 +44320,8 @@ var Popover = function Popover(_ref) {
       triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
       _ref$content = _ref.content,
       content = _ref$content === void 0 ? "" : _ref$content,
-      _ref$useIcon = _ref.useIcon,
-      useIcon = _ref$useIcon === void 0 ? false : _ref$useIcon,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
       Icon = _ref.icon,
       _ref$iconHelpText = _ref.iconHelpText,
       iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
@@ -44337,7 +44337,8 @@ var Popover = function Popover(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? "auto" : _ref$height,
-      position = _ref.position;
+      position = _ref.position,
+      arrowPosition = _ref.arrowPosition;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -44352,6 +44353,16 @@ var Popover = function Popover(_ref) {
       _ref2$left = _ref2.left,
       left = _ref2$left === void 0 ? "-225px" : _ref2$left;
 
+  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
+      _ref3$arrowTop = _ref3.arrowTop,
+      arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
+      _ref3$arrowRight = _ref3.arrowRight,
+      arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
+      _ref3$arrowBottom = _ref3.arrowBottom,
+      arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
+      _ref3$arrowLeft = _ref3.arrowLeft,
+      arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       popoverOpen = _useState2[0],
@@ -44363,7 +44374,9 @@ var Popover = function Popover(_ref) {
     }
   };
 
-  var triggerRef = useOutsideClickHook();
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -44372,21 +44385,21 @@ var Popover = function Popover(_ref) {
       return noop;
     },
     onFocus: function onFocus() {
-      console.log("on focus") || handleTogglePopover(true);
+      handleTogglePopover(true);
     },
     onBlur: function onBlur() {
-      console.log("on blur") || handleTogglePopover(false);
+      handleTogglePopover(false);
     },
     onKeyDown: function onKeyDown(e) {
       if (e.keyCode === 27) {
-        console.log("on key down") || handleTogglePopover(false);
+        handleTogglePopover(false);
       }
     },
     onTouchStart: function onTouchStart() {
-      return console.log("on touch start") || handleTogglePopover(true);
+      return handleTogglePopover(true);
     },
     onTouchEnd: function onTouchEnd() {
-      return console.log("on touch end") || handleTogglePopover(false);
+      return handleTogglePopover(false);
     },
     onMouseEnter: function onMouseEnter() {
       return handleTogglePopover(true);
@@ -44403,12 +44416,12 @@ var Popover = function Popover(_ref) {
     "aria-describedby": "Disclosure".concat(popoverID),
     "aria-controls": "Disclosed".concat(popoverID),
     ref: triggerRef
-  }, useIcon && /*#__PURE__*/React.createElement(Icon, null), useIcon && /*#__PURE__*/React.createElement(Box, {
+  }, hasIcon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     srOnly: true
   }, /*#__PURE__*/React.createElement(Text$1, {
     id: "btnPopover".concat(popoverID, "_info")
-  }, iconHelpText)), !useIcon && /*#__PURE__*/React.createElement(Text$1, {
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React.createElement(Text$1, {
     color: popoverTriggerColor,
     extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React.createElement(Box, {
@@ -44424,7 +44437,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, "\n          ")
   }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    extraStyles: "position: absolute; content: \"\"; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: -8px; right: 10px;"
+    extraStyles: "position: absolute; content: \"\"; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ".concat(arrowBottom, "; right: ").concat(arrowRight, "; top: ").concat(arrowTop, "; left: ").concat(arrowLeft, ";")
   })));
 };
 
@@ -45458,8 +45471,8 @@ var DisplayCard = function DisplayCard(_ref) {
       _ref$link = _ref.link,
       link = _ref$link === void 0 ? false : _ref$link,
       helpText = _ref.helpText,
-      _ref$usePopover = _ref.usePopover,
-      usePopover = _ref$usePopover === void 0 ? false : _ref$usePopover,
+      _ref$hasPopover = _ref.hasPopover,
+      hasPopover = _ref$hasPopover === void 0 ? false : _ref$hasPopover,
       _ref$popoverTriggerTe = _ref.popoverTriggerText,
       popoverTriggerText = _ref$popoverTriggerTe === void 0 ? "" : _ref$popoverTriggerTe,
       _ref$popoverContent = _ref.popoverContent,
@@ -45480,7 +45493,7 @@ var DisplayCard = function DisplayCard(_ref) {
     variant: "pL",
     color: CHARADE_GREY,
     extraStyles: "letter-spacing: 0.29px"
-  }, title), usePopover && /*#__PURE__*/React.createElement(Popover$1, {
+  }, title), hasPopover && /*#__PURE__*/React.createElement(Popover$1, {
     triggerText: popoverTriggerText,
     content: popoverContent,
     popoverExtraStyles: popoverExtraStyles,
@@ -45497,7 +45510,6 @@ var DisplayCard = function DisplayCard(_ref) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
     color: CHARADE_GREY
   }, item), link ? /*#__PURE__*/React.createElement(ButtonWithLink, {
     text: buttonText,
@@ -45512,7 +45524,6 @@ var DisplayCard = function DisplayCard(_ref) {
     dataQa: buttonText,
     extraStyles: "min-width: 0;"
   }) : helpText ? /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
     color: STORM_GREY,
     extraStyles: "font-style: italic;"
   }, helpText) : /*#__PURE__*/React.createElement(Fragment$1, null))))));