@deque/cauldron-react 7.0.0 → 7.1.0-canary.038917f6

package/lib/index.js

@@ -16,6 +16,7 @@ var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
 var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
 var xml = require('react-syntax-highlighter/dist/cjs/languages/hljs/xml');
 var yaml = require('react-syntax-highlighter/dist/cjs/languages/hljs/yaml');
+var reactAriaComponents = require('react-aria-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -494,24 +495,25 @@ var Accordion = function (_a) {
     var childrenArray = React__default["default"].Children.toArray(children);
     var trigger = childrenArray.find(function (child) {
         return typeof child === 'string' ||
-            child.type === AccordionTrigger;
+            (React__default["default"].isValidElement(child) && child.type === AccordionTrigger);
     });
     var panelElement = childrenArray.find(function (child) {
         return typeof child === 'string' ||
-            child.type === AccordionContent;
+            (React__default["default"].isValidElement(child) && child.type === AccordionContent);
     });
-    var isValid = !!(React__default["default"].isValidElement(trigger) && React__default["default"].isValidElement(panelElement));
-    if (!isValid) {
+    if (!React__default["default"].isValidElement(trigger) ||
+        !React__default["default"].isValidElement(panelElement)) {
         console.warn('Must provide <AccordionTrigger /> and <AccordionContent /> element(s). You provided:', {
             trigger: trigger,
             panelElement: panelElement,
-            isValid: isValid
+            isValid: false
         });
         return null;
     }
+    var panelProps = panelElement.props;
     return (React__default["default"].createElement("div", tslib.__assign({ className: "Accordion" }, props),
-        React__default["default"].createElement(ExpandCollapsePanel, tslib.__assign({ id: panelElement.props.id || "".concat(elementId, "-panel"), open: open, onToggle: onToggle, animationTiming: animationTiming }, panelElement.props),
-            React__default["default"].createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", className: classNames__default["default"]('Accordion__trigger', trigger.props.className), "aria-controls": panelElement.props.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props), trigger),
+        React__default["default"].createElement(ExpandCollapsePanel, tslib.__assign({ id: panelProps.id || "".concat(elementId, "-panel"), open: open, onToggle: onToggle, animationTiming: animationTiming }, panelProps),
+            React__default["default"].createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", className: classNames__default["default"]('Accordion__trigger', trigger.props.className), "aria-controls": panelProps.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props), trigger),
             panelElement)));
 };
 Accordion.displayName = 'Accordion';
@@ -577,7 +579,9 @@ var Scrim = /** @class */ (function (_super) {
         if (destroy) {
             return null;
         }
-        return (React__default["default"].createElement("div", { ref: function (el) { return (_this.el = el); }, className: "Scrim ".concat(animationClass) }));
+        return (React__default["default"].createElement("div", { ref: function (el) {
+                _this.el = el;
+            }, className: "Scrim ".concat(animationClass) }));
     };
     return Scrim;
 }(React__default["default"].Component));
@@ -619,16 +623,16 @@ var MenuItem = /** @class */ (function (_super) {
         if (autoClickLink) {
             clickLink(e.target, this.item);
         }
-        onClick(e);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
     MenuItem.prototype.onKeyDown = function (e) {
-        var _a;
+        var _a, _b, _c;
         var key = keyname__default["default"](e.which);
         if (key === 'enter' || key === 'space') {
             e.preventDefault();
             (_a = this.item) === null || _a === void 0 ? void 0 : _a.click();
         }
-        this.props.onKeyDown(e);
+        (_c = (_b = this.props).onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
     };
     MenuItem.prototype.render = function () {
         var _this = this;
@@ -641,12 +645,6 @@ var MenuItem = /** @class */ (function (_super) {
     };
     MenuItem.displayName = 'MenuItem';
     MenuItem.defaultProps = {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        menuItemRef: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onClick: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onKeyDown: function () { },
         autoClickLink: true
     };
     return MenuItem;
@@ -671,6 +669,7 @@ var TopBar$1 = /** @class */ (function (_super) {
     tslib.__extends(TopBar, _super);
     function TopBar(props) {
         var _this = _super.call(this, props) || this;
+        _this.menuBarRef = React__default["default"].createRef();
         _this.onResize = function () {
             var wide = isWide();
             if (wide === _this.state.wide) {
@@ -719,10 +718,10 @@ var TopBar$1 = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname__default["default"](e.which);
-        // This is a temporary workaround until have an opportunity to refactor or replace menubar
-        // see: https://github.com/dequelabs/cauldron/issues/1934
-        // eslint-disable-next-line react/no-find-dom-node
-        var menuBarElement = reactDom.findDOMNode(this);
+        var menuBarElement = this.menuBarRef.current;
+        if (!menuBarElement) {
+            return;
+        }
         var menuItems = Array.from(menuBarElement.children);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
@@ -749,7 +748,7 @@ var TopBar$1 = /** @class */ (function (_super) {
         // disabling no-unused-vars to prevent thin/hasTrigger from being passed through to div
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _a = this.props, children = _a.children, className = _a.className; _a.thin; _a.hasTrigger; tslib.__rest(_a, ["children", "className", "thin", "hasTrigger"]);
-        return (React__default["default"].createElement("ul", { role: "menubar", onKeyDown: this.onKeyDown, className: className }, React.Children.map(children, this.renderChild)));
+        return (React__default["default"].createElement("ul", { role: "menubar", onKeyDown: this.onKeyDown, className: className, ref: this.menuBarRef }, React.Children.map(children, this.renderChild)));
     };
     TopBar.defaultProps = {
         thin: false,
@@ -805,9 +804,16 @@ function resolveElement(elementOrRef) {
     return null;
 }
 
+function getChildRef(child, version) {
+    if (version === void 0) { version = React__default["default"].version; }
+    return parseInt(version, 10) >= 19
+        ? child.props.ref
+        : child.ref;
+}
+
 function ClickOutsideListener(_a, ref) {
     var children = _a.children, _b = _a.mouseEvent, mouseEvent = _b === void 0 ? 'click' : _b, _c = _a.touchEvent, touchEvent = _c === void 0 ? 'touchend' : _c, target = _a.target, _d = _a.onClickOutside, onClickOutside = _d === void 0 ? function () { return null; } : _d;
-    var childElementRef = React.useRef();
+    var childElementRef = React.useRef(null);
     var handleEvent = function (event) {
         if (event.defaultPrevented) {
             return;
@@ -830,9 +836,8 @@ function ClickOutsideListener(_a, ref) {
         childElementRef.current = node;
         // Ref for this component should pass-through to the child node
         setRef(ref, node);
-        // If child has its own ref, we want to update
-        // its ref with the newly cloned node
-        var childRef = children.ref;
+        // Forward the child's own ref. In React 19 ref lives in props; in 16–18 it's element.ref.
+        var childRef = getChildRef(children);
         setRef(childRef, node);
     };
     React.useEffect(function () {
@@ -1341,7 +1346,7 @@ var AriaIsolate = /** @class */ (function () {
 
 /**
  * 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
+ * forwarded ref, useSharedRef will return a RefObject<T | null> that will
  * correctly invoke the parent ref as well providing an internal ref.
  *
  * @example
@@ -1354,9 +1359,10 @@ var AriaIsolate = /** @class */ (function () {
  * })
  */
 function useSharedRef(ref) {
-    var internalRef = React.useRef();
+    var internalRef = React.useRef(null);
     React.useEffect(function () {
         setRef(ref, internalRef.current);
+        return function () { return setRef(ref, null); };
     }, [ref]);
     return internalRef;
 }
@@ -1486,7 +1492,7 @@ 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();
+    var returnFocusElementRef = React.useRef(null);
     function restoreFocusToReturnFocusElement() {
         var _a;
         var resolvedReturnFocusElement = resolveElement(returnFocusElement);
@@ -1536,7 +1542,7 @@ var Dialog = React.forwardRef(function (_a, ref) {
     var dialogRef = useSharedRef(dialogRefProp || ref);
     var _g = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _g[0];
     var headingRef = React.useRef(null);
-    var isolatorRef = React.useRef();
+    var isolatorRef = React.useRef(null);
     var headingLevel = typeof heading === 'object' && 'level' in heading && heading.level
         ? heading.level
         : 2;
@@ -2033,10 +2039,17 @@ function Tooltip(_a) {
                 fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
+    }, [target]);
+    // Cancel any pending hide timeout when the Tooltip unmounts so it
+    // does not fire setShowTooltip on an unmounted component.
+    React.useEffect(function () {
         return function () {
-            clearTimeout(hideTimeoutRef.current);
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
+            }
         };
-    }, [target]);
+    }, []);
     React.useEffect(function () {
         if (typeof showProp === 'boolean') {
             setShowTooltip(showProp);
@@ -2124,7 +2137,7 @@ var looksLikeLink = function (props) {
 };
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, _c = _a.tooltipProps, tooltipPropsProp = _c === void 0 ? {} : _c, className = _a.className, _d = _a.variant, variant = _d === void 0 ? 'secondary' : _d, disabled = _a.disabled, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, large = _a.large, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipProps", "className", "variant", "disabled", "tabIndex", "large"]);
-    var internalRef = React.useRef();
+    var internalRef = React.useRef(null);
     React.useImperativeHandle(ref, function () { return internalRef.current; });
     // Configure additional properties based on the type of the Component
     // for accessibility
@@ -2199,7 +2212,7 @@ var typeMap = {
 };
 var tabIndexHandler = function (reset, toast) {
     if (reset) {
-        // restore tab indicies that we clobbered
+        // restore tab indices that we clobbered
         return queryAll('[data-cached-tabindex]').forEach(function (el) {
             el.tabIndex = Number(el.getAttribute('data-cached-tabindex'));
         });
@@ -2213,126 +2226,118 @@ var tabIndexHandler = function (reset, toast) {
 };
 
 /**
- * The cauldron toast notification component
+ * Hook to be used similarly to the React.Component#componentDidMount.
+ * Executes the provided `effect` when `dependencies` change but does not
+ * execute the effect initially (on mount) - only on update.
+ *
+ * @param effect {Function} function to be executed when dependencies update
+ * @param dependencies {Any} any valid dependency argument to React.useEffect
  */
-var Toast = /** @class */ (function (_super) {
-    tslib.__extends(Toast, _super);
-    function Toast(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            animationClass: props.show ? 'FadeIn--flex' : 'is--hidden'
-        };
-        _this.dismissToast = _this.dismissToast.bind(_this);
-        _this.showToast = _this.showToast.bind(_this);
-        return _this;
-    }
-    Toast.prototype.componentDidMount = function () {
-        var show = this.props.show;
-        if (show) {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(this.showToast);
+var useDidUpdate = function (effect, dependencies) {
+    var mounted = React__default["default"].useRef(false);
+    React__default["default"].useEffect(function () {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
         }
+        effect();
+    }, dependencies);
+};
+
+/**
+ * The cauldron toast notification component
+ */
+var Toast = React.forwardRef(function (_a, ref) {
+    var type = _a.type, children = _a.children, _b = _a.onDismiss, onDismiss = _b === void 0 ? function () {
+        // noop
+    } : _b, _c = _a.dismissText, dismissText = _c === void 0 ? 'Dismiss' : _c, toastRef = _a.toastRef, _d = _a.focus, focus = _d === void 0 ? true : _d, _e = _a.show, show = _e === void 0 ? false : _e, _f = _a.dismissible, dismissible = _f === void 0 ? true : _f, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
+    var elRef = useSharedRef(ref);
+    var isolatorRef = React.useRef(null);
+    var timeoutsRef = React.useRef(new Set());
+    var _g = tslib.__read(React.useState(show ? 'FadeIn--flex' : 'is--hidden'), 2), animationClass = _g[0], setAnimationClass = _g[1];
+    // Backwards-compat: propagate to the deprecated toastRef prop as well
+    React.useEffect(function () {
+        var _a;
+        if (!toastRef)
+            return;
+        setRef(toastRef, (_a = elRef.current) !== null && _a !== void 0 ? _a : null);
+        return function () { return setRef(toastRef, null); };
+    }, [toastRef]);
+    // Timeout because CSS display: none/block and opacity:
+    // 0/1 properties cannot be toggled in the same tick
+    // see: https://codepen.io/isnerms/pen/eyQaLP
+    var scheduleNextTick = function (fn) {
+        var id = setTimeout(function () {
+            timeoutsRef.current.delete(id);
+            fn();
+        });
+        timeoutsRef.current.add(id);
     };
-    Toast.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        var show = this.props.show;
-        if (prevProps.show !== show) {
-            if (show) {
-                this.setState({ animationClass: 'FadeIn--flex' }, function () {
-                    setTimeout(_this.showToast);
-                });
-            }
-            else {
-                this.dismissToast();
-            }
+    var showToast = React.useCallback(function () {
+        setAnimationClass('FadeIn--flex FadeIn');
+        if (type === 'action-needed' && elRef.current) {
+            var isolator = new AriaIsolate(elRef.current);
+            tabIndexHandler(false, elRef.current);
+            isolatorRef.current = isolator;
+            isolator.activate();
         }
-    };
-    Toast.prototype.componentWillUnmount = function () {
-        var isolator = this.state.isolator;
-        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-    };
-    Toast.prototype.render = function () {
-        var _this = this;
-        var animationClass = this.state.animationClass;
-        var _a = this.props, type = _a.type, children = _a.children; 
-        // prevent `onDismiss` from being passed-through to DOM
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onDismiss; var dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
-        var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
-        var defaultProps = {
-            tabIndex: -1,
-            className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
-        };
-        if (!focus) {
-            defaultProps.role = 'alert';
+        if (elRef.current && !!focus) {
+            elRef.current.focus();
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", tslib.__assign({ ref: function (el) {
-                    _this.el = el;
-                    setRef(toastRef, el);
-                } }, defaultProps, otherProps),
-                React__default["default"].createElement("div", { className: "Toast__message" },
-                    React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
-                    React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
-                type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
-                    React__default["default"].createElement(Icon, { type: "close" })))),
-            scrim));
-    };
-    Toast.prototype.dismissToast = function () {
-        var _this = this;
-        if (!this.el) {
+    }, [type, focus]);
+    var dismissToast = React.useCallback(function () {
+        if (!elRef.current) {
             return;
         }
-        var _a = this.props, onDismiss = _a.onDismiss, type = _a.type;
-        var isolator = this.state.isolator;
-        this.setState({
-            animationClass: 'FadeIn--flex'
-        }, function () {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(function () {
-                if (type === 'action-needed') {
-                    tabIndexHandler(true, _this.el);
-                    isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-                }
-                _this.setState({ animationClass: 'is--hidden' }, onDismiss);
-            });
-        });
-    };
-    Toast.prototype.showToast = function () {
-        var _this = this;
-        var _a = this.props, type = _a.type, focus = _a.focus;
-        this.setState({
-            animationClass: 'FadeIn--flex FadeIn'
-        }, function () {
+        setAnimationClass('FadeIn--flex');
+        scheduleNextTick(function () {
+            var _a;
             if (type === 'action-needed') {
-                var isolator = new AriaIsolate(_this.el);
-                tabIndexHandler(false, _this.el);
-                _this.setState({ isolator: isolator });
-                isolator.activate();
-            }
-            if (_this.el && !!focus) {
-                // focus the toast
-                _this.el.focus();
+                tabIndexHandler(true, elRef.current);
+                (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
             }
+            setAnimationClass('is--hidden');
+            onDismiss();
         });
+    }, [type, onDismiss]);
+    React.useEffect(function () {
+        if (show) {
+            scheduleNextTick(showToast);
+        }
+        return function () {
+            var _a;
+            timeoutsRef.current.forEach(clearTimeout);
+            timeoutsRef.current.clear();
+            (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+        };
+    }, []);
+    useDidUpdate(function () {
+        if (show) {
+            setAnimationClass('FadeIn--flex');
+            scheduleNextTick(showToast);
+        }
+        else {
+            dismissToast();
+        }
+    }, [show]);
+    var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
+    var defaultProps = {
+        tabIndex: -1,
+        className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
     };
-    Toast.defaultProps = {
-        dismissText: 'Dismiss',
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDismiss: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        toastRef: function () { },
-        focus: true,
-        show: false,
-        dismissible: true
-    };
-    Toast.displayName = 'Toast';
-    return Toast;
-}(React__default["default"].Component));
+    if (!focus) {
+        defaultProps.role = 'alert';
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", tslib.__assign({ ref: elRef }, defaultProps, otherProps),
+            React__default["default"].createElement("div", { className: "Toast__message" },
+                React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
+                React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
+            type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: "Toast__dismiss", "aria-label": dismissText, onClick: dismissToast },
+                React__default["default"].createElement(Icon, { type: "close" })))),
+        scrim));
+});
+Toast.displayName = 'Toast';
 
 var Link = React.forwardRef(function (_a, ref) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
@@ -2599,10 +2604,10 @@ var RadioCardGroup = function (_a) {
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "indeterminate", "children"]);
-    var _e = tslib.__read(React.useState(checked), 2), isChecked = _e[0], setIsChecked = _e[1];
-    var _f = tslib.__read(React.useState(indeterminate), 2), isIndeterminate = _f[0], setIsIndeterminate = _f[1];
-    var _g = tslib.__read(React.useState(false), 2), focused = _g[0], setFocused = _g[1];
+    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, _b = _a.controlled, controlled = _b === void 0 ? false : _b, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "controlled", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "indeterminate", "children"]);
+    var _f = tslib.__read(React.useState(checked), 2), isChecked = _f[0], setIsChecked = _f[1];
+    var _g = tslib.__read(React.useState(indeterminate), 2), isIndeterminate = _g[0], setIsIndeterminate = _g[1];
+    var _h = tslib.__read(React.useState(false), 2), focused = _h[0], setFocused = _h[1];
     var checkRef = React.useRef(null);
     React.useEffect(function () {
         setIsChecked(checked);
@@ -2614,12 +2619,12 @@ var Checkbox = React.forwardRef(function (_a, ref) {
     if (typeof refProp === 'function') {
         refProp(checkRef.current);
     }
-    var _h = React.useMemo(function () {
+    var _j = React.useMemo(function () {
         return {
             labelDescriptionId: nextId__default["default"](),
             errorId: nextId__default["default"]()
         };
-    }, []), errorId = _h.errorId, labelDescriptionId = _h.labelDescriptionId;
+    }, []), errorId = _j.errorId, labelDescriptionId = _j.labelDescriptionId;
     var ariaDescribedbyId = ariaDescribedby;
     if (error) {
         ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
@@ -2658,7 +2663,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                     if (isIndeterminate) {
                         setIsIndeterminate(false);
                     }
-                    setIsChecked(e.target.checked);
+                    if (!controlled) {
+                        setIsChecked(e.target.checked);
+                    }
                     if (onChange) {
                         onChange(e);
                     }
@@ -2692,7 +2699,7 @@ Checkbox.displayName = 'Checkbox';
  */
 function TooltipTabstop(_a) {
     var children = _a.children, className = _a.className, tooltip = _a.tooltip, variant = _a.variant, association = _a.association, show = _a.show, placement = _a.placement, portal = _a.portal, hideElementOnHidden = _a.hideElementOnHidden, buttonProps = tslib.__rest(_a, ["children", "className", "tooltip", "variant", "association", "show", "placement", "portal", "hideElementOnHidden"]);
-    var buttonRef = React.useRef();
+    var buttonRef = React.useRef(null);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("button", tslib.__assign({ type: "button", ref: buttonRef, "aria-disabled": "true", className: classNames__default["default"]('TooltipTabstop', className) }, buttonProps), children),
         React__default["default"].createElement(Tooltip, { target: buttonRef, variant: variant, association: association, show: show, placement: placement, portal: portal, hideElementOnHidden: hideElementOnHidden }, tooltip)));
@@ -3231,25 +3238,6 @@ var Tab = React__default["default"].forwardRef(function (_a, ref) {
 });
 Tab.displayName = 'Tab';
 
-/**
- * Hook to be used similarly to the React.Component#componentDidMount.
- * Executes the provided `effect` when `dependencies` change but does not
- * execute the effect initially (on mount) - only on update.
- *
- * @param effect {Function} function to be executed when dependencies update
- * @param dependencies {Any} any valid dependency argument to React.useEffect
- */
-var useDidUpdate = function (effect, dependencies) {
-    var mounted = React__default["default"].useRef(false);
-    React__default["default"].useEffect(function () {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        effect();
-    }, dependencies);
-};
-
 var Tabs = function (_a) {
     var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
     var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
@@ -3555,7 +3543,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
     var closeButtonRef = React.useRef(null);
     var columnLeftRef = React.useRef(null);
     var columnRightRef = React.useRef(null);
-    var columnLeft = React__default["default"].Children.toArray(children).find(function (child) { return child.type === ColumnLeft; });
+    var columnLeft = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === ColumnLeft; });
     var togglePanel = function () {
         var prefersReducedMotion = 'matchMedia' in window &&
             typeof matchMedia === 'function' &&
@@ -3588,16 +3576,17 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
     var ColumnLeftComponent;
     var columnLeftId;
     if (React.isValidElement(columnLeft)) {
-        var ref_1 = columnLeft.props.ref || columnLeftRef;
+        var columnLeftProps = columnLeft.props;
+        var ref_1 = columnLeftProps.ref || columnLeftRef;
         var id = (columnLeftId =
-            columnLeft.props.id || nextId.useId(undefined, 'sidebar-')[0]);
+            columnLeftProps.id || nextId.useId(undefined, 'sidebar-')[0]);
         var CloseButton = (React__default["default"].createElement("div", { className: "TwoColumnPanel__Close" },
             React__default["default"].createElement("button", { type: "button", onClick: togglePanel, ref: closeButtonRef, "aria-label": hideCollapsedPanelLabel },
                 React__default["default"].createElement(Icon, { type: "close" })),
             React__default["default"].createElement(Tooltip, { target: closeButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, hideCollapsedPanelLabel)));
         var children_1 = tslib.__spreadArray([
             CloseButton
-        ], tslib.__read(React__default["default"].Children.toArray(columnLeft.props.children)), false);
+        ], tslib.__read(React__default["default"].Children.toArray(columnLeftProps.children)), false);
         ColumnLeftComponent = React.cloneElement(columnLeft, { id: id, ref: ref_1, tabIndex: -1 }, children_1.map(function (child, index) {
             return React.cloneElement(child, {
                 key: child.key
@@ -3606,17 +3595,18 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             });
         }));
     }
-    var columnRight = React__default["default"].Children.toArray(children).find(function (child) { return child.type === ColumnRight; });
+    var columnRight = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === ColumnRight; });
     var ColumnRightComponent;
     if (React.isValidElement(columnRight)) {
-        var ref_2 = columnRight.props.ref || columnRightRef;
+        var columnRightProps = columnRight.props;
+        var ref_2 = columnRightProps.ref || columnRightRef;
         var ToggleButton = (React__default["default"].createElement("div", { className: "TwoColumnPanel__ButtonToggle" },
             React__default["default"].createElement("button", { type: "button", onClick: togglePanel, ref: toggleButtonRef, "aria-label": !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel, "aria-expanded": !isCollapsed, "aria-controls": columnLeftId },
                 React__default["default"].createElement(Icon, { type: !isCollapsed ? 'chevron-double-left' : 'chevron-double-right' })),
             React__default["default"].createElement(Tooltip, { target: toggleButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel)));
         var children_2 = tslib.__spreadArray([
             ToggleButton
-        ], tslib.__read(React__default["default"].Children.toArray(columnRight.props.children)), false);
+        ], tslib.__read(React__default["default"].Children.toArray(columnRightProps.children)), false);
         ColumnRightComponent = React.cloneElement(columnRight, { ref: ref_2, tabIndex: -1 }, children_2.map(function (child, index) {
             return React.cloneElement(child, {
                 key: child.key
@@ -3638,7 +3628,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             (_a = columnLeftRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionend', handleTransitionEnd);
         };
     }, [columnLeftRef.current, isCollapsed]);
-    // When the collapsable panel starts to overlay content, it needs to become a focus trap and collapsed by default
+    // When the collapsible panel starts to overlay content, it needs to become a focus trap and collapsed by default
     React.useLayoutEffect(function () {
         var mediaQueryList = matchMedia(collapsedMediaQuery);
         var handleMatch = function (matches) {
@@ -3802,7 +3792,8 @@ var Listbox = React.forwardRef(function (_a, ref) {
         }
     }, [activeOption]);
     React.useEffect(function () {
-        if (isActiveControlled && controlledActiveOption !== activeOption) {
+        if (isActiveControlled &&
+            (controlledActiveOption === null || controlledActiveOption === void 0 ? void 0 : controlledActiveOption.element) !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.element)) {
             setActiveOption(controlledActiveOption || null);
         }
     }, [isActiveControlled, controlledActiveOption]);
@@ -3948,11 +3939,11 @@ 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, 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 _c, _d;
+    var propId = _a.id, className = _a.className, _e = _a.as, Component = _e === void 0 ? 'li' : _e, children = _a.children, value = _a.value, disabled = _a.disabled, selectedProp = _a.selected, _f = _a.activeClass, activeClass = _f === void 0 ? 'ListboxOption--active' : _f, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "selected", "activeClass", "onClick"]);
+    var _g = useListboxContext(), active = _g.active, selected = _g.selected, setOptions = _g.setOptions, onSelect = _g.onSelect;
     var listboxOptionRef = useSharedRef(ref);
-    var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-option'), 1), id = _g[0];
+    var _h = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-option'), 1), id = _h[0];
     var isActive = (active === null || active === void 0 ? void 0 : active.element) === listboxOptionRef.current;
     var isSelected = typeof selectedProp === 'boolean'
         ? selectedProp
@@ -3960,15 +3951,15 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
             !!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;
+        : ((_d = (_c = listboxOptionRef.current) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : undefined);
     React.useEffect(function () {
         var element = listboxOptionRef.current;
         setOptions(function (options) {
             var e_1, _a;
-            var option = { element: element, value: optionValue };
             // istanbul ignore next
             if (!element)
                 return options;
+            var option = { element: element, value: optionValue };
             // Elements are frequently appended, so check to see if the newly rendered
             // element follows the last element first before any other checks
             if (!options.length ||
@@ -4155,7 +4146,7 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
     // istanbul ignore next
     React.useLayoutEffect(function () {
         var intersectionEntry = intersectionRef.current;
-        if (!intersectionEntry || !isActive) {
+        if (!intersectionEntry || !isActive || !comboboxOptionRef.current) {
             return;
         }
         var rect = comboboxOptionRef.current.getBoundingClientRect();
@@ -4171,10 +4162,10 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
         }
     }, [isActive]);
     React.useEffect(function () {
-        var _a;
+        var _a, _b;
         var comboboxValue = typeof propValue !== 'undefined'
             ? propValue
-            : (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+            : ((_b = (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : undefined);
         var value = typeof formValue === 'undefined' ? comboboxValue : formValue;
         setFormValues(function (prev) {
             var formValues = prev.filter(function (fv) { return fv !== value; });
@@ -4193,12 +4184,14 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
         });
     }, [selectedValues, formValue]);
     React.useEffect(function () {
-        var _a;
+        var _a, _b;
         if (isMatching) {
             var comboboxValue_1 = typeof propValue !== 'undefined'
                 ? propValue
-                : (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+                : ((_b = (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : undefined);
             setMatchingOptions(function (options) {
+                if (!comboboxOptionRef.current)
+                    return options;
                 return new Map(options.set(comboboxOptionRef.current, {
                     value: comboboxValue_1,
                     displayValue: children,
@@ -4338,6 +4331,17 @@ var Combobox = React.forwardRef(function (_a, ref) {
             return value === lastSelectedValue;
         }) || [], 2), element = _a[0], option = _a[1];
         if (autocomplete === 'manual') {
+            // In multiselect, the listbox manages its own active option via
+            // keyboard navigation. When the last-selected value no longer
+            // matches any option (e.g. after deselecting the only selected
+            // option), preserve the existing active descendant so the next
+            // Enter keypress can re-toggle the highlighted option.
+            if (multiselect &&
+                !element &&
+                activeDescendant &&
+                matchingOptions.has(activeDescendant.element)) {
+                return;
+            }
             setActiveDescendant(!element ? null : tslib.__assign({ element: element }, option));
         }
         else if (autocomplete === 'automatic' &&
@@ -4517,6 +4521,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
         });
     }, [disabled, selectedValues, onSelectionChange]);
     var handlePillKeyDown = React.useCallback(function (event) {
+        var _a, _b;
         if (!PillKeys.includes(event.key)) {
             return;
         }
@@ -4534,7 +4539,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             handleRemovePill(pillsRef.current[focusedIndex], selectedValues[focusedIndex]);
             var nextIndex = focusedIndex + 1;
             if (nextIndex == pillsLength) {
-                inputRef.current.focus();
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
                 pillsRef.current[nextIndex].focus();
@@ -4543,7 +4548,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
         else if (isArrowLeft || isArrowRight) {
             var nextIndex = Math.max(focusedIndex + (isArrowLeft ? -1 : 1), 0);
             if (isArrowRight && nextIndex === pillsLength) {
-                inputRef.current.focus();
+                (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
             else {
                 pillsRef.current[nextIndex].focus();
@@ -4831,10 +4836,12 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
                     : overflowElement.clientWidth < overflowElement.scrollWidth);
             });
         };
+        if (!sharedRef.current)
+            return;
         var observer = new ResizeObserver(listener);
         observer.observe(sharedRef.current);
         return function () {
-            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer.disconnect();
         };
     }, []);
     React.useEffect(function () {
@@ -4879,7 +4886,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
         openRef.current = open;
     }, [open, setIsTransitioning]);
     React.useEffect(function () {
-        if (!isModal) {
+        if (!isModal || !drawerRef.current) {
             return;
         }
         var isolator = new AriaIsolate(drawerRef.current);
@@ -5060,7 +5067,7 @@ function getActiveElement(root) {
  */
 function useMnemonics(_a) {
     var elementOrRef = _a.elementOrRef, matchingElementsSelector = _a.matchingElementsSelector, onMatch = _a.onMatch, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
-    var containerRef = React.useRef();
+    var containerRef = React.useRef(null);
     React.useEffect(function () {
         if (elementOrRef instanceof HTMLElement) {
             containerRef.current = elementOrRef;
@@ -5070,7 +5077,8 @@ function useMnemonics(_a) {
         }
     }, [elementOrRef]);
     React.useEffect(function () {
-        if (!enabled || !containerRef.current) {
+        var listenerTarget = containerRef.current;
+        if (!enabled || !listenerTarget) {
             return;
         }
         var keyboardHandler = function (event) {
@@ -5083,14 +5091,14 @@ function useMnemonics(_a) {
             if (event.key.length !== 1 || !/[a-z\d]/i.test(event.key)) {
                 return;
             }
-            var container = containerRef.current;
-            if (!container) {
+            var currentContainer = containerRef.current;
+            if (!currentContainer) {
                 return;
             }
             // Prevent default behavior and stop propagation for mnemonic keys
             event.preventDefault();
             event.stopPropagation();
-            var elements = Array.from(container.querySelectorAll(matchingElementsSelector !== null && matchingElementsSelector !== void 0 ? matchingElementsSelector : focusable__default["default"]));
+            var elements = Array.from(currentContainer.querySelectorAll(matchingElementsSelector !== null && matchingElementsSelector !== void 0 ? matchingElementsSelector : focusable__default["default"]));
             var matchingElements = elements.filter(function (element) {
                 return getAccessibleLabel(element).toLowerCase()[0] ===
                     event.key.toLowerCase();
@@ -5098,7 +5106,7 @@ function useMnemonics(_a) {
             if (!matchingElements.length) {
                 return;
             }
-            var currentActiveElement = getActiveElement(containerRef.current);
+            var currentActiveElement = getActiveElement(currentContainer);
             var nextActiveElement = null;
             if (currentActiveElement) {
                 nextActiveElement = matchingElements.find(function (element) {
@@ -5112,17 +5120,15 @@ function useMnemonics(_a) {
                 onMatch(nextActiveElement !== null && nextActiveElement !== void 0 ? nextActiveElement : matchingElements[0]);
             }
         };
-        var container = containerRef.current;
-        container.addEventListener('keydown', keyboardHandler);
-        return function () { return container.removeEventListener('keydown', keyboardHandler); };
+        listenerTarget.addEventListener('keydown', keyboardHandler);
+        return function () { return listenerTarget.removeEventListener('keydown', keyboardHandler); };
     }, [enabled, containerRef, matchingElementsSelector, onMatch]);
     return containerRef;
 }
 
 var ActionList = React.forwardRef(function (_a, ref) {
     var _b = _a.selectionType, selectionType = _b === void 0 ? null : _b, onAction = _a.onAction, className = _a.className, children = _a.children, props = tslib.__rest(_a, ["selectionType", "onAction", "className", "children"]);
-    var actionListContext = useActionListContext();
-    var activeElement = React.useRef();
+    var activeElement = React.useRef(null);
     var _c = tslib.__read(React.useState(), 2), activeOption = _c[0], setActiveOption = _c[1];
     var handleActiveChange = React.useCallback(function (value) {
         activeElement.current = value === null || value === void 0 ? void 0 : value.element;
@@ -5133,22 +5139,18 @@ var ActionList = React.forwardRef(function (_a, ref) {
             onAction(key, event);
         }
     }, [onAction]);
+    var handleMnemonicMatch = React.useCallback(function (element) {
+        setActiveOption(function (prev) {
+            return (prev === null || prev === void 0 ? void 0 : prev.element) === element ? prev : { element: element };
+        });
+    }, []);
     var containerRef = useMnemonics({
-        onMatch: function (element) {
-            setActiveOption({
-                element: element
-            });
-        },
+        onMatch: handleMnemonicMatch,
         matchingElementsSelector: props.role === 'menu'
             ? '[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]'
             : '[role=option]'
     });
-    return (
-    // Note: we should be able to use listbox without passing a prop
-    // value for "multiselect"
-    // see: https://github.com/dequelabs/cauldron/issues/1890
-    // @ts-expect-error this should be allowed
-    React__default["default"].createElement(Listbox, tslib.__assign({ ref: function (element) {
+    return (React__default["default"].createElement(Listbox, tslib.__assign({ ref: function (element) {
             if (ref) {
                 setRef(ref, element);
             }
@@ -5157,7 +5159,7 @@ var ActionList = React.forwardRef(function (_a, ref) {
         /* Listbox comes with an explicit role of "listbox", but we want to either
          * use the role from props, or default to the intrinsic role */
         // eslint-disable-next-line jsx-a11y/aria-role
-        role: undefined, "aria-multiselectable": actionListContext.role === 'listbox' ? undefined : null, className: classNames__default["default"]('ActionList', className), activeOption: activeOption }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
+        role: undefined, "aria-multiselectable": undefined, className: classNames__default["default"]('ActionList', className), activeOption: activeOption }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
         React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
 });
 ActionList.displayName = 'ActionList';
@@ -5175,7 +5177,7 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
     });
     var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === actionListItemRef.current;
     var handleAction = React.useCallback(function (event) {
-        var _a;
+        var _a, _b;
         if (event.defaultPrevented) {
             return;
         }
@@ -5188,7 +5190,7 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
         }
         // istanbul ignore else
         if (typeof onActionListAction === 'function') {
-            onActionListAction(actionKey || ((_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.innerText.trim()) || '', event);
+            onActionListAction(actionKey || ((_b = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '', event);
         }
     }, [onAction, onActionListAction, selectionType, actionKey]);
     var listItemRole = undefined;
@@ -5212,7 +5214,7 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
     // istanbul ignore next
     React.useLayoutEffect(function () {
         var intersectionEntry = intersectionRef.current;
-        if (!intersectionEntry || !isActive) {
+        if (!intersectionEntry || !isActive || !actionListItemRef.current) {
             return;
         }
         var rect = actionListItemRef.current.getBoundingClientRect();
@@ -5311,9 +5313,10 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
     var _e = tslib.__read(React.useState('first'), 2), focusStrategy = _e[0], setFocusStrategy = _e[1];
     var triggerRef = React.useRef(null);
     var actionMenuRef = useSharedRef(ref);
-    var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
-    var _f = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _f[0];
-    var _g = tslib.__read(nextId.useId(1, 'menu'), 1), menuId = _g[0];
+    var _f = actionMenuList.props, actionListRef = _f.ref, actionListOnAction = _f.onAction;
+    var actionMenuListRef = useSharedRef(actionListRef !== null && actionListRef !== void 0 ? actionListRef : null);
+    var _g = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _g[0];
+    var _h = tslib.__read(nextId.useId(1, 'menu'), 1), menuId = _h[0];
     var handleTriggerClick = React.useCallback(function (event) {
         // istanbul ignore else
         if (!event.defaultPrevented) {
@@ -5360,11 +5363,10 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
         if (!event.defaultPrevented) {
             setOpen(false);
         }
-        var onAction = actionMenuList.props.onAction;
-        if (typeof onAction === 'function') {
-            onAction(key, event);
+        if (typeof actionListOnAction === 'function') {
+            actionListOnAction(key, event);
         }
-    }, [actionMenuList.props.onAction]);
+    }, [actionListOnAction]);
     React.useEffect(function () {
         var _a, _b;
         if (open) {
@@ -5425,6 +5427,189 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
 });
 ActionMenu.displayName = 'ActionMenu';
 
+var TreeViewItem = function (_a) {
+    var id = _a.id, textValue = _a.textValue, children = _a.children;
+    var checkboxId = React.useMemo(function () { return nextId__default["default"]('tree-view-item-'); }, []);
+    return (React__default["default"].createElement(reactAriaComponents.TreeItem, { id: id, textValue: textValue, className: "TreeView__item" },
+        React__default["default"].createElement(reactAriaComponents.TreeItemContent, null, function (_a) {
+            var selectionMode = _a.selectionMode, isSelected = _a.isSelected, isDisabled = _a.isDisabled;
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(reactAriaComponents.Button, { slot: "chevron", className: "TreeView__chevron" },
+                    React__default["default"].createElement(Icon, { type: "chevron-right" })),
+                selectionMode !== 'none' ? (React__default["default"].createElement(Checkbox, { id: checkboxId, label: textValue, checked: isSelected, disabled: isDisabled, controlled: true, tabIndex: -1 })) : (React__default["default"].createElement(React__default["default"].Fragment, null, textValue))));
+        }),
+        children && children.length > 0 && (React__default["default"].createElement(reactAriaComponents.Collection, null, children.map(function (child) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: child.id }, child))); })))));
+};
+TreeViewItem.displayName = 'TreeViewItem';
+
+/** Every node id in the tree, flattened depth-first. */
+function collectAllKeys(nodes) {
+    return nodes.flatMap(function (node) { return tslib.__spreadArray([
+        node.id
+    ], tslib.__read((node.children ? collectAllKeys(node.children) : [])), false); });
+}
+/** Normalize react-aria's `Selection` ("all" | Set) into a concrete Set of keys. */
+function toKeySet(selection, nodes) {
+    if (selection !== 'all') {
+        return new Set(selection);
+    }
+    // "Select all" only includes selectable (non-disabled) nodes.
+    var disabled = new Set(collectDisabledKeys(nodes));
+    return new Set(collectAllKeys(nodes).filter(function (key) { return !disabled.has(key); }));
+}
+/** Locate a node anywhere in the tree by its id. */
+function findNode(nodes, key) {
+    var e_1, _a;
+    try {
+        for (var nodes_1 = tslib.__values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
+            var node = nodes_1_1.value;
+            if (node.id === key) {
+                return node;
+            }
+            if (node.children) {
+                var found = findNode(node.children, key);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return undefined;
+}
+/** All descendant ids of a node (not including the node itself). */
+function collectDescendantKeys(node) {
+    if (!node.children) {
+        return [];
+    }
+    return node.children.flatMap(function (child) { return tslib.__spreadArray([
+        child.id
+    ], tslib.__read(collectDescendantKeys(child)), false); });
+}
+/** Ids of all disabled nodes (rendered disabled / non-selectable). */
+function collectDisabledKeys(nodes) {
+    return nodes.flatMap(function (node) { return tslib.__spreadArray(tslib.__spreadArray([], tslib.__read((node.disabled ? [node.id] : [])), false), tslib.__read((node.children ? collectDisabledKeys(node.children) : [])), false); });
+}
+/**
+ * Toggle a single node, applying cascade per the options (multiple mode only):
+ * - selecting + `cascadeSelect`: also selects all (non-disabled) descendants.
+ * - deselecting + `cascadeDeselect`: also deselects all descendants.
+ *
+ * In `single` mode only the clicked node is selected (clicking it again clears
+ * it); cascade does not apply.
+ */
+function toggleSelection(nodes, previous, key, selectionMode, _a) {
+    var cascadeSelect = _a.cascadeSelect, cascadeDeselect = _a.cascadeDeselect;
+    if (selectionMode === 'single') {
+        var result_1 = new Set();
+        if (!previous.has(key)) {
+            result_1.add(key);
+        }
+        return result_1;
+    }
+    var result = new Set(previous);
+    var node = findNode(nodes, key);
+    var descendants = node ? collectDescendantKeys(node) : [];
+    var disabled = new Set(collectDisabledKeys(nodes));
+    if (!previous.has(key)) {
+        result.add(key);
+        if (cascadeSelect) {
+            descendants.forEach(function (k) {
+                if (!disabled.has(k)) {
+                    result.add(k);
+                }
+            });
+        }
+    }
+    else {
+        result.delete(key);
+        if (cascadeDeselect) {
+            descendants.forEach(function (k) { return result.delete(k); });
+        }
+    }
+    return result;
+}
+/**
+ * Apply react-aria's proposed selection while enforcing cascade. Each key
+ * react-aria added cascades to its descendants when `cascadeSelect` is set; each
+ * key it removed cascades when `cascadeDeselect` is set. In non-multiple modes
+ * (or with both toggles off) the proposed selection is used as-is.
+ */
+function applyCascade(nodes, previous, next, selectionMode, _a) {
+    var cascadeSelect = _a.cascadeSelect, cascadeDeselect = _a.cascadeDeselect;
+    if (selectionMode !== 'multiple' || (!cascadeSelect && !cascadeDeselect)) {
+        return next;
+    }
+    var result = new Set(previous);
+    var added = tslib.__spreadArray([], tslib.__read(next), false).filter(function (key) { return !previous.has(key); });
+    var removed = tslib.__spreadArray([], tslib.__read(previous), false).filter(function (key) { return !next.has(key); });
+    var disabled = new Set(collectDisabledKeys(nodes));
+    added.forEach(function (key) {
+        result.add(key);
+        if (cascadeSelect) {
+            var node = findNode(nodes, key);
+            (node ? collectDescendantKeys(node) : []).forEach(function (k) {
+                if (!disabled.has(k)) {
+                    result.add(k);
+                }
+            });
+        }
+    });
+    removed.forEach(function (key) {
+        result.delete(key);
+        if (cascadeDeselect) {
+            var node = findNode(nodes, key);
+            (node ? collectDescendantKeys(node) : []).forEach(function (k) {
+                return result.delete(k);
+            });
+        }
+    });
+    return result;
+}
+
+var TreeView = React.forwardRef(function (_a, ref) {
+    var items = _a.items, onAction = _a.onAction, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.cascadeSelect, cascadeSelect = _c === void 0 ? false : _c, _d = _a.cascadeDeselect, cascadeDeselect = _d === void 0 ? false : _d, defaultExpandedKeys = _a.defaultExpandedKeys, className = _a.className, other = tslib.__rest(_a, ["items", "onAction", "selectionMode", "cascadeSelect", "cascadeDeselect", "defaultExpandedKeys", "className"]);
+    var _e = tslib.__read(React.useState(new Set()), 2), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var cascade = { cascadeSelect: cascadeSelect, cascadeDeselect: cascadeDeselect };
+    // Cascade only applies to multiple selection.
+    var isCascade = selectionMode === 'multiple' && (cascadeSelect || cascadeDeselect);
+    // Selection driven by react-aria (row/checkbox press, keyboard). When
+    // cascading, reconcile the proposed change; otherwise store react-aria's
+    // selection as-is so the `'all'` sentinel (Ctrl+A) is preserved.
+    var handleSelectionChange = function (selection) {
+        setSelectedKeys(function (prev) {
+            return isCascade
+                ? applyCascade(items, toKeySet(prev, items), toKeySet(selection, items), selectionMode, cascade)
+                : selection;
+        });
+    };
+    // When `onAction` is set, react-aria treats a row press as an action rather
+    // than a selection, so we toggle selection here ourselves.
+    var handleAction = function (key) {
+        if (selectionMode !== 'none') {
+            setSelectedKeys(function (prev) {
+                return toggleSelection(items, toKeySet(prev, items), key, selectionMode, cascade);
+            });
+        }
+        onAction === null || onAction === void 0 ? void 0 : onAction(key);
+    };
+    // Disabled nodes are non-selectable; react-aria disables them via disabledKeys.
+    var disabledKeys = React.useMemo(function () { return collectDisabledKeys(items); }, [items]);
+    // Cascade requires controlling selection. Without it, preserve the original
+    // behavior: selection is only controlled when an `onAction` handler is set.
+    var selectionProps = selectionMode !== 'none' && (isCascade || onAction)
+        ? { selectedKeys: selectedKeys, onSelectionChange: handleSelectionChange }
+        : {};
+    return (React__default["default"].createElement(reactAriaComponents.Tree, tslib.__assign({ ref: ref, className: classNames__default["default"]('TreeView', className), selectionMode: selectionMode, defaultExpandedKeys: defaultExpandedKeys }, (disabledKeys.length > 0 ? { disabledKeys: disabledKeys } : {}), (onAction ? { onAction: handleAction } : {}), selectionProps, other), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+});
+TreeView.displayName = 'TreeView';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -5620,6 +5805,7 @@ exports.TopBar = TopBar;
 exports.TopBarItem = MenuItem;
 exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
+exports.TreeView = TreeView;
 exports.TwoColumnPanel = TwoColumnPanel;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;