@deque/cauldron-react 6.6.1 → 6.7.0-canary.099092f1

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/broken-image.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+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 SvgBrokenImage = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M22.154 0H1.846c-.49 0-.96.23-1.305.639C.195 1.049 0 1.603 0 2.182v19.636c0 .579.195 1.134.54 1.543.347.41.817.639 1.306.639h7.385a.831.831 0 0 0 .54-.206c.157-.134.274-.323.335-.54l1.712-6.065 4.22-1.994a.935.935 0 0 0 .31-.242c.088-.105.158-.23.205-.366l1.687-4.984 5.132-2.023a.952.952 0 0 0 .455-.398A1.23 1.23 0 0 0 24 6.545V2.182c0-.579-.195-1.134-.54-1.543C23.112.229 22.642 0 22.153 0ZM10.2 16.019l-1.636 5.8H1.846V18l6-7.09 3.51 4.147-.625.293a.933.933 0 0 0-.327.266c-.092.115-.16.253-.203.403Zm11.953-10.26-4.907 1.933a.908.908 0 0 0-.342.242 1.117 1.117 0 0 0-.224.388l-1.698 5.021-1.762.839-4.07-4.81c-.346-.409-.815-.638-1.305-.638s-.959.23-1.305.638l-4.695 5.542V2.182h20.308v3.577Zm1.463 4.5a.852.852 0 0 0-.4-.194.789.789 0 0 0-.432.044l-2.746 1.082a.908.908 0 0 0-.341.241 1.117 1.117 0 0 0-.224.388l-1.652 4.878-4.127 1.951a.934.934 0 0 0-.328.265 1.146 1.146 0 0 0-.204.403l-.916 3.246a1.28 1.28 0 0 0-.037.51c.021.17.078.333.163.474.086.14.198.254.329.333.13.079.274.12.42.12h9.032c.49 0 .96-.23 1.305-.639.346-.41.541-.964.541-1.543V11.145c0-.173-.035-.343-.101-.497a1.062 1.062 0 0 0-.282-.388v-.001Zm-1.463 11.56h-7.75l.374-1.33 4.098-1.937a.936.936 0 0 0 .31-.242c.088-.104.158-.229.204-.366l1.639-4.842 1.125-.443v9.16Z"
+})));
+
+exports["default"] = SvgBrokenImage;

package/lib/cauldron.css

@@ -39,6 +39,12 @@
   }
 }
 
+a.Button--primary,
+a.Button--secondary,
+a.Button--thin {
+  font-weight: var(--font-weight-medium);
+}
+
 a.Button--primary,
 a.Button--secondary {
   text-decoration: none;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContentNode } from '../../types';
+declare const BottomSheet: React.ForwardRefExoticComponent<{
+    label: ContentNode;
+    closeButtonText?: ContentNode | undefined;
+    open?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & Pick<import("../Drawer").DrawerProps<HTMLElement> & React.RefAttributes<HTMLDivElement>, "open" | "onClose" | "portal" | "focusOptions"> & React.RefAttributes<HTMLDivElement>>;
+export default BottomSheet;

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

@@ -4,23 +4,7 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
     onClickOutside: (e: MouseEvent | TouchEvent) => void;
     mouseEvent?: 'mousedown' | 'click' | 'mouseup' | false;
     touchEvent?: 'touchstart' | 'touchend' | false;
-    target?: T;
-}
-export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
-    static displayName: string;
-    static defaultProps: {
-        mouseEvent: string;
-        touchEvent: string;
-    };
-    private nodeRef;
-    handleEvent: (event: MouseEvent | TouchEvent) => void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ClickOutsideListenerProps): void;
-    componentWillUnmount(): void;
-    private attachEventListeners;
-    private removeEventListeners;
-    resolveRef: (node: HTMLElement) => void;
-    render(): React.FunctionComponentElement<{
-        ref: (node: HTMLElement) => void;
-    }> | null;
+    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
 }
+declare const _default: React.ForwardRefExoticComponent<ClickOutsideListenerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    open?: boolean;
+    behavior?: 'modal' | 'non-modal';
+    focusOptions?: {
+        initialFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+        returnFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    };
+    onClose?: () => void;
+    portal?: React.RefObject<HTMLElement> | HTMLElement;
+}
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
+export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'broken-image' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/images.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+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 SvgImages = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M160 32c-35.3 0-64 28.7-64 64v224c0 35.3 28.7 64 64 64h352c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160zm236 106.7 96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320H200c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84c4.5-6.6 12-10.6 20-10.6s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1-64 0zm-144-8c0-13.3-10.7-24-24-24S0 106.7 0 120v224c0 75.1 60.9 136 136 136h320c13.3 0 24-10.7 24-24s-10.7-24-24-24H136c-48.6 0-88-39.4-88-88V120z",
+  fill: "currentColor"
+})));
+
+exports["default"] = SvgImages;

package/lib/index.d.ts

@@ -59,6 +59,8 @@ 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';
+export { default as Drawer } from './components/Drawer';
+export { default as BottomSheet } from './components/BottomSheet';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -114,6 +114,7 @@ var iconTypes = [
     'arrow-right',
     'arrows-alt',
     'bolt',
+    'broken-image',
     'caution',
     'check-circle',
     'check-shield',
@@ -149,6 +150,7 @@ var iconTypes = [
     'hamburger-menu',
     'hashtag',
     'highlight',
+    'images',
     'info-circle-alt',
     'info-circle',
     'info-square',
@@ -205,6 +207,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow.js'); });
     case './icons/arrows-alt.svg': return Promise.resolve().then(function () { return require('./arrows-alt.js'); });
     case './icons/bolt.svg': return Promise.resolve().then(function () { return require('./bolt.js'); });
+    case './icons/broken-image.svg': return Promise.resolve().then(function () { return require('./broken-image.js'); });
     case './icons/caution.svg': return Promise.resolve().then(function () { return require('./caution.js'); });
     case './icons/check-circle.svg': return Promise.resolve().then(function () { return require('./check-circle.js'); });
     case './icons/check-shield.svg': return Promise.resolve().then(function () { return require('./check-shield.js'); });
@@ -234,6 +237,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/hamburger-menu.svg': return Promise.resolve().then(function () { return require('./hamburger-menu.js'); });
     case './icons/hashtag.svg': return Promise.resolve().then(function () { return require('./hashtag.js'); });
     case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight.js'); });
+    case './icons/images.svg': return Promise.resolve().then(function () { return require('./images.js'); });
     case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt.js'); });
     case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
     case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
@@ -789,74 +793,70 @@ var OptionsMenuWrapper = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('OptionsMenu', menuAlignment(align), className) }, other)));
 };
 
-var ClickOutsideListener = /** @class */ (function (_super) {
-    tslib.__extends(ClickOutsideListener, _super);
-    function ClickOutsideListener() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleEvent = function (event) {
-            var _a = _this, nodeRef = _a.nodeRef, props = _a.props;
-            var onClickOutside = props.onClickOutside, target = props.target;
-            if (event.defaultPrevented) {
-                return;
-            }
-            var eventTarget = event.target;
-            if ((target && !target.contains(eventTarget)) ||
-                (nodeRef && !nodeRef.contains(eventTarget))) {
-                onClickOutside(event);
-            }
-        };
-        _this.attachEventListeners = function () {
-            var _a = _this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
-            typeof mouseEvent === 'string' &&
-                document.addEventListener(mouseEvent, _this.handleEvent);
-            typeof touchEvent === 'string' &&
-                document.addEventListener(touchEvent, _this.handleEvent);
-        };
-        _this.removeEventListeners = function (mouseEvent, touchEvent) {
-            typeof mouseEvent === 'string' &&
-                document.removeEventListener(mouseEvent, _this.handleEvent);
-            typeof touchEvent === 'string' &&
-                document.removeEventListener(touchEvent, _this.handleEvent);
-        };
-        _this.resolveRef = function (node) {
-            _this.nodeRef = node;
-            // If child has its own ref, we want to update
-            // its ref with the newly cloned node
-            var ref = _this.props.children.ref;
-            setRef(ref, node);
-        };
-        return _this;
+/**
+ * When an element can be passed as a value that is either an element or an
+ * elementRef, this will resolve the property down to the resulting element
+ */
+function resolveElement(elementOrRef) {
+    if (elementOrRef instanceof Element) {
+        return elementOrRef;
     }
-    ClickOutsideListener.prototype.componentDidMount = function () {
-        this.attachEventListeners();
-    };
-    ClickOutsideListener.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
-        if (prevProps.mouseEvent !== mouseEvent ||
-            prevProps.touchEvent !== touchEvent) {
-            this.removeEventListeners(prevProps.mouseEvent, prevProps.touchEvent);
-            this.attachEventListeners();
+    if (elementOrRef &&
+        typeof elementOrRef === 'object' &&
+        'current' in elementOrRef &&
+        elementOrRef.current instanceof Element) {
+        return elementOrRef.current;
+    }
+    return null;
+}
+
+function ClickOutsideListener(_a, ref) {
+    var children = _a.children, _b = _a.mouseEvent, mouseEvent = _b === void 0 ? 'click' : _b, _c = _a.touchEvent, touchEvent = _c === void 0 ? 'touchend' : _c, target = _a.target, _d = _a.onClickOutside, onClickOutside = _d === void 0 ? function () { return null; } : _d;
+    var childElementRef = React.useRef();
+    var handleEvent = function (event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        var eventTarget = event.target;
+        var elementTarget = resolveElement(target);
+        if (target && !(elementTarget === null || elementTarget === void 0 ? void 0 : elementTarget.contains(eventTarget))) {
+            onClickOutside(event);
+            // If a target is passed in via a prop, we defer to utilizing that
+            // target instead of a child element target
+            return;
+        }
+        if (childElementRef.current &&
+            !childElementRef.current.contains(eventTarget)) {
+            onClickOutside(event);
         }
     };
-    ClickOutsideListener.prototype.componentWillUnmount = function () {
-        var _a = this.props, mouseEvent = _a.mouseEvent, touchEvent = _a.touchEvent;
-        this.removeEventListeners(mouseEvent, touchEvent);
-    };
-    ClickOutsideListener.prototype.render = function () {
-        var _a = this, props = _a.props, resolveRef = _a.resolveRef;
-        return !props.children
-            ? null
-            : React__default["default"].cloneElement(props.children, {
-                ref: resolveRef
-            });
-    };
-    ClickOutsideListener.displayName = 'ClickOutsideListener';
-    ClickOutsideListener.defaultProps = {
-        mouseEvent: 'click',
-        touchEvent: 'touchend'
+    var resolveRef = function (node) {
+        childElementRef.current = node;
+        // Ref for this component should pass-through to the child node
+        setRef(ref, node);
+        // If child has its own ref, we want to update
+        // its ref with the newly cloned node
+        var childRef = children.ref;
+        setRef(childRef, node);
     };
-    return ClickOutsideListener;
-}(React__default["default"].Component));
+    React.useEffect(function () {
+        typeof mouseEvent === 'string' &&
+            document.addEventListener(mouseEvent, handleEvent);
+        typeof touchEvent === 'string' &&
+            document.addEventListener(touchEvent, handleEvent);
+        return function () {
+            typeof mouseEvent === 'string' &&
+                document.removeEventListener(mouseEvent, handleEvent);
+            typeof touchEvent === 'string' &&
+                document.removeEventListener(touchEvent, handleEvent);
+        };
+    }, [mouseEvent, touchEvent]);
+    return !children
+        ? null
+        : React__default["default"].cloneElement(children, { ref: resolveRef });
+}
+ClickOutsideListener.displayName = 'ClickOutsideListener';
+var ClickOutsideListener$1 = React__default["default"].forwardRef(ClickOutsideListener);
 
 var _a$2 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$2[0], down$1 = _a$2[1], tab = _a$2[2], enter = _a$2[3], space = _a$2[4], esc = _a$2[5];
 var OptionsMenuList = /** @class */ (function (_super) {
@@ -962,7 +962,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
         // Key event is being handled in componentDidMount
         /* eslint-disable jsx-a11y/click-events-have-key-events */
         /* eslint-disable jsx-a11y/role-supports-aria-props */
-        return (React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
+        return (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
             React__default["default"].createElement("ul", tslib.__assign({}, other, { className: classNames__default["default"]('OptionsMenu__list', className), "aria-expanded": show, role: "menu", onClick: handleClick, ref: function (el) {
                     _this.menuRef = el;
                     if (menuRef) {
@@ -1310,7 +1310,7 @@ var SideBar = /** @class */ (function (_super) {
         var _b = this.props, children = _b.children, className = _b.className, show = _b.show; _b.onDismiss; var navProps = _b.navProps, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss", "navProps"]);
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (React__default["default"].createElement(React.Fragment, null,
-            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside },
                 React__default["default"].createElement("nav", tslib.__assign({}, navProps),
                     React__default["default"].createElement("ul", tslib.__assign({ className: classNames__default["default"]('SideBar', className, animateClass) }, other, { ref: this.navList, onKeyDown: this.onKeyDown }), children))),
             React__default["default"].createElement(Scrim, { show: !wide && show })));
@@ -1449,7 +1449,7 @@ var Dialog = /** @class */ (function (_super) {
                 escapeDeactivates: false,
                 fallbackFocus: '.Dialog__heading'
             } },
-            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
+            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: this.handleClickOutside },
                 React__default["default"].createElement("div", tslib.__assign({ role: "dialog", className: classNames__default["default"]('Dialog', className, {
                         'Dialog--show': show
                     }), ref: function (el) {
@@ -1665,6 +1665,46 @@ function hasIdRef(ids, id) {
     return idRefs(ids).has(id);
 }
 
+var isEscapeKey = function (event) {
+    return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
+};
+/**
+ * When a component needs to implement an escape handler, such as in modal
+ * dialogs, useEscapeKey will handle the events and call the provided callback
+ * handler when an escape key event has been fired.
+ *
+ * @example
+ * useEscapeKey(() => close())
+ */
+function useEscapeKey(options, dependencies) {
+    if (dependencies === void 0) { dependencies = []; }
+    var callback = options.callback;
+    var event = options.event || 'keyup';
+    var target = resolveElement(options.target) || document.body;
+    var active = typeof options.active === 'boolean' ? options.active : true;
+    React.useEffect(function () {
+        var eventListener = function (event) {
+            if (isEscapeKey(event) &&
+                (options.defaultPrevented ? !event.defaultPrevented : true)) {
+                callback(event);
+            }
+        };
+        if (active) {
+            target === null || target === void 0 ? void 0 : target.addEventListener(event, eventListener, options.capture);
+        }
+        return function () {
+            target === null || target === void 0 ? void 0 : target.removeEventListener(event, eventListener, options.capture);
+        };
+    }, tslib.__spreadArray([
+        active,
+        callback,
+        event,
+        target,
+        options.capture,
+        options.defaultPrevented
+    ], tslib.__read(dependencies), false));
+}
+
 var TIP_HIDE_DELAY = 100;
 // fires a custom "cauldron:tooltip:show" / "cauldron:tooltip:hide" event
 // to allow projects using cauldron to hook into when a tooltip is shown/hidden
@@ -1753,30 +1793,14 @@ function Tooltip(_a) {
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
     // Only listen to key ups when the tooltip is visible
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                event.preventDefault();
-                setShowTooltip(false);
-            }
-        };
-        var targetElement = document.body;
-        if (showTooltip && typeof showProp !== 'boolean') {
-            targetElement.addEventListener('keyup', handleEscape, { capture: true });
-        }
-        else {
-            targetElement.removeEventListener('keyup', handleEscape, {
-                capture: true
-            });
-        }
-        return function () {
-            targetElement.removeEventListener('keyup', handleEscape, {
-                capture: true
-            });
-        };
-    }, [showTooltip, showProp]);
+    useEscapeKey({
+        callback: function (event) {
+            event.preventDefault();
+            setShowTooltip(false);
+        },
+        capture: true,
+        active: showTooltip && typeof showProp !== 'boolean'
+    }, [setShowTooltip]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
         if (typeof showProp !== 'boolean') {
@@ -2540,6 +2564,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 +2682,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 +2709,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 +2725,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);
@@ -3198,25 +3316,10 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             mediaQueryList.removeEventListener('change', listener);
         };
     }, []);
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                setCollapsed(true);
-            }
-        };
-        var targetElement = document.body;
-        if (isFocusTrap) {
-            targetElement.addEventListener('keyup', handleEscape);
-        }
-        else {
-            targetElement.removeEventListener('keyup', handleEscape);
-        }
-        return function () {
-            targetElement.removeEventListener('keyup', handleEscape);
-        };
-    }, [isFocusTrap]);
+    useEscapeKey({
+        callback: function () { return setCollapsed(true); },
+        active: isFocusTrap
+    }, [setCollapsed]);
     var handleClickOutside = function () {
         if (!isCollapsed && isFocusTrap) {
             setCollapsed(true);
@@ -3232,7 +3335,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
                     allowOutsideClick: true,
                     fallbackFocus: columnLeftRef.current
                 }, containerElements: [columnLeftRef.current] }),
-            React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+            React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
             isCollapsed ? null : skipLink,
             showPanel ? ColumnLeftComponent : null,
             ColumnRightComponent)));
@@ -3264,8 +3367,8 @@ var iconTypeMap = {
 };
 var Notice = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, children = _a.children, otherProps = tslib.__rest(_a, ["type", "title", "icon", "variant", "children"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', (_b = {},
+    var className = _a.className, _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, children = _a.children, otherProps = tslib.__rest(_a, ["className", "type", "title", "icon", "variant", "children"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', className, (_b = {},
             _b["Notice--".concat(type)] = type,
             _b["Notice--condensed"] = variant === 'condensed',
             _b)), ref: ref }, otherProps),
@@ -3999,24 +4102,6 @@ var Popover = React.forwardRef(function (_a, ref) {
         }
         targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-expanded', Boolean(show).toString());
     }, [show, popoverRef.current]);
-    React.useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === 'Escape' ||
-                event.key === 'Esc' ||
-                event.keyCode === 27) {
-                handleClosePopover();
-            }
-        };
-        if (show) {
-            document.body.addEventListener('keyup', handleEscape);
-        }
-        else {
-            document.body.removeEventListener('keyup', handleEscape);
-        }
-        return function () {
-            document.body.removeEventListener('keyup', handleEscape);
-        };
-    }, [show]);
     React.useEffect(function () {
         var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-controls');
         var hasPopupAttr = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-haspopup');
@@ -4043,13 +4128,17 @@ var Popover = React.forwardRef(function (_a, ref) {
             onClose();
         }
     };
+    useEscapeKey({
+        callback: handleClosePopover,
+        active: show
+    }, [show]);
     if (!show || !isBrowser())
         return null;
     return reactDom.createPortal(React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
             allowOutsideClick: true,
             fallbackFocus: '.Popover__borderLeft'
         } },
-        React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside },
+        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
             React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                     'Popover--hidden': !show,
                     'Popover--prompt': variant === 'prompt'
@@ -4120,94 +4209,132 @@ 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);
+var Drawer = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, position = _a.position, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.behavior, behavior = _c === void 0 ? 'modal' : _c, _d = _a.focusOptions, focusOptions = _d === void 0 ? {} : _d, portal = _a.portal, onClose = _a.onClose, style = _a.style, props = tslib.__rest(_a, ["children", "className", "position", "open", "behavior", "focusOptions", "portal", "onClose", "style"]);
+    var drawerRef = useSharedRef(ref);
+    var openRef = React.useRef(!!open);
+    var previousActiveElementRef = React.useRef(null);
+    var focusInitial = focusOptions.initialFocus, focusReturn = focusOptions.returnFocus;
+    var _e = tslib.__read(React.useState(!!open), 2), isTransitioning = _e[0], setIsTransitioning = _e[1];
+    var isModal = behavior === 'modal';
+    var handleClose = React.useCallback(function () {
+        // istanbul ignore next
+        if (open && typeof onClose === 'function') {
+            onClose();
         }
-    }, [value, onCopy]);
+    }, [open, onClose]);
     React.useEffect(function () {
-        var timeoutId = setTimeout(function () {
-            setCopied(false);
-        }, NOTIFICATION_TIMEOUT_MS);
+        // jsdom does not trigger transitionend event
+        // istanbul ignore next
+        var transitionEndHandler = function () { return setIsTransitioning(false); };
+        document.addEventListener('transitionend', transitionEndHandler);
         return function () {
-            clearTimeout(timeoutId);
+            document.removeEventListener('transitionend', transitionEndHandler);
         };
-    }, [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)));
+    }, [setIsTransitioning]);
+    React.useEffect(function () {
+        if (openRef.current !== open) {
+            setIsTransitioning(true);
+        }
+        openRef.current = open;
+    }, [open, setIsTransitioning]);
+    React.useEffect(function () {
+        if (!isModal) {
+            return;
+        }
+        var isolator = new AriaIsolate(drawerRef.current);
+        if (open) {
+            isolator.activate();
+        }
+        else {
+            isolator.deactivate();
+        }
+        return function () {
+            isolator.deactivate();
+        };
+    }, [isModal, open]);
+    React.useLayoutEffect(function () {
+        var _a, _b, _c;
+        if (open) {
+            previousActiveElementRef.current =
+                document.activeElement;
+            var initialFocusElement = resolveElement(focusInitial);
+            if (initialFocusElement) {
+                initialFocusElement.focus();
+            }
+            else {
+                var focusable = (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector);
+                if (focusable) {
+                    focusable.focus();
+                }
+                else {
+                    // fallback focus
+                    (_b = drawerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            }
+        }
+        else if (previousActiveElementRef.current) {
+            var returnFocusElement = resolveElement(focusReturn);
+            if (returnFocusElement) {
+                returnFocusElement.focus();
+            }
+            else {
+                // fallback focus
+                (_c = previousActiveElementRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }
+    }, [open, focusInitial, focusReturn]);
+    useEscapeKey({ callback: handleClose, active: open, defaultPrevented: true }, [onClose]);
+    // istanbul ignore next
+    if (!isBrowser()) {
+        return null;
+    }
+    var portalElement = resolveElement(portal);
+    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClose, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: drawerRef },
+            React__default["default"].createElement(FocusTrap__default["default"], { active: !!isModal && !!open, focusTrapOptions: {
+                    allowOutsideClick: true,
+                    escapeDeactivates: false,
+                    clickOutsideDeactivates: false,
+                    initialFocus: false,
+                    setReturnFocus: false,
+                    fallbackFocus: function () { return drawerRef.current; }
+                } },
+                React__default["default"].createElement("div", tslib.__assign({ ref: drawerRef, className: classNames__default["default"](className, 'Drawer', {
+                        'Drawer--open': !!open,
+                        'Drawer--top': position === 'top',
+                        'Drawer--bottom': position === 'bottom',
+                        'Drawer--left': position === 'left',
+                        'Drawer--right': position === 'right'
+                    }), "aria-hidden": !open || undefined, style: tslib.__assign({ visibility: !open && !isTransitioning ? 'hidden' : undefined }, style), tabIndex: open ? -1 : undefined }, props), children))),
+        React__default["default"].createElement(Scrim, { show: !!open && !!isModal })), portalElement ||
+        (
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+        document === null || document === void 0 ? void 0 : document.body));
 });
-CopyButton.displayName = 'CopyButton';
+Drawer.displayName = 'Drawer';
+
+var BottomSheet = React.forwardRef(function (_a, ref) {
+    var label = _a.label, children = _a.children, className = _a.className, _b = _a.closeButtonText, closeButtonText = _b === void 0 ? 'Close' : _b, _c = _a.open, open = _c === void 0 ? false : _c, onClose = _a.onClose, focusOptions = _a.focusOptions, props = tslib.__rest(_a, ["label", "children", "className", "closeButtonText", "open", "onClose", "focusOptions"]);
+    var bottomSheetRef = useSharedRef(ref);
+    var _d = tslib.__read(nextId.useId(1, 'bottom-sheet-label'), 1), labelId = _d[0];
+    var handleClose = React.useCallback(function () {
+        // istanbul ignore else
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    }, [onClose]);
+    return (React__default["default"].createElement(Drawer, tslib.__assign({ open: open, onClose: handleClose, focusOptions: tslib.__assign({ initialFocus: bottomSheetRef }, focusOptions) }, props, { behavior: "modal", position: "bottom" }),
+        React__default["default"].createElement("div", { ref: bottomSheetRef, className: classNames__default["default"]('BottomSheet', className), tabIndex: -1, role: "dialog", "aria-labelledby": labelId },
+            React__default["default"].createElement("div", { className: "BottomSheet__header" },
+                React__default["default"].createElement("div", { id: labelId, className: "BottomSheet__title" }, label),
+                React__default["default"].createElement(IconButton, { icon: "close", label: closeButtonText, "aria-label": "".concat(closeButtonText), onClick: handleClose, tooltipProps: {
+                        show: false,
+                        association: 'none'
+                    } })),
+            React__default["default"].createElement("div", { className: "BottomSheet__contents" }, children))));
+});
+BottomSheet.displayName = 'BottomSheet';
 
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
@@ -4288,12 +4415,13 @@ exports.AlertContent = AlertContent;
 exports.AriaIsolate = AriaIsolate;
 exports.Badge = Badge;
 exports.BadgeLabel = BadgeLabel;
+exports.BottomSheet = BottomSheet;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
-exports.ClickOutsideListener = ClickOutsideListener;
+exports.ClickOutsideListener = ClickOutsideListener$1;
 exports.Code = Code;
 exports.ColumnGroupHeader = ColumnGroupHeader;
 exports.ColumnHeader = ColumnHeader;
@@ -4311,6 +4439,7 @@ exports.DescriptionTerm = DescriptionTerm;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
+exports.Drawer = Drawer;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;

package/lib/utils/resolveElement.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject, MutableRefObject } from 'react';
+/**
+ * When an element can be passed as a value that is either an element or an
+ * elementRef, this will resolve the property down to the resulting element
+ */
+export default function resolveElement<T extends Element = Element>(elementOrRef: T | RefObject<T> | MutableRefObject<T> | undefined): T | null;

package/lib/utils/useEscapeKey.d.ts

@@ -0,0 +1,17 @@
+import { type DependencyList } from 'react';
+/**
+ * When a component needs to implement an escape handler, such as in modal
+ * dialogs, useEscapeKey will handle the events and call the provided callback
+ * handler when an escape key event has been fired.
+ *
+ * @example
+ * useEscapeKey(() => close())
+ */
+export default function useEscapeKey<T extends HTMLElement = HTMLElement>(options: {
+    active?: boolean;
+    callback: (event: KeyboardEvent) => void;
+    event?: 'keydown' | 'keypress' | 'keyup';
+    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    defaultPrevented?: boolean;
+    capture?: boolean;
+}, dependencies?: DependencyList): void;

package/package.json

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