@thecb/components 7.7.3-beta.3 → 7.7.3-beta.4

package/dist/index.d.ts

@@ -431,6 +431,9 @@ interface PopoverProps {
   arrowDirection?: "left" | "right" | "top" | "bottom";
   transform?: string;
   disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popoverExtraStyles?: string;
 }
 
 declare const Popover: React.FC<Expand<PopoverProps> &

package/dist/index.esm.js

@@ -23688,10 +23688,10 @@ var fallbackValues$i = {
   popoverTriggerColor: popoverTriggerColor
 };
 
-var arrowBorder = function arrowBorder(direction) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "8px";
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
   var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid rgba(255, 255, 255, 0.85)");
+  var straight = "".concat(width, " solid ").concat(borderColor);
 
   if (direction == "down") {
     return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
@@ -23733,7 +23733,12 @@ var Popover = function Popover(_ref) {
       arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
       _ref$transform = _ref.transform,
       transform = _ref$transform === void 0 ? "none" : _ref$transform,
-      buttonExtraStyles = _ref.buttonExtraStyles;
+      buttonExtraStyles = _ref.buttonExtraStyles,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+      popoverExtraStyles = _ref.popoverExtraStyles;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -23819,7 +23824,7 @@ var Popover = function Popover(_ref) {
     color: popoverTriggerColor,
     extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React.createElement(Box, {
-    background: "white",
+    background: backgroundColor,
     borderRadius: "4px",
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
     id: "Disclosed".concat(popoverID),
@@ -23828,10 +23833,10 @@ var Popover = function Popover(_ref) {
     tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
     minWidth: minWidth,
     maxWidth: maxWidth,
-    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          transform: ").concat(transform, ";\n          ")
+    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          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
   }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };