@deque/cauldron-react 7.1.0-canary.9946c2dc → 7.1.0-canary.9e9bd2aa

package/lib/index.js

@@ -495,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';
@@ -578,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));
@@ -620,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;
@@ -642,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;
@@ -672,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) {
@@ -720,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) {
@@ -750,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,
@@ -806,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;
@@ -831,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 () {
@@ -1342,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
@@ -1355,7 +1359,7 @@ 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); };
@@ -1488,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);
@@ -1538,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;
@@ -2133,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
@@ -2208,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'));
         });
@@ -2243,14 +2247,22 @@ var useDidUpdate = function (effect, dependencies) {
 /**
  * The cauldron toast notification component
  */
-var Toast = function (_a) {
+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(toastRef !== null && toastRef !== void 0 ? toastRef : null);
+    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
@@ -2324,7 +2336,7 @@ var Toast = function (_a) {
             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) {
@@ -2687,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)));
@@ -3531,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' &&
@@ -3564,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
@@ -3582,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
@@ -3614,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) {
@@ -3778,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]);
@@ -3924,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
@@ -3936,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 ||
@@ -4131,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();
@@ -4147,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; });
@@ -4169,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,
@@ -4314,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' &&
@@ -4493,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;
         }
@@ -4510,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();
@@ -4519,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();
@@ -4807,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 () {
@@ -4855,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);
@@ -5036,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;
@@ -5046,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) {
@@ -5059,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();
@@ -5074,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) {
@@ -5088,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;
@@ -5109,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);
             }
@@ -5133,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';
@@ -5151,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;
         }
@@ -5164,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;
@@ -5188,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();
@@ -5287,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) {
@@ -5336,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) {
@@ -5406,49 +5432,181 @@ var TreeViewItem = function (_a) {
     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;
+            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, controlled: true, tabIndex: -1 })) : (React__default["default"].createElement(React__default["default"].Fragment, null, textValue))));
+                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); });
 }
-var TreeView = React.forwardRef(function (_a, ref) {
-    var items = _a.items, onAction = _a.onAction, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, defaultExpandedKeys = _a.defaultExpandedKeys, className = _a.className, other = tslib.__rest(_a, ["items", "onAction", "selectionMode", "defaultExpandedKeys", "className"]);
-    var _c = tslib.__read(React.useState(new Set()), 2), selectedKeys = _c[0], setSelectedKeys = _c[1];
-    var handleAction = function (key) {
-        setSelectedKeys(function (prev) {
-            var prevSet = prev === 'all' ? new Set(collectAllKeys(items)) : new Set(prev);
-            var next = new Set(prevSet);
-            if (next.has(key)) {
-                next.delete(key);
+/** 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;
             }
-            else {
-                if (selectionMode === 'single') {
-                    next.clear();
+            if (node.children) {
+                var found = findNode(node.children, key);
+                if (found) {
+                    return found;
                 }
-                next.add(key);
             }
-            return next;
+        }
+    }
+    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;
         });
-        onAction === null || onAction === void 0 ? void 0 : onAction(key);
     };
-    var actionProps = onAction
-        ? {
-            onAction: handleAction,
-            selectedKeys: selectedKeys,
-            onSelectionChange: setSelectedKeys
+    // 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 }, actionProps, other), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+    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';