@deque/cauldron-react 4.1.0 → 4.2.0

package/README.md

@@ -11,3 +11,9 @@ and pull in the styles:
 ```sh
 $ npm install @deque/cauldron-styles --save
 ```
+
+## server-side rendering
+
+Avoid referencing `window` properties, such as `document`, unless you are sure the code will only be executed in a browser environment. For instance, it is safe to reference `document` in an [Effect Hook](https://reactjs.org/docs/hooks-effect.html) or a lifecycle method like `componentDidMount()`, but not in the `render()` method of a class component.
+
+Ensuring you only reference these objects when it is safe to do so will ensure that library consumers can use Cauldron with platforms that use an SSR engine, such as GatsbyJS and NextJS.

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

@@ -2,6 +2,8 @@ import React from 'react';
 interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'large' | 'small';
     label?: string;
+    focusOnInitialRender?: boolean;
+    children?: React.ReactNode;
 }
 declare const LoaderOverlay: React.ForwardRefExoticComponent<LoaderOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export default LoaderOverlay;

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

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface PanelProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
-    heading: ReactElement<any> | {
+    heading?: ReactElement<any> | {
         id?: string;
         text: ReactElement<any>;
         level: number | undefined;
@@ -15,7 +15,7 @@ declare const Panel: {
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        heading: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        heading: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
     };
 };

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-interface BaseStepProps {
+interface BaseStepProps extends React.LiHTMLAttributes<HTMLLIElement> {
     status: 'current' | 'complete' | 'future';
-    className?: string;
 }
 interface StepWithChildren extends BaseStepProps {
     children: React.ReactNode;

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

@@ -446,7 +446,18 @@ var MenuItem = /** @class */ (function (_super) {
 
 var MENU_BREAKPOINT = 1024;
 
-var isWide = function () { return window.innerWidth >= MENU_BREAKPOINT; };
+function isBrowser() {
+    return (typeof window !== 'undefined' &&
+        !!window.document &&
+        !!window.document.createElement);
+}
+
+var isWide = function () {
+    if (!isBrowser()) {
+        return false;
+    }
+    return window.innerWidth >= MENU_BREAKPOINT;
+};
 
 var TopBar = /** @class */ (function (_super) {
     tslib.__extends(TopBar, _super);
@@ -608,12 +619,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 +668,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])
@@ -1278,10 +1293,11 @@ var Dialog = /** @class */ (function (_super) {
     };
     Dialog.prototype.render = function () {
         var _this = this;
-        var _a = this.props, dialogRef = _a.dialogRef, forceAction = _a.forceAction, className = _a.className, children = _a.children, closeButtonText = _a.closeButtonText, heading = _a.heading, show = _a.show, _b = _a.portal, portal = _b === void 0 ? document.body : _b, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal"]);
-        if (!show) {
+        var _a = this.props, dialogRef = _a.dialogRef, forceAction = _a.forceAction, className = _a.className, children = _a.children, closeButtonText = _a.closeButtonText, heading = _a.heading, show = _a.show, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show"]);
+        if (!show || !isBrowser()) {
             return null;
         }
+        var portal = this.props.portal || document.body;
         var close = !forceAction ? (React__default.createElement("button", { className: "Dialog__close", type: "button", onClick: this.close },
             React__default.createElement(Icon, { type: "close", "aria-hidden": "true" }),
             React__default.createElement(Offscreen, null, closeButtonText))) : null;
@@ -1409,6 +1425,9 @@ var SkipLink = /** @class */ (function (_super) {
                 React__default.createElement("span", { className: "SkipLink__item--second" }, targetText))));
     };
     SkipLink.prototype.onClick = function () {
+        if (!isBrowser()) {
+            return;
+        }
         var element = document.querySelector(this.props.target);
         if (element) {
             element.tabIndex = -1;
@@ -1475,15 +1494,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 +1509,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 +1531,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,38 +1574,37 @@ 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 || ''))) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, [id, attrText].filter(Boolean).join(' '));
         }
     }, [targetElement, id]);
-    return showTooltip || hideElementOnHidden
+    return (showTooltip || hideElementOnHidden) && isBrowser()
         ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--" + placement, className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
@@ -1913,10 +1922,11 @@ var Pointout = /** @class */ (function (_super) {
         var _this = this;
         var _c;
         var _d = this.state, show = _d.show, style = _d.style, offscreenContentFocus = _d.offscreenContentFocus, headingId = _d.headingId;
-        var _e = this.props, heading = _e.heading, ftpoRef = _e.ftpoRef, children = _e.children, noArrow = _e.noArrow, dismissText = _e.dismissText, previousText = _e.previousText, nextText = _e.nextText, showNext = _e.showNext, showPrevious = _e.showPrevious, arrowPosition = _e.arrowPosition, position = _e.position, className = _e.className, target = _e.target, disableOffscreenPointout = _e.disableOffscreenPointout, _f = _e.portal, portal = _f === void 0 ? document.body : _f, previousButtonProps = _e.previousButtonProps, nextButtonProps = _e.nextButtonProps, closeButtonProps = _e.closeButtonProps;
-        if (!show) {
+        var _e = this.props, heading = _e.heading, ftpoRef = _e.ftpoRef, children = _e.children, noArrow = _e.noArrow, dismissText = _e.dismissText, previousText = _e.previousText, nextText = _e.nextText, showNext = _e.showNext, showPrevious = _e.showPrevious, arrowPosition = _e.arrowPosition, position = _e.position, className = _e.className, target = _e.target, disableOffscreenPointout = _e.disableOffscreenPointout, previousButtonProps = _e.previousButtonProps, nextButtonProps = _e.nextButtonProps, closeButtonProps = _e.closeButtonProps;
+        if (!show || !isBrowser()) {
             return null;
         }
+        var portal = this.props.portal || document.body;
         var FTPO = (React__default.createElement("div", { className: classNames(className, 'Pointout', (_a = {
                     'Pointout--no-arrow': noArrow,
                     'Pointout--auto': !!target
@@ -2013,6 +2023,9 @@ var Pointout = /** @class */ (function (_super) {
  */
 var queryAll = function (selector, context) {
     if (context === void 0) { context = document; }
+    if (!isBrowser()) {
+        return [];
+    }
     return Array.prototype.slice.call(context.querySelectorAll(selector));
 };
 
@@ -2022,7 +2035,7 @@ var queryAll = function (selector, context) {
 var typeMap = {
     confirmation: {
         className: 'success',
-        icon: 'info-circle'
+        icon: 'check-circle'
     },
     caution: {
         className: 'warning',
@@ -2196,7 +2209,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 = {
@@ -7984,22 +7998,39 @@ function AxeLoader() {
 }
 
 var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, label = _a.label, other = tslib.__rest(_a, ["className", "variant", "label"]);
+    var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender"]);
+    var overlayRef = typeof ref === 'function' || !ref ? React.createRef() : ref;
+    React.useEffect(function () {
+        if (!!focusOnInitialRender && overlayRef.current) {
+            setTimeout(function () {
+                var _a;
+                return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        return;
+    }, [overlayRef.current]);
+    React.useEffect(function () {
+        if (typeof ref === 'function') {
+            ref(overlayRef.current);
+        }
+    }, [ref]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
             ? 'Loader__overlay--large'
             : variant === 'small'
                 ? 'Loader__overlay--small'
-                : ''), ref: ref }, other),
+                : ''), ref: overlayRef, tabIndex: -1 }, other),
         React__default.createElement("div", { className: "Loader__overlay__loader" },
             React__default.createElement(Loader, { variant: variant }),
             React__default.createElement(AxeLoader, null)),
         label ? React__default.createElement("span", { className: "Loader__overlay__label" }, label) : null,
-        other.children));
+        children));
 });
 LoaderOverlay.propTypes = {
     className: PropTypes.string,
     variant: PropTypes.oneOf(['large', 'small']),
-    label: PropTypes.string
+    label: PropTypes.string,
+    focusOnInitialRender: PropTypes.bool,
+    children: PropTypes.node
 };
 LoaderOverlay.displayName = 'LoaderOverlay';
 
@@ -8275,23 +8306,34 @@ var DescriptionDetails = function (_a) {
 DescriptionDetails.displayName = 'DescriptionDetails';
 DescriptionDetails.propTypes = commonPropTypes;
 
-var isTooltip = function (props) {
+var isTooltipProps = function (props) {
     return !!props.tooltip;
 };
 var Step = function (props) {
-    var status = props.status, className = props.className, other = tslib.__rest(props, ["status", "className"]);
-    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, other),
+    var _a;
+    var children = props.children, status = props.status, className = props.className, other = tslib.__rest(props, ["children", "status", "className"]);
+    var tooltip;
+    var tooltipText;
+    var liProps;
+    var isTooltip = isTooltipProps(other);
+    if (isTooltip) {
+        (_a = other, (tooltip = _a.tooltip, tooltipText = _a.tooltipText, _a), liProps = tslib.__rest(_a, ["tooltip", "tooltipText"]));
+    }
+    else {
+        liProps = other;
+    }
+    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, liProps),
         React__default.createElement("div", { className: "Stepper__step-line" }),
-        React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip(props) ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: props.tooltip, 
+        React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: tooltip, 
             // the pseudo content (ex: "1") is conveyed
             // by the list item's position in the set of
             // list items, therefore it is safe to clobber
             // it with the contents of the tooltip in the
             // tab stop's accessible name.
-            association: "aria-labelledby", "aria-label": isTooltip(props) ? props.tooltipText : undefined },
+            association: "aria-labelledby", "aria-label": tooltipText },
             React__default.createElement("div", { className: "Stepper__step-indicator" }))) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: "Stepper__step-indicator" }),
-            'children' in props && (React__default.createElement("div", { className: "Stepper__step-label" }, props.children)))))));
+            children ? (React__default.createElement("div", { className: "Stepper__step-label" }, children)) : null)))));
 };
 Step.displayName = 'Step';
 Step.propTypes = {
@@ -8313,22 +8355,32 @@ Stepper.propTypes = {
 var Panel = function (_a) {
     var _b;
     var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading"]);
-    var Heading = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
-        ? heading.level
-        : 2);
-    var headingId = typeof heading === 'object' && 'id' in heading ? heading.id : randomId();
+    var headingId = !heading
+        ? undefined
+        : typeof heading === 'object' && 'id' in heading
+            ? heading.id
+            : randomId();
+    var Heading = function () {
+        if (!headingId) {
+            return null;
+        }
+        var HeadingComponent = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+            ? heading.level
+            : 2);
+        return (React__default.createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
+            ? heading.text
+            : heading));
+    };
     return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className, (_b = {},
             _b['Panel--collapsed'] = collapsed,
             _b)) }, other),
-        React__default.createElement(Heading, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
-            ? heading.text
-            : heading),
+        React__default.createElement(Heading, null),
         children));
 };
 Panel.displayName = 'Panel';
 Panel.propTypes = {
     children: PropTypes.node.isRequired,
-    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]).isRequired,
+    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
     className: PropTypes.string
 };
 
@@ -8402,7 +8454,7 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
                 React__default.createElement("span", { role: "log", "aria-atomic": "true" }, statusLabel || (React__default.createElement("span", null,
                     "Showing ",
                     React__default.createElement("strong", null, itemStart),
-                    " of",
+                    " to",
                     ' ',
                     React__default.createElement("strong", null, itemEnd),
                     " of ",
@@ -8471,6 +8523,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({});
@@ -8548,6 +8766,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;
@@ -8616,6 +8839,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/lib/utils/is-browser/index.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "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",