@deque/cauldron-react 6.6.1-canary.cd63c05f → 6.6.1-canary.db04cb91

package/README.md

@@ -22,6 +22,10 @@ yarn add @deque/cauldron-react @deque/cauldron-styles
 
 To get started, follow our [usage guide](https://cauldron.dequelabs.com/#usage) that includes setup instructions and necessary dependencies. Further documentation is also available at [cauldron.dequelabs.com](https://cauldron.dequelabs.com) that includes documentation for every available Cauldron component.
 
+## Attribution
+
+Some Cauldron icons use Font Awesome Free and Font Awesome Pro. Their licenses can be found here: [Font Awesome Free License](https://fontawesome.com/license/free) and [Font Awesome Pro License](https://fontawesome.com/license).
+
 ## Contribute
 
 If you're interested in contributing to Cauldron, you can check out our [contribution guide](https://github.com/dequelabs/cauldron/blob/develop/CONTRIBUTING.md) as well as our [code of conduct](https://github.com/dequelabs/cauldron/blob/develop/CODE_OF_CONDUCT.md).

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import type { ContentNode } from '../../types';
+import CopyButton from '../CopyButton';
 type Props = {
     children: string;
     language?: 'javascript' | 'css' | 'html' | 'yaml';
     className?: string;
     scrollable?: boolean;
+    label?: ContentNode;
+    allowCopy?: boolean;
+    copyButtonProps?: React.ComponentProps<typeof CopyButton>;
 } & SyntaxHighlighterProps & React.HTMLAttributes<HTMLDivElement>;
 declare const Code: React.ComponentType<React.PropsWithChildren<Props>>;
 export default Code;

package/lib/index.js

@@ -2540,6 +2540,117 @@ var SearchField = React.forwardRef(function (_a, ref) {
 });
 SearchField.displayName = 'SearchField';
 
+/**
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
+ */
+function useSharedRef(ref) {
+    var internalRef = React.useRef();
+    React.useEffect(function () {
+        setRef(ref, internalRef.current);
+    }, [ref]);
+    return internalRef;
+}
+
+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';
+
 SyntaxHighlighter__default["default"].registerLanguage('javascript', js__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('css', css__default["default"]);
 SyntaxHighlighter__default["default"].registerLanguage('html', xml__default["default"]);
@@ -2547,9 +2658,10 @@ SyntaxHighlighter__default["default"].registerLanguage('yaml', yaml__default["de
 // HACK: This is a workaround for a bug in react-syntax-highlighter's types.
 var Highlighter = SyntaxHighlighter__default["default"];
 var Code = function (_a) {
-    var children = _a.children, className = _a.className, _b = _a.scrollable, scrollable = _b === void 0 ? false : _b, props = tslib.__rest(_a, ["children", "className", "scrollable"]);
+    var children = _a.children, className = _a.className, _b = _a.scrollable, scrollable = _b === void 0 ? false : _b, label = _a.label, _c = _a.allowCopy, allowCopy = _c === void 0 ? false : _c, copyButtonProps = _a.copyButtonProps, props = tslib.__rest(_a, ["children", "className", "scrollable", "label", "allowCopy", "copyButtonProps"]);
     var ref = React.useRef(null);
-    var _c = tslib.__read(React.useState(false), 2), scrollableRegion = _c[0], setScrollableRegion = _c[1];
+    var _d = tslib.__read(React.useState(false), 2), scrollableRegion = _d[0], setScrollableRegion = _d[1];
+    var _e = tslib.__read(nextId.useId(1, 'code'), 1), id = _e[0];
     // react-syntax-highlighter does not provide direct access to its dom elements
     // via refs, but we can specify the wrapping tags to bypass this limitation
     // see: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/335
@@ -2573,9 +2685,13 @@ var Code = function (_a) {
             setScrollableRegion(false);
         };
     }, [scrollable]);
-    return (React__default["default"].createElement(Highlighter, tslib.__assign({}, props, { PreTag: PreWithRef, useInlineStyles: false, className: classNames__default["default"]('Code', className, {
-            'Code--scrollable': scrollable
-        }), tabIndex: scrollableRegion ? 0 : undefined }), children));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        (label || allowCopy) && (React__default["default"].createElement("div", { className: "Code__Header" },
+            label && React__default["default"].createElement("span", { id: "".concat(id, "-label") }, label),
+            allowCopy && React__default["default"].createElement(CopyButton, tslib.__assign({ value: children }, copyButtonProps)))),
+        React__default["default"].createElement(Highlighter, tslib.__assign({}, props, { PreTag: PreWithRef, useInlineStyles: false, className: classNames__default["default"]('Code', className, {
+                'Code--scrollable': scrollable
+            }), tabIndex: scrollableRegion ? 0 : undefined }), children)));
 };
 Code.displayName = 'Code';
 
@@ -2585,28 +2701,6 @@ function AxeLoader() {
         React__default["default"].createElement("path", { fill: "currentColor", d: "M379 549.9h-27.6v-16.7c-7.4 13.5-22.8 20.2-39 20.2-37.1 0-58.9-28.9-58.9-61.6 0-36.5 26.4-61.4 58.9-61.4 21.1 0 34 11.2 39 20.5V434H379v115.9zm-97.8-57.4c0 14.3 10.3 35.2 35.2 35.2 15.4 0 25.5-8 30.8-18.6 2.7-5.1 4-10.5 4.4-16.2.2-5.5-.8-11.2-3.2-16.2-4.9-11-15.6-20.5-32.3-20.5-22.4 0-35 18.1-35 36.1v.2zM436.2 488.9l-39-54.8h33.3l22.6 35.6 22.6-35.6h32.9l-38.8 54.8 43.2 61h-34L453.1 510l-26.2 39.9h-33.5l42.8-61z" })));
 }
 
-/**
- * When a component needs to track an internal ref on a component that has a
- * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
- * correctly invoke the parent ref as well providing an internal ref.
- *
- * @example
- * React.forwardRef(function Component({ children }, ref) {
- *   const internalRef = useSharedRef<HTMLElement>(ref)
- *   if (internalRef.current) {
- *     // do something with the internal ref...
- *   }
- *   return (<div ref={internalRef}>...</div>)
- * })
- */
-function useSharedRef(ref) {
-    var internalRef = React.useRef();
-    React.useEffect(function () {
-        setRef(ref, internalRef.current);
-    }, [ref]);
-    return internalRef;
-}
-
 var LoaderOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "label", "children", "focusOnInitialRender", "focusTrap"]);
     var overlayRef = useSharedRef(ref);
@@ -4120,95 +4214,6 @@ 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.6.1-canary.cd63c05f",
+  "version": "6.6.1-canary.db04cb91",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",