@thecb/components 7.0.2-beta.5 → 7.0.2-beta.7

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,12 @@ 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,
+      _ref$transform = _ref.transform,
+      transform = _ref$transform === void 0 ? "none" : _ref$transform,
+      buttonExtraStyles = _ref.buttonExtraStyles;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -22847,7 +22868,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 +22888,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, ";\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          ")
   })));
 };
 
@@ -37441,7 +37463,6 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     }
   };
 
-  useEffect$1(function () {}, [isOpen]);
   var numChildren = typeof children === "Array" ? children.length : 1;
   var label = name !== "" ? name : !customTitle ? title : "collapsible section";
   var id = "".concat(label === null || label === void 0 ? void 0 : (_label$replaceAll = label.replaceAll(" ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
@@ -37551,8 +37572,8 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
     width: "16",
     height: "18"
   }, /*#__PURE__*/React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
     d: "M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z",
     fill: themeValues.singleIconColor
   })), /*#__PURE__*/React.createElement("g", {
@@ -37567,13 +37588,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",
@@ -37584,79 +37615,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,
+      popoverMinWidth = _ref2$popoverMinWidth === void 0 ? "max-content" : _ref2$popoverMinWidth,
       _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.
+
 
-    setTimer(setTimeout(function () {
-      setPopoverContent(initialPopoverContent);
-      setTimer(undefined);
-    }, copiedPopoverContentDuration));
+    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]);
+
+  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 }; > #Disclosed").concat(popoverID, " { transform: translateX(-50%); }; ").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
   });
 };