@thecb/components 7.0.2-beta.4 → 7.0.2-beta.6

package/dist/index.d.ts

@@ -302,15 +302,16 @@ declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface CopyableProps {
-  text: string;
+  content: string;
+  onCopy?: () => void;
   initialPopoverContent?: string;
-  copiedPopoverContent?: string;
+  copySuccessPopoverContent?: string;
+  copyErrorPopoverContent?: string;
   copiedPopoverContentDuration?: number;
-  withPopover?: boolean;
+  hasPopover?: boolean;
   popoverID?: number;
   popoverMinWidth?: string;
-  onCopy?: () => void;
-  extraStyles?: string;
+  popoverExtraStyles?: string;
 }
 
 declare const Copyable: React.FC<Expand<CopyableProps> &
@@ -368,6 +369,9 @@ interface PopoverProps {
     arrowBottom: string;
     arrowLeft: string;
   };
+  arrowDirection?: "left" | "right" | "top" | "bottom";
+  transform?: string;
+  disclosedExtraStyles?: string;
 }
 
 declare const Popover: React.FC<Expand<PopoverProps> &

package/dist/index.esm.js

@@ -22748,6 +22748,22 @@ var fallbackValues$i = {
   popoverTriggerColor: popoverTriggerColor
 };
 
+var arrowBorder = function arrowBorder(direction) {
+  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid rgba(255, 255, 255, 0.85)");
+
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
+
 var Popover = function Popover(_ref) {
   var themeValues = _ref.themeValues,
       _ref$triggerText = _ref.triggerText,
@@ -22772,7 +22788,11 @@ var Popover = function Popover(_ref) {
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? "auto" : _ref$height,
       position = _ref.position,
-      arrowPosition = _ref.arrowPosition;
+      arrowPosition = _ref.arrowPosition,
+      _ref$arrowDirection = _ref.arrowDirection,
+      arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+      transform = _ref.transform,
+      buttonExtraStyles = _ref.buttonExtraStyles;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -22847,7 +22867,8 @@ var Popover = function Popover(_ref) {
     "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
     "aria-describedby": "Disclosure".concat(popoverID),
     "aria-controls": "Disclosed".concat(popoverID),
-    ref: triggerRef
+    ref: triggerRef,
+    extraStyles: buttonExtraStyles
   }, hasIcon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     srOnly: true
@@ -22866,10 +22887,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          ")
+    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 ? transform : "none", ";\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: ".concat(arrowBottom, "; right: ").concat(arrowRight, "; top: ").concat(arrowTop, "; left: ").concat(arrowLeft, ";")
+    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          ")
   })));
 };
 
@@ -37566,13 +37587,23 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
 var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
 
 /*
-This component will render `text` and a clipboard icon. When hovered, a popover with content `initialPopoverContent` will be displayed.
-When clicked, `text` will be copied to the clipboard, the popover content will change to `copiedPopoverContent` for `copiedPopoverContentDuration` milliseconds,
-and the `onCopy` callback will be executed.
+This component will render `content` and a clipboard icon.
+When hovered, a popover with content `initialPopoverContent` will be displayed.
+to the left of the content.
+
+When clicked, `content` will be copied to the clipboard, the popover content
+will change to `copySuccessPopoverContent` for `copiedPopoverContentDuration`
+milliseconds, and the `onCopy` callback will be executed.
+
+If the content was unable to be copied to the clipboard, the popover will instead
+display `copyErrorPopoverContent`
+
+If you only want the copy to clipboard behaviour without a popover, pass the prop
+`hasPopover={false}`
 */
 
-var CopyableText = function CopyableText(_ref) {
-  var text = _ref.text,
+var CopyableContent = function CopyableContent(_ref) {
+  var content = _ref.content,
       onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(ButtonWithAction, {
     "data-testid": "copyable-trigger",
@@ -37583,79 +37614,123 @@ var CopyableText = function CopyableText(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     childGap: "0.25rem"
-  }, /*#__PURE__*/React.createElement(Text$1, null, text), /*#__PURE__*/React.createElement(ClipboardIcon$1, null)));
+  }, /*#__PURE__*/React.createElement(Text$1, null, content), /*#__PURE__*/React.createElement(ClipboardIcon$1, null)));
 };
 
 var Copyable = function Copyable(_ref2) {
-  var text = _ref2.text,
+  var content = _ref2.content,
       onCopy = _ref2.onCopy,
       _ref2$initialPopoverC = _ref2.initialPopoverContent,
       initialPopoverContent = _ref2$initialPopoverC === void 0 ? "Click to copy to clipboard" : _ref2$initialPopoverC,
-      _ref2$copiedPopoverCo = _ref2.copiedPopoverContent,
-      copiedPopoverContent = _ref2$copiedPopoverCo === void 0 ? "Copied!" : _ref2$copiedPopoverCo,
-      _ref2$withPopover = _ref2.withPopover,
-      withPopover = _ref2$withPopover === void 0 ? true : _ref2$withPopover,
+      _ref2$copySuccessPopo = _ref2.copySuccessPopoverContent,
+      copySuccessPopoverContent = _ref2$copySuccessPopo === void 0 ? "Copied!" : _ref2$copySuccessPopo,
+      _ref2$copyErrorPopove = _ref2.copyErrorPopoverContent,
+      copyErrorPopoverContent = _ref2$copyErrorPopove === void 0 ? "Unable to copy value" : _ref2$copyErrorPopove,
+      _ref2$copiedPopoverCo = _ref2.copiedPopoverContentDuration,
+      copiedPopoverContentDuration = _ref2$copiedPopoverCo === void 0 ? 1000 : _ref2$copiedPopoverCo,
+      _ref2$hasPopover = _ref2.hasPopover,
+      hasPopover = _ref2$hasPopover === void 0 ? true : _ref2$hasPopover,
       _ref2$popoverMinWidth = _ref2.popoverMinWidth,
       popoverMinWidth = _ref2$popoverMinWidth === void 0 ? "210px" : _ref2$popoverMinWidth,
-      _ref2$copiedPopoverCo2 = _ref2.copiedPopoverContentDuration,
-      copiedPopoverContentDuration = _ref2$copiedPopoverCo2 === void 0 ? 1000 : _ref2$copiedPopoverCo2,
       _ref2$popoverID = _ref2.popoverID,
       popoverID = _ref2$popoverID === void 0 ? 0 : _ref2$popoverID,
-      extraStyles = _ref2.extraStyles;
-  var popoverPosition = {
-    top: "-65px",
-    right: "auto",
-    bottom: "auto",
-    left: "-50%"
-  };
-  var popoverArrowPosition = {
-    arrowTop: "auto",
-    arrowRight: "auto",
-    arrowBottom: "-8px",
-    arrowLeft: "calc(50% - 4px)" // Popover arrow is 8px wide. This places the middle of the arrow in the middle of the popover.
-
-  };
+      popoverExtraStyles = _ref2.popoverExtraStyles;
 
   var _useState = useState(initialPopoverContent),
       _useState2 = _slicedToArray(_useState, 2),
       popoverContent = _useState2[0],
       setPopoverContent = _useState2[1];
 
-  var _useState3 = useState(undefined),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      timer = _useState4[0],
-      setTimer = _useState4[1];
+      startTimer = _useState4[0],
+      setStartTimer = _useState4[1];
 
-  var onClick = function onClick() {
-    setPopoverContent(copiedPopoverContent);
-    navigator.clipboard.writeText(text)["catch"](function (e) {
-      return console.error(e);
-    });
-    onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      attemptCopy = _useState6[0],
+      setAttemptCopy = _useState6[1];
 
-    if (timer) {
-      clearTimeout(timer);
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      timeoutId = _useState8[0],
+      setTimeoutId = _useState8[1];
+
+  var cleanup = function cleanup() {
+    if (timeoutId) {
+      // console.log(`Clearing timeout ${timeoutId}`);
+      clearTimeout(timeoutId);
+    }
+  };
+
+  useEffect$1(function () {
+    if (startTimer) {
+      if (timeoutId) {
+        // If there's an active timeout, clean it up.
+        cleanup();
+      } // Start a timeout to restore popover content to the initial value.
+      // Record the ID of the timeout so it can be cleaned up later.
+      // console.log("Starting timeout");
+
+
+      setTimeoutId(setTimeout(function () {
+        // console.log(`Timeout ${timeoutId} finished`);
+        setPopoverContent(initialPopoverContent);
+      }, copiedPopoverContentDuration)); // Set startTimer to false immediately after starting the timer,
+      // so subsequent clicks will start a new timer, refreshing the duration.
+
+      setStartTimer(false);
+    } // Return cleanup function so timeout will be cleared when component unmoumnts.
+
+
+    return cleanup;
+  }, [startTimer]);
+  useEffect$1(function () {
+    if (attemptCopy) {
+      navigator.clipboard.writeText(content).then(function () {
+        setPopoverContent(copySuccessPopoverContent);
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+        setAttemptCopy(false);
+      })["catch"](function (error) {
+        console.error(error);
+        setPopoverContent(copyErrorPopoverContent);
+        setAttemptCopy(false);
+      });
     }
+  }, [attemptCopy]);
 
-    setTimer(setTimeout(function () {
-      setPopoverContent(initialPopoverContent);
-      setTimer(undefined);
-    }, copiedPopoverContentDuration));
+  var onClick = function onClick() {
+    setStartTimer(true);
+    setAttemptCopy(true);
   };
 
-  return withPopover ? /*#__PURE__*/React.createElement(Popover$1, {
+  var popoverArrowWidth = "8px";
+  return hasPopover ? /*#__PURE__*/React.createElement(Popover$1, {
     minWidth: popoverMinWidth,
-    position: popoverPosition,
-    arrowPosition: popoverArrowPosition,
+    position: {
+      top: "auto",
+      right: "auto",
+      bottom: "auto",
+      left: "calc(-".concat(popoverArrowWidth, " - 8px)")
+    },
+    arrowPosition: {
+      arrowTop: "auto",
+      arrowRight: "-8px",
+      arrowBottom: "calc(50% - ".concat(popoverArrowWidth, ")"),
+      arrowLeft: "auto"
+    },
+    transform: "translate(-100%, -75%)",
+    arrowDirection: "right",
     popoverID: popoverID,
-    extraStyles: "> button#btnPopover".concat(popoverID, " { margin: 0 }; ").concat(extraStyles),
-    triggerText: CopyableText({
-      text: text,
+    buttonExtraStyles: "margin: 0",
+    extraStyles: popoverExtraStyles,
+    triggerText: CopyableContent({
+      content: content,
       onClick: onClick
     }),
     content: popoverContent
-  }) : CopyableText({
-    text: text,
+  }) : CopyableContent({
+    content: content,
     onClick: onClick
   });
 };