@deque/cauldron-react 6.5.0 → 6.6.0

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

@@ -1,11 +1,12 @@
-import React, { InputHTMLAttributes, Ref } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     label: React.ReactNode;
     labelDescription?: React.ReactNode;
     error?: React.ReactNode;
     customIcon?: React.ReactNode;
-    checkboxRef?: Ref<HTMLInputElement>;
+    checkboxRef?: React.ForwardedRef<HTMLInputElement>;
+    indeterminate?: boolean;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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/components/Tag/index.d.ts

@@ -2,13 +2,14 @@ import React from 'react';
 interface TagProps {
     children: React.ReactNode;
     className?: string;
+    size?: 'default' | 'small';
 }
 export declare const TagLabel: {
     ({ children, className, ...other }: TagProps): React.JSX.Element;
     displayName: string;
 };
 declare const Tag: {
-    ({ children, className, ...other }: TagProps): React.JSX.Element;
+    ({ children, className, size, ...other }: TagProps): React.JSX.Element;
     displayName: string;
 };
 export default Tag;

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

@@ -2325,23 +2325,27 @@ var RadioCardGroup = function (_a) {
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "children"]);
-    var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
-    var _e = tslib.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
+    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "indeterminate", "children"]);
+    var _e = tslib.__read(React.useState(checked), 2), isChecked = _e[0], setIsChecked = _e[1];
+    var _f = tslib.__read(React.useState(indeterminate), 2), isIndeterminate = _f[0], setIsIndeterminate = _f[1];
+    var _g = tslib.__read(React.useState(false), 2), focused = _g[0], setFocused = _g[1];
     var checkRef = React.useRef(null);
     React.useEffect(function () {
         setIsChecked(checked);
     }, [checked]);
+    React.useEffect(function () {
+        setIsIndeterminate(indeterminate);
+    }, [indeterminate]);
     var refProp = ref || checkboxRef;
     if (typeof refProp === 'function') {
         refProp(checkRef.current);
     }
-    var _f = React.useMemo(function () {
+    var _h = React.useMemo(function () {
         return {
             labelDescriptionId: nextId__default["default"](),
             errorId: nextId__default["default"]()
         };
-    }, []), errorId = _f.errorId, labelDescriptionId = _f.labelDescriptionId;
+    }, []), errorId = _h.errorId, labelDescriptionId = _h.labelDescriptionId;
     var ariaDescribedbyId = ariaDescribedby;
     if (error) {
         ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
@@ -2349,6 +2353,21 @@ var Checkbox = React.forwardRef(function (_a, ref) {
     if (labelDescription) {
         ariaDescribedbyId = addIdRef(ariaDescribedbyId, labelDescriptionId);
     }
+    var iconType = isChecked
+        ? 'checkbox-checked'
+        : 'checkbox-unchecked';
+    React.useEffect(function () {
+        var input;
+        if (refProp && typeof refProp !== 'function') {
+            input = refProp.current;
+        }
+        else {
+            input = checkRef.current;
+        }
+        if (input) {
+            input.indeterminate = isIndeterminate;
+        }
+    }, [isIndeterminate, refProp, checkRef]);
     return (React__default["default"].createElement("div", { className: "Checkbox__wrap" },
         React__default["default"].createElement("div", { className: classNames__default["default"]('Checkbox is--flex-row', className) },
             React__default["default"].createElement("input", tslib.__assign({ id: id, ref: typeof refProp === 'function' || !refProp ? checkRef : refProp, type: "checkbox", checked: isChecked, disabled: disabled, onFocus: function (e) {
@@ -2362,6 +2381,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                         onBlur(e);
                     }
                 }, "aria-describedby": ariaDescribedbyId, onChange: function (e) {
+                    if (isIndeterminate) {
+                        setIsIndeterminate(false);
+                    }
                     setIsChecked(e.target.checked);
                     if (onChange) {
                         onChange(e);
@@ -2374,10 +2396,10 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                     'Checkbox__overlay--disabled': disabled,
                     'Checkbox__overlay--focused': focused,
                     'Field--has-error': error
-                }), type: isChecked ? 'checkbox-checked' : 'checkbox-unchecked', "aria-hidden": "true", onClick: function () {
+                }), type: iconType, "aria-hidden": "true", onClick: function () {
                     var _a, _b;
                     if (refProp && typeof refProp !== 'function') {
-                        (_a = refProp === null || refProp === void 0 ? void 0 : refProp.current) === null || _a === void 0 ? void 0 : _a.click();
+                        (_a = refProp.current) === null || _a === void 0 ? void 0 : _a.click();
                     }
                     else {
                         (_b = checkRef.current) === null || _b === void 0 ? void 0 : _b.click();
@@ -2634,8 +2656,10 @@ var TagLabel = function (_a) {
 };
 TagLabel.displayName = 'TagLabel';
 var Tag = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Tag', className) }, other), children));
+    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'default' : _b, other = tslib.__rest(_a, ["children", "className", "size"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Tag', className, {
+            'Tag--small': size === 'small'
+        }) }, other), children));
 };
 Tag.displayName = 'Tag';
 
@@ -4096,6 +4120,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({
@@ -4190,6 +4303,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",
+  "version": "6.6.0",
   "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"
     ]
   }
 }