@deque/cauldron-react 6.12.0 → 6.13.0-canary.2b0bb381

package/lib/index.js

@@ -8,8 +8,9 @@ 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 reactPopper = require('react-popper');
+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');
 var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
 var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
@@ -22,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);
@@ -1282,7 +1283,7 @@ var SideBar = /** @class */ (function (_super) {
 }(React.Component));
 
 var SideBarItem = function (_a) {
-    var children = _a.children, autoClickLink = _a.autoClickLink, other = tslib.__rest(_a, ["children", "autoClickLink"]);
+    var children = _a.children, _b = _a.autoClickLink, autoClickLink = _b === void 0 ? true : _b, other = tslib.__rest(_a, ["children", "autoClickLink"]);
     var onClick = function (e) {
         if (!autoClickLink) {
             return;
@@ -1294,9 +1295,6 @@ var SideBarItem = function (_a) {
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 };
 SideBarItem.displayName = 'SideBarItem';
-SideBarItem.defaultProps = {
-    autoClickLink: true
-};
 
 /**
  * Handles aria-hidden for dialogs.
@@ -1344,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, {
@@ -1586,43 +1728,6 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 Button.displayName = 'Button';
 
-/**
- * Returns a unique set of id refs from the provided string
- * @param ids - string of id refs
- */
-function idRefs(ids) {
-    if (!ids || !ids.trim()) {
-        return new Set();
-    }
-    return new Set(ids.trim().split(/\s+/));
-}
-/**
- * Returns an updated id ref string with the provided id value added
- * @param ids - string of id refs
- * @param id - id to add
- */
-function addIdRef(ids, id) {
-    return tslib.__spreadArray([], tslib.__read(idRefs(ids).add(id)), false).join(' ');
-}
-/**
- * Returns an updated id ref string with the provided id value removed
- * @param ids - string of id refs
- * @param id - id to remove
- */
-function removeIdRef(_ids, id) {
-    var ids = idRefs(_ids);
-    ids.delete(id);
-    return tslib.__spreadArray([], tslib.__read(ids), false).join(' ');
-}
-/**
- * Returns if an id ref string contains the provided id value
- * @param ids - string of id refs
- * @param id - id to check if it exists in the provided idRef string
- */
-function hasIdRef(ids, id) {
-    return idRefs(ids).has(id);
-}
-
 var isEscapeKey = function (event) {
     return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
 };
@@ -1663,6 +1768,100 @@ function useEscapeKey(options, dependencies) {
     ], tslib.__read(dependencies), false));
 }
 
+function getAutoAlignment(placement) {
+    switch (placement) {
+        case 'auto-start':
+            return 'start';
+        case 'auto-end':
+            return 'end';
+        default:
+            return null;
+    }
+}
+var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
+    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange"]);
+    var ref = useSharedRef(refProp);
+    var Component = as || 'div';
+    var _d = reactDom$1.useFloating({
+        open: open,
+        // default to initial placement on top when placement is auto
+        // @ts-expect-error auto placement is not a valid placement for floating-ui
+        placement: initialPlacement.startsWith('auto') ? 'top' : initialPlacement,
+        middleware: [
+            reactDom$1.offset(offset !== null && offset !== void 0 ? offset : 0),
+            initialPlacement.startsWith('auto')
+                ? reactDom$1.autoPlacement({
+                    alignment: getAutoAlignment(initialPlacement)
+                })
+                : reactDom$1.flip()
+        ].filter(Boolean),
+        elements: {
+            reference: resolveElement(target),
+            floating: ref.current
+        },
+        whileElementsMounted: dom.autoUpdate
+    }), floatingStyles = _d.floatingStyles, placement = _d.placement;
+    useEscapeKey({
+        active: open,
+        capture: true,
+        defaultPrevented: true,
+        callback: function (event) {
+            // when an anchored overlay is open, we want to prevent other potential "escape"
+            // keypress events, like the closing of modals from occurring
+            event.preventDefault();
+            // istanbul ignore else
+            if (typeof onOpenChange === 'function') {
+                onOpenChange(!open);
+            }
+        }
+    });
+    useFocusTrap(ref, !focusTrap ? { disabled: true } : focusTrapOptions);
+    React.useEffect(function () {
+        if (typeof onPlacementChange === 'function') {
+            onPlacementChange(placement);
+        }
+    }, [placement]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
+});
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+
+/**
+ * Returns a unique set of id refs from the provided string
+ * @param ids - string of id refs
+ */
+function idRefs(ids) {
+    if (!ids || !ids.trim()) {
+        return new Set();
+    }
+    return new Set(ids.trim().split(/\s+/));
+}
+/**
+ * Returns an updated id ref string with the provided id value added
+ * @param ids - string of id refs
+ * @param id - id to add
+ */
+function addIdRef(ids, id) {
+    return tslib.__spreadArray([], tslib.__read(idRefs(ids).add(id)), false).join(' ');
+}
+/**
+ * Returns an updated id ref string with the provided id value removed
+ * @param ids - string of id refs
+ * @param id - id to remove
+ */
+function removeIdRef(_ids, id) {
+    var ids = idRefs(_ids);
+    ids.delete(id);
+    return tslib.__spreadArray([], tslib.__read(ids), false).join(' ');
+}
+/**
+ * Returns if an id ref string contains the provided id value
+ * @param ids - string of id refs
+ * @param id - id to check if it exists in the provided idRef string
+ */
+function hasIdRef(ids, id) {
+    return idRefs(ids).has(id);
+}
+
 var TIP_HIDE_DELAY = 100;
 // fires a custom "cauldron:tooltip:show" / "cauldron:tooltip:hide" event
 // to allow projects using cauldron to hook into when a tooltip is shown/hidden
@@ -1681,50 +1880,27 @@ function Tooltip(_a) {
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hideTimeoutRef = React.useRef(null);
     var _h = tslib.__read(React.useState(!!showProp || defaultShow), 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 _j = tslib.__read(React.useState(null), 2), tooltipElement = _j[0], setTooltipElement = _j[1];
+    var _k = tslib.__read(React.useState(initialPlacement), 2), placement = _k[0], setPlacement = _k[1];
     var hasAriaAssociation = association !== 'none';
-    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
-        placement: initialPlacement,
-        modifiers: [
-            { name: 'preventOverflow', options: { padding: 8 } },
-            {
-                name: 'flip',
-                options: { fallbackPlacements: ['left', 'right', 'top', 'bottom'] }
-            },
-            { name: 'offset', options: { offset: [0, 8] } },
-            { name: 'arrow', options: { padding: 5, element: arrowElement } }
-        ]
-    }), 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 () {
+        var targetElement;
         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:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setShowTooltip(true);
-                    fireCustomEvent(true, targetElement);
-                    return [2 /*return*/];
+            targetElement = resolveElement(target);
+            // Clear the hide timeout if there was one pending
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
             }
+            setShowTooltip(true);
+            fireCustomEvent(true, targetElement);
+            return [2 /*return*/];
         });
-    }); }, [
-        targetElement,
-        // update starts off as null
-        update
-    ]);
+    }); }, [target]);
     // Hide the tooltip
     var hide = React.useCallback(function () {
+        var targetElement = resolveElement(target);
         if (!hideTimeoutRef.current) {
             hideTimeoutRef.current = setTimeout(function () {
                 hideTimeoutRef.current = null;
@@ -1735,32 +1911,15 @@ function Tooltip(_a) {
         return function () {
             clearTimeout(hideTimeoutRef.current);
         };
-    }, [targetElement]);
-    // Keep targetElement in sync with target prop
-    React.useEffect(function () {
-        var targetElement = target && 'current' in target ? target.current : target;
-        setTargetElement(targetElement);
     }, [target]);
     React.useEffect(function () {
         if (typeof showProp === 'boolean') {
             setShowTooltip(showProp);
         }
     }, [showProp]);
-    // Get popper placement
-    var placement = (attributes.popper &&
-        attributes.popper['data-popper-placement']) ||
-        initialPlacement;
-    // Only listen to key ups when the tooltip is visible
-    useEscapeKey({
-        callback: function (event) {
-            event.preventDefault();
-            setShowTooltip(false);
-        },
-        capture: true,
-        active: showTooltip && typeof showProp !== 'boolean'
-    }, [setShowTooltip]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
+        var targetElement = resolveElement(target);
         if (typeof showProp !== 'boolean') {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
@@ -1773,7 +1932,7 @@ function Tooltip(_a) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, show, hide, showProp]);
+    }, [target, show, hide, showProp]);
     // Handle hover events for the tooltipElement
     React.useEffect(function () {
         if (typeof showProp !== 'boolean') {
@@ -1787,6 +1946,7 @@ function Tooltip(_a) {
     }, [tooltipElement, show, hide, showProp]);
     // Keep the target's id in sync
     React.useEffect(function () {
+        var targetElement = resolveElement(target);
         if (hasAriaAssociation) {
             var idRefs = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
             if (!hasIdRef(idRefs, id)) {
@@ -1799,14 +1959,14 @@ function Tooltip(_a) {
                 targetElement.setAttribute(association, removeIdRef(idRefs, id));
             }
         };
-    }, [targetElement, id, association]);
+    }, [target, id, association]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
-            }), ref: setTooltipElement, role: "tooltip", style: styles.popper }, attributes.popper, props),
-            variant !== 'big' && (React__default["default"].createElement("div", { className: "TooltipArrow", ref: setArrowElement, style: styles.arrow })),
+            }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
+            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow" }),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             (
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
@@ -2522,28 +2682,6 @@ var SearchField = React.forwardRef(function (_a, ref) {
 });
 SearchField.displayName = 'SearchField';
 
-/**
- * When a component needs to track an internal ref on a component that has a
- * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
- * correctly invoke the parent ref as well providing an internal ref.
- *
- * @example
- * React.forwardRef(function Component({ children }, ref) {
- *   const internalRef = useSharedRef<HTMLElement>(ref)
- *   if (internalRef.current) {
- *     // do something with the internal ref...
- *   }
- *   return (<div ref={internalRef}>...</div>)
- * })
- */
-function useSharedRef(ref) {
-    var internalRef = React.useRef();
-    React.useEffect(function () {
-        setRef(ref, internalRef.current);
-    }, [ref]);
-    return internalRef;
-}
-
 function copyTextToClipboard(text) {
     return tslib.__awaiter(this, void 0, void 0, function () {
         var copied, element, range, selection;
@@ -2702,21 +2840,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';
 
@@ -2800,6 +2933,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';
@@ -2820,8 +2963,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]);
@@ -3389,16 +3535,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,
@@ -3447,19 +3591,21 @@ var ListboxContext = React.createContext({
     options: [],
     active: null,
     selected: null,
+    multiselect: false,
     setOptions: function () { return null; },
     onSelect: function () { return null; }
 });
 function ListboxProvider(_a) {
-    var options = _a.options, active = _a.active, selected = _a.selected, setOptions = _a.setOptions, onSelect = _a.onSelect, children = _a.children;
+    var options = _a.options, active = _a.active, selected = _a.selected, multiselect = _a.multiselect, setOptions = _a.setOptions, onSelect = _a.onSelect, children = _a.children;
     var Provider = ListboxContext.Provider;
     var value = React.useMemo(function () { return ({
         options: options,
         active: active,
         selected: selected,
+        multiselect: multiselect,
         setOptions: setOptions,
         onSelect: onSelect
-    }); }, [options, active, selected, setOptions]);
+    }); }, [options, active, selected, multiselect, setOptions]);
     return React__default["default"].createElement(Provider, { value: value }, children);
 }
 function useListboxContext() {
@@ -3481,40 +3627,82 @@ var optionMatchesValue = function (option, value) {
         option.value === value;
 };
 var Listbox = React.forwardRef(function (_a, ref) {
-    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
-    var _d = tslib.__read(React.useState([]), 2), options = _d[0], setOptions = _d[1];
-    var _e = tslib.__read(React.useState(null), 2), activeOption = _e[0], setActiveOption = _e[1];
-    var _f = tslib.__read(React.useState(null), 2), selectedOption = _f[0], setSelectedOption = _f[1];
+    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, _d = _a.multiselect, multiselect = _d === void 0 ? false : _d, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
+    var _e = tslib.__read(React.useState([]), 2), options = _e[0], setOptions = _e[1];
+    var _f = tslib.__read(React.useState(null), 2), activeOption = _f[0], setActiveOption = _f[1];
+    var _g = tslib.__read(React.useState([]), 2), selectedOptions = _g[0], setSelectedOptions = _g[1];
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     React.useLayoutEffect(function () {
-        if (!isControlled && selectedOption) {
+        if (!isControlled && selectedOptions.length > 0) {
             return;
         }
         var listboxValue = isControlled ? value : defaultValue;
-        var matchingOption = options.find(function (option) {
-            return optionMatchesValue(option, listboxValue);
-        });
-        setSelectedOption(matchingOption || null);
-        setActiveOption(matchingOption || null);
-    }, [isControlled, options, value]);
+        if (!listboxValue) {
+            return;
+        }
+        if (multiselect) {
+            var matchingOptions = options.filter(function (option) {
+                return listboxValue.find(function (value) {
+                    return optionMatchesValue(option, value);
+                });
+            });
+            setSelectedOptions(matchingOptions);
+            if (!activeOption) {
+                setActiveOption(matchingOptions[0] || null);
+            }
+        }
+        else {
+            var matchingOption = options.find(function (option) {
+                return optionMatchesValue(option, listboxValue);
+            });
+            setSelectedOptions(matchingOption ? [matchingOption] : []);
+            if (!activeOption) {
+                setActiveOption(matchingOption || null);
+            }
+        }
+    }, [isControlled, options, value, defaultValue, activeOption]);
     React.useEffect(function () {
         if (activeOption) {
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(activeOption);
         }
     }, [activeOption]);
     var handleSelect = React.useCallback(function (option) {
+        var _a;
         setActiveOption(option);
+        var optionIsSelected = selectedOptions.some(function (selected) { return selected.element === option.element; });
+        var previousValues = selectedOptions.map(function (selected) { return selected.value; });
         // istanbul ignore else
         if (!isControlled) {
-            setSelectedOption(option);
+            if (!multiselect) {
+                setSelectedOptions([option]);
+            }
+            else {
+                setSelectedOptions(optionIsSelected
+                    ? tslib.__spreadArray([], tslib.__read(selectedOptions.filter(function (selected) { return selected.element !== option.element; })), false) : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(selectedOptions), false), [option], false));
+            }
         }
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
-            target: option.element,
-            value: option.value,
-            previousValue: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value
-        });
-    }, [isControlled, selectedOption]);
+        if (multiselect) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: optionIsSelected
+                    ? selectedOptions
+                        .filter(function (selectedOption) {
+                        return selectedOption.element !== option.element;
+                    })
+                        .map(function (selectedOption) { return selectedOption.value; })
+                    : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(previousValues), false), [option.value], false),
+                previousValue: previousValues
+            });
+        }
+        else {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: option.value,
+                previousValue: (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+            });
+        }
+    }, [isControlled, selectedOptions, multiselect, onSelectionChange]);
     var handleKeyDown = React.useCallback(function (event) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (!keys.includes(event.key)) {
@@ -3564,9 +3752,9 @@ var Listbox = React.forwardRef(function (_a, ref) {
                 activeOption && handleSelect(activeOption);
                 break;
         }
-    }, [options, activeOption, navigation]);
+    }, [options, activeOption, navigation, handleSelect]);
     var handleFocus = React.useCallback(function (event) {
-        if (!activeOption && !selectedOption) {
+        if (!activeOption) {
             var firstOption = options.find(function (option) { return !isDisabledOption(option); });
             // istanbul ignore else
             if (firstOption) {
@@ -3574,13 +3762,14 @@ var Listbox = React.forwardRef(function (_a, ref) {
             }
             // istanbul ignore else
         }
-        else if (event.target === listboxRef.current) {
-            setActiveOption(selectedOption);
+        else if (selectedOptions.length &&
+            event.target === listboxRef.current) {
+            setActiveOption(selectedOptions[selectedOptions.length - 1]);
         }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }, [options, activeOption, selectedOption]);
-    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
-        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, selected: selectedOption, setOptions: setOptions, onSelect: handleSelect }, children)));
+    }, [options, activeOption, selectedOptions]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-multiselectable": multiselect ? true : undefined, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
+        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, multiselect: multiselect, selected: selectedOptions, setOptions: setOptions, onSelect: handleSelect }, children)));
 });
 Listbox.displayName = 'Listbox';
 
@@ -3590,12 +3779,15 @@ function isElementPreceding(a, b) {
 var ListboxOption = React.forwardRef(function (_a, ref) {
     var _b;
     var _c;
-    var propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "activeClass", "onClick"]);
+    var propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, selectedProp = _a.selected, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "selected", "activeClass", "onClick"]);
     var _f = useListboxContext(), active = _f.active, selected = _f.selected, setOptions = _f.setOptions, onSelect = _f.onSelect;
     var listboxOptionRef = useSharedRef(ref);
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-option'), 1), id = _g[0];
-    var isActive = active !== null && active.element === listboxOptionRef.current;
-    var isSelected = selected !== null && selected.element === listboxOptionRef.current;
+    var isActive = (active === null || active === void 0 ? void 0 : active.element) === listboxOptionRef.current;
+    var isSelected = typeof selectedProp === 'boolean'
+        ? selectedProp
+        : selected !== null &&
+            !!selected.find(function (option) { return option.element === listboxOptionRef.current; });
     var optionValue = typeof value !== 'undefined'
         ? value
         : (_c = listboxOptionRef.current) === null || _c === void 0 ? void 0 : _c.innerText;
@@ -3645,7 +3837,7 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
         }
         onSelect({ element: listboxOptionRef.current, value: optionValue });
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [optionValue]);
+    }, [optionValue, onSelect, onClick, disabled]);
     return (React__default["default"].createElement(Component, tslib.__assign({ id: id, className: classNames__default["default"](className, (_b = {},
             _b[activeClass] = isActive,
             _b)), role: "option", ref: listboxOptionRef, "aria-disabled": typeof disabled === 'boolean' ? disabled : undefined, "aria-selected": isSelected, onClick: handleClick }, props), children));
@@ -3767,17 +3959,20 @@ var ComboboxMatch = function (_a) {
         React__default["default"].createElement("span", null, matchAfter)));
 };
 var ComboboxOption = React.forwardRef(function (_a, ref) {
+    var _b;
     var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, formValue = _a.formValue, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value", "formValue"]);
-    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _b[0];
-    var _c = useListboxContext(), selected = _c.selected, active = _c.active;
-    var _d = useComboboxContext(), selectedValue = _d.selectedValue, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValue = _d.setFormValue;
+    var _c = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _c[0];
+    var _d = useListboxContext(), selected = _d.selected, active = _d.active;
+    var _e = useComboboxContext(), selectedValue = _e.selectedValue, matches = _e.matches, setMatchingOptions = _e.setMatchingOptions, setFormValue = _e.setFormValue;
     var comboboxOptionRef = useSharedRef(ref);
     var intersectionRef = useIntersectionRef(comboboxOptionRef, {
         root: null,
         threshold: 1.0
     });
     var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === comboboxOptionRef.current;
-    var isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.element) && selected.element === comboboxOptionRef.current;
+    var isSelected = !!(selected &&
+        !!((_b = selected[0]) === null || _b === void 0 ? void 0 : _b.element) &&
+        selected[0].element === comboboxOptionRef.current);
     var isMatching = (typeof matches === 'boolean' && matches) ||
         (typeof matches === 'function' && matches(children));
     // istanbul ignore next
@@ -4113,19 +4308,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     var _f = tslib.__read(React.useState(null), 2), targetElement = _f[0], setTargetElement = _f[1];
     var _g = tslib.__read(React.useState(null), 2), isolator = _g[0], setIsolator = _g[1];
     var popoverRef = useSharedRef(ref);
-    var _h = tslib.__read(React.useState(null), 2), arrowElement = _h[0], setArrowElement = _h[1];
-    var _j = reactPopper.usePopper(targetElement, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, {
-        placement: initialPlacement,
-        modifiers: [
-            { name: 'preventOverflow', options: { padding: 8 } },
-            { name: 'flip' },
-            { name: 'offset', options: { offset: [0, 8] } },
-            { name: 'arrow', options: { padding: 5, element: arrowElement } }
-        ]
-    }), styles = _j.styles, attributes = _j.attributes;
-    var placement = (attributes.popper &&
-        attributes.popper['data-popper-placement']) ||
-        initialPlacement;
+    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
     var additionalProps = variant === 'prompt' && !props['aria-label']
         ? { 'aria-labelledby': "".concat(id, "-label") }
         : {};
@@ -4157,15 +4340,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');
@@ -4199,20 +4375,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("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
-                    'Popover--hidden': !show,
-                    'Popover--prompt': variant === 'prompt'
-                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, additionalProps, props),
-                React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
-                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);
@@ -4280,7 +4453,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';
@@ -4320,60 +4492,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
@@ -4479,6 +4618,7 @@ exports.AddressLine = AddressLine;
 exports.Alert = Alert;
 exports.AlertActions = AlertActions;
 exports.AlertContent = AlertContent;
+exports.AnchoredOverlay = AnchoredOverlay;
 exports.AriaIsolate = AriaIsolate;
 exports.Badge = Badge;
 exports.BadgeLabel = BadgeLabel;