@deque/cauldron-react 7.1.0-canary.383b8920 → 7.1.0-canary.4271d962

package/lib/components/ActionList/ActionList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ActionListSelectionType, type onActionCallbackFunction } from './ActionListContext';
-interface ActionListProps extends React.HTMLAttributes<HTMLUListElement> {
+interface ActionListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'defaultValue' | 'onSelect'> {
     children: React.ReactNode;
     /** Limits the amount of selections that can be made within an action list */
     selectionType?: ActionListSelectionType | null;

package/lib/components/Listbox/Listbox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListboxOption } from './ListboxContext';
 import type { ListboxValue } from './ListboxOption';
-import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+import type { PolymorphicProps, PolymorphicComponentProps } from '../../utils/polymorphicComponent';
 interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
     focusStrategy?: 'lastSelected' | 'first' | 'last';
@@ -30,5 +30,10 @@ interface MultiSelectListboxProps extends BaseListboxProps {
         value: ListboxValue[];
     }) => void;
 }
-declare const Listbox: PolymorphicComponent<SingleSelectListboxProps | MultiSelectListboxProps>;
+type ListboxComponent = Omit<React.ForwardRefExoticComponent<SingleSelectListboxProps | MultiSelectListboxProps>, keyof CallableFunction> & {
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<MultiSelectListboxProps, T>): React.ReactElement | null;
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<SingleSelectListboxProps, T>): React.ReactElement | null;
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<SingleSelectListboxProps | MultiSelectListboxProps, T>): React.ReactElement | null;
+};
+declare const Listbox: ListboxComponent;
 export default Listbox;

package/lib/index.js

@@ -807,9 +807,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;
@@ -832,9 +839,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 () {
@@ -1343,7 +1349,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 MutableRefObject<T | null> that will
  * correctly invoke the parent ref as well providing an internal ref.
  *
  * @example
@@ -1356,7 +1362,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); };
@@ -1489,7 +1495,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);
@@ -1539,7 +1545,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;
@@ -2134,7 +2140,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
@@ -2696,7 +2702,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)));
@@ -3950,10 +3956,10 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
         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 ||
@@ -3990,7 +3996,7 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
         if (disabled) {
             return;
         }
-        onSelect({ element: listboxOptionRef.current, value: optionValue });
+        onSelect({ element: event.target, value: optionValue });
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }, [optionValue, onSelect, onClick, disabled]);
     return (React__default["default"].createElement(Component, tslib.__assign({ id: id, className: classNames__default["default"](className, (_b = {},
@@ -4140,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();
@@ -4184,6 +4190,8 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
                 ? propValue
                 : (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
             setMatchingOptions(function (options) {
+                if (!comboboxOptionRef.current)
+                    return options;
                 return new Map(options.set(comboboxOptionRef.current, {
                     value: comboboxValue_1,
                     displayValue: children,
@@ -4323,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' &&
@@ -4502,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;
         }
@@ -4519,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();
@@ -4528,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();
@@ -4816,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 () {
@@ -4864,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);
@@ -5045,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;
@@ -5055,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) {
@@ -5068,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();
@@ -5083,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) {
@@ -5097,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;
@@ -5128,12 +5149,7 @@ var ActionList = React.forwardRef(function (_a, ref) {
             ? '[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);
             }
@@ -5142,7 +5158,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';
@@ -5197,7 +5213,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();

package/lib/utils/getChildRef.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function getChildRef(child: React.ReactElement, version?: string): React.Ref<HTMLElement> | null | undefined;

package/lib/utils/useMnemonics.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 import type { ElementOrRef } from '../types';
 type useMnemonicsOptions = {
     /**
@@ -19,7 +19,7 @@ type useMnemonicsOptions = {
      */
     enabled?: boolean;
 };
-type useMnemonicsResults<T extends HTMLElement> = RefObject<T>;
+type useMnemonicsResults<T extends HTMLElement> = MutableRefObject<T | null>;
 /**
  * A hook that provides mnemonic navigation for keyboard users.
  *

package/lib/utils/useSharedRef.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, Ref } from 'react';
 /**
  * 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 MutableRefObject<T | null> that will
  * correctly invoke the parent ref as well providing an internal ref.
  *
  * @example
@@ -13,4 +13,4 @@ import { MutableRefObject, Ref } from 'react';
  *   return (<div ref={internalRef}>...</div>)
  * })
  */
-export default function useSharedRef<T>(ref: Ref<T>): MutableRefObject<T>;
+export default function useSharedRef<T>(ref: Ref<T>): MutableRefObject<T | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.1.0-canary.383b8920",
+  "version": "7.1.0-canary.4271d962",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",