@thecb/components 7.0.1-beta.1 → 7.0.2-beta.1

package/dist/index.cjs.js

@@ -22874,7 +22874,7 @@ 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          ")
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.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, ";")
@@ -37539,6 +37539,135 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
 
 var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$z);
 
+var ClipboardIcon = function ClipboardIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_1104_623",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "2",
+    width: "16",
+    height: "18"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "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__default.createElement("g", {
+    mask: "url(#mask0_1104_623)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+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.
+*/
+
+var CopyableText = function CopyableText(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    "data-testid": "copyable-trigger",
+    contentOverride: true,
+    action: onClick,
+    variant: "ghost",
+    extraStyles: "padding: 0; margin: 0; min-height: initial; min-width: initial"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    childGap: "0.25rem"
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, text), /*#__PURE__*/React__default.createElement(ClipboardIcon$1, null)));
+};
+
+var Copyable = function Copyable(_ref2) {
+  var text = _ref2.text,
+      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$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.
+
+  };
+
+  var _useState = React.useState(initialPopoverContent),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverContent = _useState2[0],
+      setPopoverContent = _useState2[1];
+
+  var _useState3 = React.useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      timer = _useState4[0],
+      setTimer = _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();
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    setTimer(setTimeout(function () {
+      setPopoverContent(initialPopoverContent);
+      setTimer(undefined);
+    }, copiedPopoverContentDuration));
+  };
+
+  return withPopover ? /*#__PURE__*/React__default.createElement(Popover$1, {
+    minWidth: popoverMinWidth,
+    position: popoverPosition,
+    arrowPosition: popoverArrowPosition,
+    popoverID: popoverID,
+    extraStyles: "> button#btnPopover".concat(popoverID, " { margin: 0 }; #Disclosed").concat(popoverID, " { transform: translateX(-50%); }; ").concat(extraStyles),
+    triggerText: CopyableText({
+      text: text,
+      onClick: onClick
+    }),
+    content: popoverContent
+  }) : CopyableText({
+    text: text,
+    onClick: onClick
+  });
+};
+
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
       actions = _ref.actions,
@@ -46739,6 +46868,7 @@ exports.CheckmarkIcon = CheckmarkIcon;
 exports.ChevronIcon = ChevronIcon$1;
 exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
+exports.Copyable = Copyable;
 exports.CountryDropdown = CountryDropdown;
 exports.Cover = Cover;
 exports.CustomerSearchIcon = CustomerSearchIcon;