@deque/cauldron-react 6.5.0-canary.946b10da → 6.5.0-canary.c570eceb

package/lib/components/CopyButton/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ContentNode } from '../../types';
+import Button from '../Button';
+import Tooltip from '../Tooltip';
+type ButtonProps = React.ComponentProps<typeof Button>;
+export interface CopyButtonProps extends Omit<ButtonProps, 'onCopy' | 'onClick'> {
+    value: string;
+    variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary' | 'tertiary'>;
+    children?: ContentNode;
+    notificationLabel?: ContentNode;
+    hideVisibleLabel?: boolean;
+    tooltipPlacement?: React.ComponentProps<typeof Tooltip>['placement'];
+    onCopy?: (text: string) => void;
+}
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default CopyButton;

package/lib/copy.js

@@ -25,14 +25,13 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const SvgCopy = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  overflow: "visible",
-  preserveAspectRatio: "none",
-  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-1 -1 19 19",
   height: 24,
   width: 24
 }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
-  vectorEffect: "non-scaling-stroke",
+  d: "M7 0C5.9 0 5 .9 5 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H7ZM2 5C.9 5 0 5.9 0 7v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-2H9v2H2V7h2V5H2Z",
   fill: "currentColor"
 })));
 

package/lib/index.d.ts

@@ -58,6 +58,7 @@ export { default as Combobox, ComboboxOption, ComboboxGroup } from './components
 export { default as Popover } from './components/Popover';
 export { default as Timeline, TimelineItem } from './components/Timeline';
 export { default as TextEllipsis } from './components/TextEllipsis';
+export { default as CopyButton } from './components/CopyButton';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -4098,6 +4098,95 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
 });
 TextEllipsis.displayName = 'TextEllipsis';
 
+function copyTextToClipboard(text) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+        var copied, element, range, selection;
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    copied = false;
+                    if (!('clipboard' in navigator)) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(text)];
+                case 2:
+                    _a.sent();
+                    copied = true;
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    element = document.createElement('span');
+                    element.textContent = text;
+                    element.setAttribute('aria-hidden', 'true');
+                    element.style.position = 'absolute';
+                    element.style.height = '1px';
+                    element.style.width = '1px';
+                    element.style.overflow = 'hidden';
+                    element.style.clip = 'rect(1px, 1px, 1px, 1px)';
+                    element.style.marginTop = '-1px';
+                    element.style.webkitUserSelect = 'text';
+                    element.style.userSelect = 'text';
+                    document.body.appendChild(element);
+                    range = document.createRange();
+                    selection = document.getSelection();
+                    range.selectNodeContents(element);
+                    selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+                    try {
+                        document.execCommand(text);
+                        copied = true;
+                    }
+                    catch (ex) {
+                        // no fallback
+                    }
+                    element.remove();
+                    _a.label = 6;
+                case 6: return [2 /*return*/, copied];
+            }
+        });
+    });
+}
+
+var NOTIFICATION_TIMEOUT_MS = 2000;
+var CopyButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, value = _a.value, _b = _a.variant, variant = _b === void 0 ? 'tertiary' : _b, _c = _a.children, children = _c === void 0 ? 'Copy' : _c, _d = _a.notificationLabel, notificationLabel = _d === void 0 ? 'Copied' : _d, _e = _a.hideVisibleLabel, hideVisibleLabel = _e === void 0 ? false : _e, _f = _a.tooltipPlacement, tooltipPlacement = _f === void 0 ? 'auto' : _f, onCopy = _a.onCopy, props = tslib.__rest(_a, ["className", "value", "variant", "children", "notificationLabel", "hideVisibleLabel", "tooltipPlacement", "onCopy"]);
+    var _g = tslib.__read(React.useState(false), 2), copied = _g[0], setCopied = _g[1];
+    var copyButtonRef = useSharedRef(ref);
+    var handleClick = React.useCallback(function () {
+        copyTextToClipboard(value);
+        setCopied(true);
+        if (typeof onCopy === 'function') {
+            onCopy(value);
+        }
+    }, [value, onCopy]);
+    React.useEffect(function () {
+        var timeoutId = setTimeout(function () {
+            setCopied(false);
+        }, NOTIFICATION_TIMEOUT_MS);
+        return function () {
+            clearTimeout(timeoutId);
+        };
+    }, [copied]);
+    // The visibility of the tooltip only needs to be controlled
+    // when we are visually displaying the notification label
+    var showTooltip = hideVisibleLabel && !copied ? undefined : copied ? true : false;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Button, tslib.__assign({ className: classNames__default["default"](className, {
+                'Button--condensed': hideVisibleLabel
+            }), ref: copyButtonRef, variant: variant, onClick: handleClick }, props),
+            React__default["default"].createElement(Icon, { type: copied ? 'check-solid' : 'copy' }),
+            hideVisibleLabel ? React__default["default"].createElement(Offscreen, null, children) : children),
+        React__default["default"].createElement(Tooltip, { target: copyButtonRef, placement: tooltipPlacement, association: "none", show: showTooltip }, hideVisibleLabel && !copied ? children : notificationLabel),
+        typeof document !== 'undefined' &&
+            reactDom.createPortal(React__default["default"].createElement(Offscreen, { "aria-live": "polite" }, copied ? notificationLabel : ' '), 
+            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            document.body)));
+});
+CopyButton.displayName = 'CopyButton';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4192,6 +4281,7 @@ exports.ColumnRight = ColumnRight;
 exports.Combobox = Combobox;
 exports.ComboboxGroup = ComboboxGroup;
 exports.ComboboxOption = ComboboxOption;
+exports.CopyButton = CopyButton;
 exports.DescriptionDetails = DescriptionDetails;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListItem = DescriptionListItem;

package/lib/utils/copyTextToClipboard.d.ts

@@ -0,0 +1 @@
+export default function copyTextToClipboard(text: string): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.5.0-canary.946b10da",
+  "version": "6.5.0-canary.c570eceb",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -93,7 +93,8 @@
     "exclude": [
       "lib",
       "coverage",
-      "test/**/*.js"
+      "test/**/*.js",
+      "test/**/*.e2e.tsx"
     ]
   }
 }