@deque/cauldron-react 7.1.0-canary.3a2e35e4 → 7.1.0-canary.3e2a4099

package/lib/components/Accordion/Accordion.d.ts

@@ -10,7 +10,7 @@ declare const AccordionTrigger: {
     ({ children, ...triggerProps }: AccordionTriggerProps): React.JSX.Element;
     displayName: string;
 };
-interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {
     children: React.ReactNode | React.ReactNode[];
     className?: string;
 }

package/lib/components/ActionMenu/ActionMenu.d.ts

@@ -1,13 +1,19 @@
 import React from 'react';
+import type { onActionCallbackFunction } from '../ActionList/ActionListContext';
+interface ActionMenuListProps {
+    ref?: React.Ref<HTMLElement>;
+    onAction?: onActionCallbackFunction;
+    [key: string]: unknown;
+}
 type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
 };
 type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;
 declare const ActionMenu: React.ForwardRefExoticComponent<{
-    children: React.ReactElement;
+    children: React.ReactElement<ActionMenuListProps>;
     trigger: React.ReactElement | ActionMenuTriggerFunction;
     /** Render the action menu in a different location in the dom. */
-    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
+    portal?: HTMLElement | React.RefObject<HTMLElement | null> | undefined;
     /**
      * Controls whether the menu should render as a child of the trigger, as opposed to
      * rendering as a sibling. Intended for use with nested menu patterns, for example
@@ -17,7 +23,7 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
      */
     renderInTrigger?: boolean | undefined;
 } & Pick<{
-    target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
+    target: HTMLElement | React.RefObject<HTMLElement | null> | React.MutableRefObject<HTMLElement | null>;
     placement?: "auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end" | undefined;
     open?: boolean | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;
@@ -31,7 +37,7 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
         returnFocus?: boolean | undefined;
         returnFocusElement?: import("../../types").ElementOrRef<HTMLElement> | undefined;
     } | undefined;
-    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
+    portal?: HTMLElement | React.RefObject<HTMLElement | null> | undefined;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import useFocusTrap from '../../utils/useFocusTrap';
 declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     /** A target element or ref to attach the overlay anchor element. */
-    target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
+    target: HTMLElement | React.RefObject<HTMLElement | null> | React.MutableRefObject<HTMLElement | null>;
     /** Positional placement value to anchor the overlay element relative to its anchored target. */
     placement?: "auto" | Placement | "auto-start" | "auto-end" | undefined;
     /** Determines if the overlay anchor is currently visible. */
@@ -21,7 +21,7 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     /** When `focusTrap` is true, optional arguments to configure the focus trap. */
     focusTrapOptions?: Parameters<typeof useFocusTrap>[1];
     /** Render the anchored overlay in a different location in the dom. */
-    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
+    portal?: HTMLElement | React.RefObject<HTMLElement | null> | undefined;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

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

@@ -4,7 +4,7 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
     onClickOutside: (e: MouseEvent | TouchEvent) => void;
     mouseEvent?: 'mousedown' | 'click' | 'mouseup' | false;
     touchEvent?: 'touchstart' | 'touchend' | false;
-    target?: T | React.RefObject<T> | React.MutableRefObject<T>;
+    target?: T | React.RefObject<T | null> | React.MutableRefObject<T | null>;
 }
 declare const _default: React.ForwardRefExoticComponent<ClickOutsideListenerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/lib/components/Combobox/Combobox.d.ts

@@ -19,7 +19,7 @@ interface BaseComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     autocomplete?: 'none' | 'manual' | 'automatic';
     onActiveChange?: (option: ListboxOption) => void;
     renderNoResults?: (() => React.JSX.Element) | React.ReactElement;
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
     inputRef?: React.Ref<HTMLInputElement>;
     description?: React.ReactNode;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 interface DialogContextValue {
     headingId: string;
-    headingRef: React.RefObject<HTMLHeadingElement>;
+    headingRef: React.RefObject<HTMLHeadingElement | null>;
     headingLevel: number;
     onClose: () => void;
     forceAction: boolean;

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

@@ -11,7 +11,7 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
         level: number | undefined;
     };
     closeButtonText?: string;
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
     scrollable?: boolean;
 }
 declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,7 +10,7 @@ export interface DrawerProps<T extends HTMLElement = HTMLElement> extends React.
         returnFocus?: ElementOrRef<T>;
     };
     onClose?: () => void;
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
 }
 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/lib/components/ExpandCollapsePanel/ExpandCollapsePanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface ExpandCollapsePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ExpandCollapsePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {
     open?: boolean;
     children: React.ReactNode;
     animationTiming?: number | boolean;

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

@@ -3,13 +3,13 @@ import { Cauldron } from '../../types';
 import AnchoredOverlay from '../AnchoredOverlay';
 export type PopoverVariant = 'prompt' | 'custom';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
-    target: React.RefObject<HTMLElement> | HTMLElement;
+    target: React.RefObject<HTMLElement | null> | HTMLElement;
     variant?: PopoverVariant;
     show: boolean;
     onClose: () => void;
     placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
     /** Render the popover in a different location in the dom. */
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
 };
 type CustomProps = BaseProps & {
     variant: 'custom';

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

@@ -10,6 +10,6 @@ type TableProvider = {
     columns: Array<Column>;
 };
 declare const TableContext: React.Context<TableContext>;
-declare function TableProvider({ children, layout, columns }: TableProvider): JSX.Element;
+declare function TableProvider({ children, layout, columns }: TableProvider): React.JSX.Element;
 declare function useTable(): TableContext;
 export { TableProvider, useTable };

package/lib/components/Tabs/Tab.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
-    target: React.RefObject<HTMLDivElement> | HTMLElement;
+    target: React.RefObject<HTMLDivElement | null> | HTMLElement;
     id?: string;
     children?: React.ReactNode;
 }

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

@@ -3,14 +3,14 @@ import AnchoredOverlay from '../AnchoredOverlay';
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
-    target: React.RefObject<HTMLElement> | HTMLElement;
+    target: React.RefObject<HTMLElement | null> | HTMLElement;
     variant?: 'text' | 'info' | 'big';
     association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
     defaultShow?: boolean;
     placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
     /** Render the tooltip in a different location in the dom. */
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
 declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, defaultShow, hideElementOnHidden, className, ...props }: TooltipProps): React.JSX.Element;

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));
@@ -1349,7 +1352,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 | null> 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
@@ -3546,7 +3549,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' &&
@@ -3579,16 +3582,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
@@ -3597,17 +3601,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
@@ -3939,11 +3944,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
@@ -3951,7 +3956,7 @@ 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) {
@@ -4162,10 +4167,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; });
@@ -4184,11 +4189,11 @@ 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;
@@ -5176,7 +5181,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;
         }
@@ -5189,7 +5194,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;
@@ -5312,9 +5317,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) {
@@ -5361,11 +5367,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) {

package/lib/types.d.ts

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

package/lib/utils/useFocusTrap.d.ts

@@ -30,5 +30,5 @@ export default function useFocusTrap<TargetElement extends Element = Element, Fo
      * can be provided to override the default active element behavior.
      */
     returnFocusElement?: ElementOrRef<FocusElement>;
-}): React.RefObject<Readonly<FocusTrap>>;
+}): React.RefObject<Readonly<FocusTrap> | null>;
 export {};

package/lib/utils/useSharedRef.d.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject, Ref } from 'react';
+import { RefObject, 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 | null> 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
@@ -13,4 +13,4 @@ import { MutableRefObject, Ref } from 'react';
  *   return (<div ref={internalRef}>...</div>)
  * })
  */
-export default function useSharedRef<T>(ref: Ref<T>): MutableRefObject<T | null>;
+export default function useSharedRef<T>(ref: Ref<T>): RefObject<T | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.1.0-canary.3a2e35e4",
+  "version": "7.1.0-canary.3e2a4099",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -54,8 +54,8 @@
     "@types/jest": "^29.5.11",
     "@types/jest-axe": "^3.5.4",
     "@types/node": "^17.0.42",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/sinon": "^10",
     "autoprefixer": "^9.7.6",
@@ -70,8 +70,8 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.8.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19",
+    "react-dom": "^19",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
     "ts-node": "^10.9.2",
@@ -82,7 +82,7 @@
     "url": "git+https://github.com/dequelabs/cauldron.git"
   },
   "peerDependencies": {
-    "react": ">=16.6 <= 18",
-    "react-dom": ">=16.6 <= 18"
+    "react": ">=16.6 <20",
+    "react-dom": ">=16.6 <20"
   }
 }