@deque/cauldron-react 6.12.0-canary.67739754 → 6.12.0-canary.775bed0e

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import AriaIsolate from '../../utils/aria-isolate';
 export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
@@ -14,31 +13,8 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     closeButtonText?: string;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
 }
-interface DialogState {
-    isolator?: AriaIsolate;
-}
-export default class Dialog extends React.Component<DialogProps, DialogState> {
-    static defaultProps: {
-        onClose: () => void;
-        forceAction: boolean;
-        closeButtonText: string;
-    };
-    private element;
-    private heading;
-    private headingId;
-    constructor(props: DialogProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DialogProps): void;
-    private attachIsolator;
-    render(): React.JSX.Element | null;
-    close(): void;
-    handleClickOutside(): void;
-    focusHeading(): void;
-    private handleEscape;
-    private attachEventListeners;
-    private removeEventListeners;
-}
+declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+export default Dialog;
 interface DialogAlignmentProps {
     align?: 'left' | 'center' | 'right';
 }

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

@@ -1,3 +1,4 @@
+import type { ElementOrRef } from '../../types';
 import React from 'react';
 export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -5,8 +6,8 @@ export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.
     open?: boolean;
     behavior?: 'modal' | 'non-modal';
     focusOptions?: {
-        initialFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
-        returnFocus?: T | React.RefObject<T> | React.MutableRefObject<T>;
+        initialFocus?: ElementOrRef<T>;
+        returnFocus?: ElementOrRef<T>;
     };
     onClose?: () => void;
     portal?: React.RefObject<HTMLElement> | HTMLElement;

package/lib/components/Table/Table.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export type Column = {
     align: ColumnAlignment;
     width?: ColumnWidth;
+    maxWidth?: ColumnWidth;
 };
 export type ColumnAlignment = 'start' | 'center' | 'end';
 export type ColumnWidth = 'auto' | 'min-content' | 'max-content' | `${number}` | `${number}%` | `${number}fr`;

package/lib/index.js

@@ -8,7 +8,7 @@ var classNames = require('classnames');
 var nextId = require('react-id-generator');
 var keyname = require('keyname');
 var reactDom = require('react-dom');
-var FocusTrap = require('focus-trap-react');
+var focusable = require('focusable');
 var dom = require('@floating-ui/dom');
 var reactDom$1 = require('@floating-ui/react-dom');
 var SyntaxHighlighter = require('react-syntax-highlighter/dist/cjs/light');
@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var nextId__default = /*#__PURE__*/_interopDefaultLegacy(nextId);
 var keyname__default = /*#__PURE__*/_interopDefaultLegacy(keyname);
-var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+var focusable__default = /*#__PURE__*/_interopDefaultLegacy(focusable);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefaultLegacy(SyntaxHighlighter);
 var js__default = /*#__PURE__*/_interopDefaultLegacy(js);
 var css__default = /*#__PURE__*/_interopDefaultLegacy(css);
@@ -1342,133 +1342,277 @@ var AriaIsolate = /** @class */ (function () {
     return AriaIsolate;
 }());
 
-var isEscape = function (event) {
-    return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
-};
-var noop = function () {
-    //not empty
+/**
+ * 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;
+}
+
+// When multiple focus traps are created, we need to keep track of all previous traps
+// in the stack and temporarily suspend any traps created before the most recent trap
+var focusTrapStack = [];
+var removeFocusTrapFromStack = function (focusTrap) {
+    var focusTrapIndex = focusTrapStack.findIndex(function (trap) { return focusTrap.targetElement === trap.targetElement; });
+    focusTrapStack.splice(focusTrapIndex, 1);
 };
-var Dialog = /** @class */ (function (_super) {
-    tslib.__extends(Dialog, _super);
-    function Dialog(props) {
-        var _this = _super.call(this, props) || this;
-        _this.headingId = nextId__default["default"]('dialog-title-');
-        _this.close = _this.close.bind(_this);
-        _this.focusHeading = _this.focusHeading.bind(_this);
-        _this.handleClickOutside = _this.handleClickOutside.bind(_this);
-        _this.handleEscape = _this.handleEscape.bind(_this);
-        _this.state = {};
-        return _this;
+function getActiveElement(target) {
+    var _a;
+    return (((_a = target === null || target === void 0 ? void 0 : target.ownerDocument.activeElement) !== null && _a !== void 0 ? _a : document.activeElement) ||
+        document.body);
+}
+function elementContains(containerElement, targetElement) {
+    if (!targetElement) {
+        return false;
     }
-    Dialog.prototype.componentDidMount = function () {
-        var _this = this;
-        if (this.props.show) {
-            this.attachEventListeners();
-            this.attachIsolator(function () { return setTimeout(_this.focusHeading); });
+    if (containerElement.getRootNode() === targetElement.getRootNode()) {
+        return containerElement.contains(targetElement);
+    }
+    var root = targetElement.getRootNode();
+    while (root && root !== containerElement.getRootNode()) {
+        if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            // likely a shadow root, and we need to get the host
+            root = root.host;
         }
+        else {
+            break;
+        }
+    }
+    return root && containerElement.contains(root);
+}
+function createTrapGuard() {
+    var trapGuard = document.createElement('span');
+    trapGuard.setAttribute('tabindex', '0');
+    trapGuard.setAttribute('aria-hidden', 'true');
+    return trapGuard;
+}
+function createFocusTrap(targetElement, initialFocusElement) {
+    var _a;
+    var startGuard = createTrapGuard();
+    var endGuard = createTrapGuard();
+    targetElement.insertAdjacentElement('beforebegin', startGuard);
+    targetElement.insertAdjacentElement('afterend', endGuard);
+    var focusTrapMetadata = {
+        targetElement: targetElement,
+        lastFocusedElement: null,
+        suspended: false
     };
-    Dialog.prototype.componentWillUnmount = function () {
-        var isolator = this.state.isolator;
-        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-        this.removeEventListeners();
-    };
-    Dialog.prototype.componentDidUpdate = function (prevProps) {
-        if (!prevProps.show && this.props.show) {
-            this.attachIsolator(this.focusHeading);
-            this.attachEventListeners();
+    var focusListener = function (event) {
+        var _a, _b, _c, _d;
+        var eventTarget = event.target;
+        var elementContainsTarget = elementContains(targetElement, eventTarget);
+        if (focusTrapMetadata.suspended) {
+            return;
         }
-        else if (prevProps.show && !this.props.show) {
-            this.removeEventListeners();
-            this.close();
+        if (!elementContainsTarget) {
+            // If the event target element is not contained within the target element
+            // for this focus trap, we need to prevent focus from escaping the container
+            event.stopImmediatePropagation();
         }
-    };
-    Dialog.prototype.attachIsolator = function (done) {
-        this.setState({
-            isolator: new AriaIsolate(this.element)
-        }, done);
-    };
-    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, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show"]);
-        if (!show || !isBrowser()) {
-            return null;
+        else if (eventTarget instanceof HTMLElement) {
+            // Ensure we keep track of the most recent valid focus element if we
+            // need to redirect focus later
+            focusTrapMetadata.lastFocusedElement = eventTarget;
+            return;
         }
-        var portal = this.props.portal || document.body;
-        var close = !forceAction ? (React__default["default"].createElement("button", { className: "Dialog__close", type: "button", onClick: this.close },
-            React__default["default"].createElement(Icon, { type: "close", "aria-hidden": "true" }),
-            React__default["default"].createElement(Offscreen, null, closeButtonText))) : null;
-        var Heading = "h".concat(typeof heading === 'object' && 'level' in heading && !!heading.level
-            ? heading.level
-            : 2);
-        var Dialog = (React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
-                allowOutsideClick: true,
-                escapeDeactivates: false,
-                fallbackFocus: '.Dialog__heading'
-            } },
-            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) {
-                        _this.element = el;
-                        if (!dialogRef) {
-                            return;
-                        }
-                        setRef(dialogRef, el);
-                    }, "aria-labelledby": this.headingId }, other),
-                    React__default["default"].createElement("div", { className: "Dialog__inner" },
-                        React__default["default"].createElement("div", { className: "Dialog__header" },
-                            React__default["default"].createElement(Heading, { className: "Dialog__heading", ref: function (el) { return (_this.heading = el); }, tabIndex: -1, id: this.headingId }, typeof heading === 'object' && 'text' in heading
-                                ? heading.text
-                                : heading),
-                            close),
-                        children)))));
-        return reactDom.createPortal(Dialog, ('current' in portal ? portal.current : portal) || document.body);
-    };
-    Dialog.prototype.close = function () {
-        var _a, _b, _c;
-        (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
-        if (this.props.show) {
-            (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        var focusableElements = Array.from((targetElement === null || targetElement === void 0 ? void 0 : targetElement.querySelectorAll(focusable__default["default"])) || []);
+        // If focus reaches the trap guards, we need to wrap focus around to the leading
+        // or trailing focusable element depending on which guard obtained focus
+        if (focusableElements.length && eventTarget === startGuard) {
+            (_a = focusableElements.reverse()[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
         }
-    };
-    Dialog.prototype.handleClickOutside = function () {
-        var _a = this.props, show = _a.show, forceAction = _a.forceAction;
-        if (show && !forceAction) {
-            this.close();
+        else if (focusableElements.length && eventTarget === endGuard) {
+            (_b = focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        // If focus somehow escaped the trap, we need to try to restore focus to
+        // to a suitable focusable element within the focus trap target. Otherwise
+        // we'll need to focus on an alternative within the container.
+        if (elementContains(targetElement, focusTrapMetadata.lastFocusedElement)) {
+            (_c = focusTrapMetadata.lastFocusedElement) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        else if (focusableElements.length) {
+            (_d = focusableElements[0]) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+        else {
+            // if there are no focusable elements, just focus the container
+            targetElement.focus();
         }
     };
-    Dialog.prototype.focusHeading = function () {
+    document.addEventListener('focus', focusListener, true);
+    if (focusTrapStack.length >= 1) {
+        // Suspend any other traps in the stack while this one is active
+        focusTrapStack.forEach(function (trap) {
+            trap.suspended = true;
+        });
+    }
+    focusTrapStack.push(focusTrapMetadata);
+    if (initialFocusElement) {
+        initialFocusElement.focus();
+    }
+    else {
+        // Try to find a suitable focus element
+        var focusableElements = Array.from((targetElement === null || targetElement === void 0 ? void 0 : targetElement.querySelectorAll(focusable__default["default"])) ||
+            /* istanbul ignore else */ []);
+        (_a = focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    return tslib.__assign(tslib.__assign({}, focusTrapMetadata), { initialFocusElement: initialFocusElement, destroy: function () {
+            var _a, _b;
+            document.removeEventListener('focus', focusListener, true);
+            removeFocusTrapFromStack(focusTrapMetadata);
+            (_a = startGuard.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(startGuard);
+            (_b = endGuard.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(endGuard);
+            // If there are any remaining focus traps in the stack, we need
+            // to unsuspend the most recently added focus trap
+            if (focusTrapStack.length) {
+                focusTrapStack[focusTrapStack.length - 1].suspended = false;
+            }
+        } });
+}
+function useFocusTrap(target, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.returnFocus, returnFocus = _b === void 0 ? true : _b, initialFocusElementOrRef = options.initialFocusElement, returnFocusElement = options.returnFocusElement;
+    var focusTrap = React.useRef(null);
+    var returnFocusElementRef = React.useRef();
+    function restoreFocusToReturnFocusElement() {
         var _a;
-        if (this.heading) {
-            this.heading.focus();
+        var resolvedReturnFocusElement = resolveElement(returnFocusElement);
+        if (resolvedReturnFocusElement instanceof HTMLElement) {
+            resolvedReturnFocusElement.focus();
         }
-        (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.activate();
-    };
-    Dialog.prototype.handleEscape = function (keyboardEvent) {
+        else {
+            (_a = returnFocusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            returnFocusElementRef.current = null;
+        }
+    }
+    React.useEffect(function () {
+        var targetElement = resolveElement(target);
+        var initialFocusElement = resolveElement(initialFocusElementOrRef);
+        if (!targetElement || disabled) {
+            return;
+        }
+        returnFocusElementRef.current = getActiveElement(targetElement);
+        focusTrap.current = createFocusTrap(targetElement, initialFocusElement);
+        return function () {
+            var _a;
+            (_a = focusTrap.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            focusTrap.current = null;
+            // istanbul ignore else
+            if (returnFocus) {
+                restoreFocusToReturnFocusElement();
+            }
+        };
+    }, [target, disabled]);
+    return focusTrap;
+}
+
+var isEscape = function (event) {
+    return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
+};
+var Dialog = React.forwardRef(function (_a, ref) {
+    var dialogRefProp = _a.dialogRef, _b = _a.forceAction, forceAction = _b === void 0 ? false : _b, className = _a.className, children = _a.children, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, heading = _a.heading, _d = _a.show, show = _d === void 0 ? false : _d, portal = _a.portal, _e = _a.onClose, onClose = _e === void 0 ? function () { return null; } : _e, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal", "onClose"]);
+    var dialogRef = useSharedRef(dialogRefProp || ref);
+    var _f = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _f[0];
+    var headingRef = React.useRef(null);
+    var isolatorRef = React.useRef();
+    var handleClose = React.useCallback(function () {
+        var _a;
+        (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+        if (show) {
+            onClose();
+        }
+    }, [show, onClose]);
+    var handleClickOutside = React.useCallback(function () {
+        if (show && !forceAction) {
+            handleClose();
+        }
+    }, [show, forceAction, handleClose]);
+    var focusHeading = React.useCallback(function () {
+        var _a, _b;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = isolatorRef.current) === null || _b === void 0 ? void 0 : _b.activate();
+    }, []);
+    var handleEscape = React.useCallback(function (keyboardEvent) {
         if (!keyboardEvent.defaultPrevented && isEscape(keyboardEvent)) {
-            this.close();
+            handleClose();
         }
-    };
-    Dialog.prototype.attachEventListeners = function () {
-        var forceAction = this.props.forceAction;
+    }, [handleClose]);
+    React.useEffect(function () {
+        if (!show || !dialogRef.current)
+            return;
+        isolatorRef.current = new AriaIsolate(dialogRef.current);
+        setTimeout(focusHeading);
+        return function () {
+            var _a;
+            (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+        };
+    }, [show, focusHeading]);
+    React.useEffect(function () {
         if (!forceAction) {
-            var portal = this.props.portal || document.body;
-            var targetElement = portal instanceof HTMLElement ? portal : portal.current;
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('keyup', this.handleEscape);
+            var portalElement_1 = portal
+                ? 'current' in portal
+                    ? portal.current
+                    : portal
+                : document.body;
+            if (show) {
+                portalElement_1 === null || portalElement_1 === void 0 ? void 0 : portalElement_1.addEventListener('keyup', handleEscape);
+            }
+            return function () {
+                portalElement_1 === null || portalElement_1 === void 0 ? void 0 : portalElement_1.removeEventListener('keyup', handleEscape);
+            };
         }
-    };
-    Dialog.prototype.removeEventListeners = function () {
-        var portal = this.props.portal || document.body;
-        var targetElement = portal instanceof HTMLElement ? portal : portal.current;
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('keyup', this.handleEscape);
-    };
-    Dialog.defaultProps = {
-        onClose: noop,
-        forceAction: false,
-        closeButtonText: 'Close'
-    };
-    return Dialog;
-}(React__default["default"].Component));
+    }, [show, forceAction, portal, handleEscape]);
+    useFocusTrap(dialogRef, {
+        disabled: !show,
+        initialFocusElement: headingRef
+    });
+    if (!show || !isBrowser()) {
+        return null;
+    }
+    var portalElement = portal
+        ? 'current' in portal
+            ? portal.current
+            : portal
+        : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            document.body;
+    var closeButton = !forceAction ? (React__default["default"].createElement("button", { className: "Dialog__close", type: "button", onClick: handleClose },
+        React__default["default"].createElement(Icon, { type: "close", "aria-hidden": "true" }),
+        React__default["default"].createElement(Offscreen, null, closeButtonText))) : null;
+    var HeadingLevel = "h".concat(typeof heading === 'object' && 'level' in heading && heading.level
+        ? heading.level
+        : 2);
+    var dialog = (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
+        React__default["default"].createElement("div", tslib.__assign({ role: "dialog", className: classNames__default["default"]('Dialog', className, {
+                'Dialog--show': show
+            }), ref: dialogRef, "aria-labelledby": headingId }, other),
+            React__default["default"].createElement("div", { className: "Dialog__inner" },
+                React__default["default"].createElement("div", { className: "Dialog__header" },
+                    React__default["default"].createElement(HeadingLevel, { className: "Dialog__heading", ref: headingRef, tabIndex: -1, id: headingId }, typeof heading === 'object' && 'text' in heading
+                        ? heading.text
+                        : heading),
+                    closeButton),
+                children))));
+    return reactDom.createPortal(dialog, 
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    portalElement || document.body);
+});
+Dialog.displayName = 'Dialog';
 var DialogContent = function (_a) {
     var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className, {
@@ -1584,28 +1728,6 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 Button.displayName = 'Button';
 
-/**
- * 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 isEscapeKey = function (event) {
     return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
 };
@@ -2717,21 +2839,16 @@ var LoaderOverlay = React.forwardRef(function (_a, ref) {
             overlayRef.current.focus();
         }
     }, []);
-    var Wrapper = focusTrap ? FocusTrap__default["default"] : React__default["default"].Fragment;
-    var wrapperProps = focusTrap
-        ? {
-            focusTrapOptions: {
-                fallbackFocus: '.Loader__overlay'
-            }
-        }
-        : {};
-    return (React__default["default"].createElement(Wrapper, tslib.__assign({}, wrapperProps),
-        React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Loader__overlay', className), ref: overlayRef, tabIndex: -1 }, other),
-            React__default["default"].createElement("div", { className: "Loader__overlay__loader" },
-                React__default["default"].createElement(Loader, null),
-                React__default["default"].createElement(AxeLoader, null)),
-            label ? (React__default["default"].createElement("span", { className: "Loader__overlay__label" }, label)) : null,
-            children)));
+    useFocusTrap(overlayRef, {
+        disabled: !focusTrap,
+        initialFocusElement: overlayRef
+    });
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Loader__overlay', className), ref: overlayRef, tabIndex: -1 }, other),
+        React__default["default"].createElement("div", { className: "Loader__overlay__loader" },
+            React__default["default"].createElement(Loader, null),
+            React__default["default"].createElement(AxeLoader, null)),
+        label ? React__default["default"].createElement("span", { className: "Loader__overlay__label" }, label) : null,
+        children));
 });
 LoaderOverlay.displayName = 'LoaderOverlay';
 
@@ -2815,6 +2932,16 @@ function useTable() {
     return React.useContext(TableContext);
 }
 
+function parseColumnWidth(width) {
+    var number = Number(width);
+    if (!isNaN(number)) {
+        return "".concat(number, "px");
+    }
+    if (!width) {
+        return 'auto';
+    }
+    return width;
+}
 var Table = React__default["default"].forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, variant = _a.variant, layout = _a.layout, _b = _a.columns, columnsProp = _b === void 0 ? [] : _b, style = _a.style, other = tslib.__rest(_a, ["children", "className", "variant", "layout", "columns", "style"]);
     var isGridLayout = layout === 'grid';
@@ -2835,8 +2962,11 @@ var Table = React__default["default"].forwardRef(function (_a, ref) {
         }
         return columns
             .map(function (_a) {
-            var width = _a.width;
-            return width || 'auto';
+            var width = _a.width, maxWidth = _a.maxWidth;
+            if (maxWidth) {
+                return "minmax(".concat(parseColumnWidth(width), ", ").concat(parseColumnWidth(maxWidth), ")");
+            }
+            return parseColumnWidth(width);
         })
             .join(' ');
     }, [layout, columns]);
@@ -3404,16 +3534,14 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             setCollapsed(true);
         }
     };
+    useFocusTrap(columnLeftRef, {
+        disabled: !showPanel || !isFocusTrap
+    });
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TwoColumnPanel', className, {
             'TwoColumnPanel--show': !isCollapsed,
             'TwoColumnPanel--hide': isCollapsed
         }) }, props, { ref: ref }),
         React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(FocusTrap__default["default"], { active: !isCollapsed && isFocusTrap, focusTrapOptions: {
-                    escapeDeactivates: true,
-                    allowOutsideClick: true,
-                    fallbackFocus: columnLeftRef.current
-                }, containerElements: [columnLeftRef.current] }),
             React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
             isCollapsed ? null : skipLink,
             showPanel ? ColumnLeftComponent : null,
@@ -4207,15 +4335,8 @@ var Popover = React.forwardRef(function (_a, ref) {
             attachIsolator();
     }, [popoverRef.current]);
     React.useEffect(function () {
-        if (show && popoverRef.current) {
-            // Find the first focusable element inside the container
-            var firstFocusableElement = popoverRef.current.querySelector(focusableSelector);
-            if (firstFocusableElement instanceof HTMLElement) {
-                firstFocusableElement.focus();
-            }
-        }
         targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-expanded', Boolean(show).toString());
-    }, [show, popoverRef.current]);
+    }, [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');
@@ -4249,20 +4370,17 @@ var Popover = React.forwardRef(function (_a, ref) {
         callback: handleClosePopover,
         active: show
     }, [show]);
+    useFocusTrap(popoverRef, { disabled: !show, returnFocus: true });
     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$1, { onClickOutside: handleClickOutside },
-            React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
-                    'Popover--hidden': !show,
-                    'Popover--prompt': variant === 'prompt'
-                }), ref: popoverRef, role: "dialog", target: target, open: show, placement: initialPlacement, onPlacementChange: setPlacement, offset: 8 }, additionalProps, props),
-                React__default["default"].createElement("div", { className: "Popover__popoverArrow" }),
-                React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
-                variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) ||
+    return reactDom.createPortal(React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
+        React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
+                'Popover--hidden': !show,
+                'Popover--prompt': variant === 'prompt'
+            }), ref: popoverRef, role: "dialog", target: target, open: show, placement: initialPlacement, onPlacementChange: setPlacement, offset: 8 }, additionalProps, props),
+            React__default["default"].createElement("div", { className: "Popover__popoverArrow" }),
+            React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
+            variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children))), (portal && 'current' in portal ? portal.current : portal) ||
         // Dependent on "isBrowser" check above:
         // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
         document.body);
@@ -4330,7 +4448,6 @@ 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';
@@ -4370,60 +4487,27 @@ var Drawer = React.forwardRef(function (_a, ref) {
             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;
     }
+    useFocusTrap(drawerRef, {
+        disabled: !isModal || !open,
+        initialFocusElement: focusInitial || drawerRef,
+        returnFocus: true,
+        returnFocusElement: focusReturn
+    });
     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("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

package/lib/types.d.ts

@@ -11,3 +11,4 @@ export declare namespace Cauldron {
  * Explicit equivalent of Exclude<ReactNode, boolean | null | undefined>
  */
 export type ContentNode = string | number | ReactPortal | ReactElement;
+export type ElementOrRef<E extends Element> = E | React.RefObject<E> | React.MutableRefObject<E>;

package/lib/utils/resolveElement.d.ts

@@ -1,6 +1,6 @@
-import type { RefObject, MutableRefObject } from 'react';
+import type { ElementOrRef } from '../types';
 /**
  * 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;
+export default function resolveElement<T extends Element = Element>(elementOrRef: ElementOrRef<T> | undefined): T | null;

package/lib/utils/useFocusTrap.d.ts

@@ -0,0 +1,34 @@
+import type { ElementOrRef } from '../types';
+type FocusTrapMetadata = {
+    targetElement: Element;
+    lastFocusedElement: HTMLElement | null;
+    suspended: boolean;
+};
+type FocusTrap = {
+    initialFocusElement: HTMLElement | null;
+    destroy: () => void;
+} & FocusTrapMetadata;
+export default function useFocusTrap<TargetElement extends Element = Element, FocusElement extends HTMLElement = HTMLElement>(target: ElementOrRef<TargetElement>, options?: {
+    /**
+     * When set to false, deactivates the focus trap. This can be necessary if
+     * a component needs to conditionally manage focus traps.
+     */
+    disabled?: boolean;
+    /**
+     * When the trap is activated, an optional custom element or ref
+     * can be provided to override the default initial focus element behavior.
+     */
+    initialFocusElement?: ElementOrRef<FocusElement>;
+    /**
+     * When set to true and the trap is deactivated, this will return focus
+     * back to the original active element or the return focus element if
+     * provided.
+     */
+    returnFocus?: boolean;
+    /**
+     * When the trap is deactivated, an optional custom element or ref
+     * can be provided to override the default active element behavior.
+     */
+    returnFocusElement?: ElementOrRef<FocusElement>;
+}): React.RefObject<Readonly<FocusTrap>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.12.0-canary.67739754",
+  "version": "6.12.0-canary.775bed0e",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -25,7 +25,6 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "classnames": "^2.2.6",
-    "focus-trap-react": "^10.2.3",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "react-id-generator": "^3.0.1",