@deque/cauldron-react 4.1.0-canary.50e983d0 → 4.1.0-canary.9730c96d

package/lib/cauldron.css

@@ -34,7 +34,8 @@
   --expandcollapse-panel-color: var(--accent-light);
 }
 
-a.Button--primary {
+a.Button--primary,
+a.Button--secondary {
   text-decoration: none;
   padding: 9px 18px;
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export interface ClickOutsideListenerProps {
-    children: React.ReactNode;
+export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement> {
+    children?: React.ReactNode;
     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 defaultProps: {
@@ -12,7 +13,8 @@ export default class ClickOutsideListener extends React.Component<ClickOutsideLi
         touchEvent: string;
     };
     static propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        target: PropTypes.Requireable<any>;
         onClickOutside: PropTypes.Validator<(...args: any[]) => any>;
         mouseEvent: PropTypes.Requireable<string | boolean>;
         touchEvent: PropTypes.Requireable<string | boolean>;
@@ -27,5 +29,5 @@ export default class ClickOutsideListener extends React.Component<ClickOutsideLi
     resolveRef: (node: HTMLElement) => void;
     render(): React.FunctionComponentElement<{
         ref: (node: HTMLElement) => void;
-    }>;
+    }> | null;
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     linkRef?: React.Ref<HTMLAnchorElement>;
-    variant?: 'button';
+    variant?: 'button' | 'button-secondary';
 }
 declare const Link: {
     ({ children, linkRef, className, variant, ...other }: LinkProps): JSX.Element;

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

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
-declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, hideElementOnHidden, className, ...props }: TooltipProps): React.ReactPortal | null;
+declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): React.ReactPortal | null;
 declare namespace Tooltip {
     var displayName: string;
     var propTypes: {

package/lib/components/TwoColumnPanel/ColumnGroupHeader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ColumnGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ColumnGroupHeader: React.ForwardRefExoticComponent<ColumnGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ColumnGroupHeader;

package/lib/components/TwoColumnPanel/ColumnHeader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ColumnHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ColumnHeader: React.ForwardRefExoticComponent<ColumnHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ColumnHeader;

package/lib/components/TwoColumnPanel/ColumnLeft.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const ColumnLeft: React.ForwardRefExoticComponent<(React.HTMLAttributes<HTMLDivElement> & {
+    'aria-label': string;
+} & React.RefAttributes<HTMLDivElement>) | (React.HTMLAttributes<HTMLDivElement> & {
+    'aria-labelledby': string;
+} & React.RefAttributes<HTMLDivElement>)>;
+export default ColumnLeft;

package/lib/components/TwoColumnPanel/ColumnList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ColumnListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ColumnList: React.ForwardRefExoticComponent<ColumnListProps & React.RefAttributes<HTMLDivElement>>;
+export default ColumnList;

package/lib/components/TwoColumnPanel/ColumnRight.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const ColumnRight: React.ForwardRefExoticComponent<(React.HTMLAttributes<HTMLDivElement> & {
+    'aria-label': string;
+} & React.RefAttributes<HTMLDivElement>) | (React.HTMLAttributes<HTMLDivElement> & {
+    'aria-labelledby': string;
+} & React.RefAttributes<HTMLDivElement>)>;
+export default ColumnRight;

package/lib/components/TwoColumnPanel/TwoColumnPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TwoColumnPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    initialCollapsed?: boolean;
+    showCollapsedPanelLabel?: string;
+    hideCollapsedPanelLabel?: string;
+}
+declare const TwoColumnPanel: React.ForwardRefExoticComponent<TwoColumnPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TwoColumnPanel;

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

@@ -0,0 +1,6 @@
+export { default } from './TwoColumnPanel';
+export { default as ColumnHeader } from './ColumnHeader';
+export { default as ColumnGroupHeader } from './ColumnGroupHeader';
+export { default as ColumnLeft } from './ColumnLeft';
+export { default as ColumnRight } from './ColumnRight';
+export { default as ColumnList } from './ColumnList';

package/lib/index.d.ts

@@ -48,6 +48,7 @@ export { Address, AddressLine, AddressCityStateZip } from './components/Address'
 export { default as Pagination } from './components/Pagination';
 export { default as FieldWrap } from './components/FieldWrap';
 export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './components/Breadcrumb';
+export { default as TwoColumnPanel, ColumnHeader, ColumnGroupHeader, ColumnLeft, ColumnRight, ColumnList } from './components/TwoColumnPanel';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -608,12 +608,13 @@ var ClickOutsideListener = /** @class */ (function (_super) {
         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;
+            var onClickOutside = props.onClickOutside, target = props.target;
             if (event.defaultPrevented) {
                 return;
             }
-            var target = event.target;
-            if (nodeRef && !nodeRef.contains(target)) {
+            var eventTarget = event.target;
+            if ((target && !target.contains(eventTarget)) ||
+                (nodeRef && !nodeRef.contains(eventTarget))) {
                 onClickOutside(event);
             }
         };
@@ -656,16 +657,19 @@ var ClickOutsideListener = /** @class */ (function (_super) {
     };
     ClickOutsideListener.prototype.render = function () {
         var _a = this, props = _a.props, resolveRef = _a.resolveRef;
-        return React__default.cloneElement(props.children, {
-            ref: resolveRef
-        });
+        return !props.children
+            ? null
+            : React__default.cloneElement(props.children, {
+                ref: resolveRef
+            });
     };
     ClickOutsideListener.defaultProps = {
         mouseEvent: 'click',
         touchEvent: 'touchend'
     };
     ClickOutsideListener.propTypes = {
-        children: PropTypes.node.isRequired,
+        children: PropTypes.node,
+        target: PropTypes.any,
         onClickOutside: PropTypes.func.isRequired,
         mouseEvent: PropTypes.oneOf(['mousedown', 'click', 'mouseup', false]),
         touchEvent: PropTypes.oneOf(['touchstart', 'touchend', false])
@@ -1475,15 +1479,14 @@ var fireCustomEvent = function (show, button) {
 };
 function Tooltip(_a) {
     var _this = this;
-    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, showProp = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden", "className"]);
+    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, initialShow = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden", "className"]);
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
-    var hovering = React.useRef(false);
-    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
-    var _j = tslib.__read(React.useState(!!showProp), 2), showTooltip = _j[0], setShowTooltip = _j[1];
-    var _k = tslib.__read(React.useState(null), 2), targetElement = _k[0], setTargetElement = _k[1];
-    var _l = tslib.__read(React.useState(null), 2), tooltipElement = _l[0], setTooltipElement = _l[1];
-    var _m = tslib.__read(React.useState(null), 2), arrowElement = _m[0], setArrowElement = _m[1];
-    var _o = reactPopper.usePopper(targetElement, tooltipElement, {
+    var hideTimeoutRef = React.useRef(null);
+    var _h = tslib.__read(React.useState(!!initialShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
+    var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
+    var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
+    var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
+    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
             { name: 'preventOverflow', options: { padding: 8 } },
@@ -1491,11 +1494,17 @@ function Tooltip(_a) {
             { name: 'offset', options: { offset: [0, 8] } },
             { name: 'arrow', options: { padding: 5, element: arrowElement } }
         ]
-    }), styles = _o.styles, attributes = _o.attributes, update = _o.update;
-    var show = function () { return tslib.__awaiter(_this, void 0, void 0, function () {
+    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    // Show the tooltip
+    var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    // Clear the hide timeout if there was one pending
+                    if (hideTimeoutRef.current) {
+                        clearTimeout(hideTimeoutRef.current);
+                        hideTimeoutRef.current = null;
+                    }
                     if (!update) return [3 /*break*/, 2];
                     return [4 /*yield*/, update()];
                 case 1:
@@ -1507,45 +1516,31 @@ function Tooltip(_a) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var hide = function (_a) {
-        var target = _a.target;
-        if (document.activeElement !== target) {
-            setTimeout(function () {
-                if (!hovering.current) {
-                    setShowTooltip(false);
-                    fireCustomEvent(false, targetElement);
-                }
+    }); }, [
+        targetElement,
+        // update starts off as null
+        update
+    ]);
+    // Hide the tooltip
+    var hide = React.useCallback(function () {
+        if (!hideTimeoutRef.current) {
+            hideTimeoutRef.current = setTimeout(function () {
+                hideTimeoutRef.current = null;
+                setShowTooltip(false);
+                fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
-    };
-    var handleTriggerMouseEnter = function () {
-        hovering.current = true;
-        show();
-    };
-    var handleTriggerMouseLeave = function (e) {
-        hovering.current = false;
-        hide(e);
-    };
-    var handleTipMouseEnter = function () {
-        hovering.current = true;
-    };
-    var handleTipMouseLeave = function (e) {
-        hovering.current = false;
-        hide(e);
-    };
+    }, [targetElement]);
+    // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
         setTargetElement(targetElement);
     }, [target]);
-    var popperPlacement = (attributes.popper &&
+    // Get popper placement
+    var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
-    React.useEffect(function () {
-        if (popperPlacement) {
-            setPlacement(popperPlacement);
-        }
-    }, [popperPlacement]);
+    // Only listen to key ups when the tooltip is visible
     React.useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === 'Escape' ||
@@ -1564,31 +1559,30 @@ function Tooltip(_a) {
         return function () {
             targetElement.removeEventListener('keyup', handleEscape);
         };
-    }, [showProp]);
+    }, [showTooltip]);
+    // Handle hover and focus events for the targetElement
     React.useEffect(function () {
-        if (typeof showProp !== undefined) {
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', handleTriggerMouseEnter);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', handleTriggerMouseLeave);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
-        }
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
         return function () {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseenter', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseleave', hide);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, showProp]);
+    }, [targetElement, show, hide]);
+    // Handle hover events for the tooltipElement
     React.useEffect(function () {
-        if (tooltipElement) {
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', handleTipMouseEnter);
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', handleTipMouseLeave);
-        }
+        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
+        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
         return function () {
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', handleTipMouseEnter);
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', handleTipMouseLeave);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', show);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', hide);
         };
-    }, [tooltipElement]);
+    }, [tooltipElement, show, hide]);
+    // Keep the target's id in sync
     React.useEffect(function () {
         var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
         if (!(attrText === null || attrText === void 0 ? void 0 : attrText.includes(id || ''))) {
@@ -2022,7 +2016,7 @@ var queryAll = function (selector, context) {
 var typeMap = {
     confirmation: {
         className: 'success',
-        icon: 'info-circle'
+        icon: 'check-circle'
     },
     caution: {
         className: 'warning',
@@ -2196,7 +2190,8 @@ var Link = function (_a) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant"]);
     return (React__default.createElement("a", tslib.__assign({ ref: linkRef, className: classNames(className, {
             Link: !variant,
-            'Button--primary': variant === 'button'
+            'Button--primary': variant === 'button',
+            'Button--secondary': variant === 'button-secondary'
         }) }, other), children));
 };
 Link.propTypes = {
@@ -8492,6 +8487,172 @@ var BreadcrumbLink = React.forwardRef(function (_a, ref) {
     return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
 });
 
+var TwoColumnPanel = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel"]);
+    var _e = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _e[0], setCollapsed = _e[1];
+    var _f = tslib.__read(React.useState(false), 2), isFocusTrap = _f[0], setIsFocusTrap = _f[1];
+    var _g = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _g[0], setShowPanel = _g[1];
+    var togglePanel = function () {
+        if (isCollapsed) {
+            setShowPanel(true);
+        }
+        // Set collapsed state on next tick so css transitions can be applied
+        requestAnimationFrame(function () {
+            var _a, _b;
+            var collapsed = !isCollapsed;
+            setCollapsed(collapsed);
+            if (!collapsed) {
+                (_a = columnLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = columnRightRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        });
+    };
+    var toggleButtonRef = React.useRef(null);
+    var closeButtonRef = React.useRef(null);
+    var columnLeftRef = React.useRef(null);
+    var columnRightRef = React.useRef(null);
+    var columnLeft = React__default.Children.toArray(children).find(function (child) { return child.type === ColumnLeft; });
+    // The ColumnLeftComponent will end up being a focus trap when < 720px
+    // This component also gets unmounted when not visible meaning that any
+    // aria relationships cannot be set to items inside the component since
+    // they will not be present in the dom
+    var ColumnLeftComponent;
+    var columnLeftId;
+    if (React.isValidElement(columnLeft)) {
+        var ref_1 = columnLeft.props.ref || columnLeftRef;
+        var id = (columnLeftId =
+            columnLeft.props.id || nextId.useId(undefined, 'sidebar-')[0]);
+        var CloseButton = (React__default.createElement("div", { className: "TwoColumnPanel__Close" },
+            React__default.createElement("button", { type: "button", onClick: togglePanel, ref: closeButtonRef, "aria-label": hideCollapsedPanelLabel },
+                React__default.createElement(Icon, { type: "close" })),
+            React__default.createElement(Tooltip, { target: closeButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, hideCollapsedPanelLabel)));
+        var children_1 = tslib.__spread([
+            CloseButton
+        ], React__default.Children.toArray(columnLeft.props.children));
+        ColumnLeftComponent = React.cloneElement(columnLeft, { id: id, ref: ref_1, tabIndex: -1 }, children_1.map(function (child, index) {
+            return React.cloneElement(child, { key: "left-" + index });
+        }));
+    }
+    var columnRight = React__default.Children.toArray(children).find(function (child) { return child.type === ColumnRight; });
+    var ColumnRightComponent;
+    if (React.isValidElement(columnRight)) {
+        var ref_2 = columnRight.props.ref || columnRightRef;
+        var ToggleButton = (React__default.createElement("div", { className: "TwoColumnPanel__ButtonToggle" },
+            React__default.createElement("button", { type: "button", onClick: togglePanel, ref: toggleButtonRef, "aria-label": !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel, "aria-expanded": !isCollapsed, "aria-controls": columnLeftId },
+                React__default.createElement(Icon, { type: !isCollapsed ? 'chevron-double-left' : 'chevron-double-right' })),
+            React__default.createElement(Tooltip, { target: toggleButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel)));
+        var children_2 = tslib.__spread([
+            ToggleButton
+        ], React__default.Children.toArray(columnRight.props.children));
+        ColumnRightComponent = React.cloneElement(columnRight, { ref: ref_2, tabIndex: -1 }, children_2.map(function (child, index) {
+            return React.cloneElement(child, { key: "right-" + index });
+        }));
+    }
+    React.useLayoutEffect(function () {
+        var _a;
+        var handleTransitionEnd = function () {
+            if (columnLeftRef.current && isCollapsed) {
+                setShowPanel(false);
+            }
+        };
+        (_a = columnLeftRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', handleTransitionEnd);
+        return function () {
+            var _a;
+            (_a = columnLeftRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [columnLeftRef.current, isCollapsed]);
+    // When the collapsable panel starts to overlay content, it needs to become a focus trap and collapsed by default
+    React.useLayoutEffect(function () {
+        var mediaQueryList = matchMedia('(max-width: 45rem)');
+        var handleMatch = function (matches) {
+            setIsFocusTrap(matches);
+            var collapsed = matches ? true : isCollapsed;
+            setCollapsed(collapsed);
+            setShowPanel(!collapsed);
+        };
+        var listener = function (_a) {
+            var matches = _a.matches;
+            return handleMatch(matches);
+        };
+        if (mediaQueryList.matches) {
+            handleMatch(mediaQueryList.matches);
+        }
+        mediaQueryList.addEventListener('change', listener);
+        return function () {
+            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]);
+    var handleClickOutside = function () {
+        if (!isCollapsed && isFocusTrap) {
+            setCollapsed(true);
+        }
+    };
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel', className, {
+            'TwoColumnPanel--show': !isCollapsed,
+            'TwoColumnPanel--hide': isCollapsed
+        }) }, props, { ref: ref }),
+        React__default.createElement(FocusTrap, { active: !isCollapsed && isFocusTrap, focusTrapOptions: {
+                escapeDeactivates: true,
+                allowOutsideClick: true,
+                fallbackFocus: columnLeftRef.current
+            }, containerElements: [columnLeftRef.current] }),
+        React__default.createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+        showPanel ? ColumnLeftComponent : null,
+        ColumnRightComponent));
+});
+TwoColumnPanel.displayName = 'TwoColumnPanel';
+
+var ColumnHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel__Header', className) }, props, { ref: ref }), children));
+});
+ColumnHeader.displayName = 'ColumnHeader';
+
+var ColumnGroupHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel__GroupHeader', className) }, props, { ref: ref }), children));
+});
+ColumnGroupHeader.displayName = 'ColumnGroupHeader';
+
+var ColumnLeft = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Left', className) }, props, { ref: ref }), children));
+});
+ColumnLeft.displayName = 'ColumnLeft';
+
+var ColumnRight = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Right', className) }, props, { ref: ref }), children));
+});
+ColumnRight.displayName = 'ColumnRight';
+
+var ColumnList = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel__List', className) }, props, { ref: ref }), children));
+});
+ColumnList.displayName = 'ColumnList';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
@@ -8569,6 +8730,11 @@ exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.ClickOutsideListener = ClickOutsideListener;
 exports.Code = Code;
+exports.ColumnGroupHeader = ColumnGroupHeader;
+exports.ColumnHeader = ColumnHeader;
+exports.ColumnLeft = ColumnLeft;
+exports.ColumnList = ColumnList;
+exports.ColumnRight = ColumnRight;
 exports.DescriptionDetails = DescriptionDetails;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListItem = DescriptionListItem;
@@ -8637,6 +8803,7 @@ exports.TopBar = TopBar$1;
 exports.TopBarItem = MenuItem;
 exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
+exports.TwoColumnPanel = TwoColumnPanel;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
 exports.iconTypes = iconTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.1.0-canary.50e983d0",
+  "version": "4.1.0-canary.9730c96d",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
-    "focus-trap-react": "^3.0.5",
+    "focus-trap-react": "^8.9.0",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "prop-types": "^15.6.0",