@deque/cauldron-react 7.1.0-canary.d650efcc → 7.1.0-canary.e2c7e4c9

package/lib/images.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgImages = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512",

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));
@@ -807,9 +810,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 +842,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 +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> 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
@@ -1356,7 +1365,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 +1498,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 +1548,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 +2143,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 +2705,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)));
@@ -3540,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' &&
@@ -3573,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
@@ -3591,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
@@ -3787,7 +3798,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]);
@@ -3933,11 +3945,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
@@ -3945,15 +3957,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 ||
@@ -4140,7 +4152,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();
@@ -4156,10 +4168,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; });
@@ -4178,12 +4190,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,
@@ -4513,6 +4527,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;
         }
@@ -4530,7 +4545,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();
@@ -4539,7 +4554,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();
@@ -4827,10 +4842,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 () {
@@ -4875,7 +4892,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);
@@ -5056,7 +5073,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;
@@ -5066,7 +5083,8 @@ function useMnemonics(_a) {
         }
     }, [elementOrRef]);
     React.useEffect(function () {
-        if (!enabled || !containerRef.current) {
+        var listenerTarget = containerRef.current;
+        if (!enabled || !listenerTarget) {
             return;
         }
         var keyboardHandler = function (event) {
@@ -5079,14 +5097,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();
@@ -5094,7 +5112,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) {
@@ -5108,16 +5126,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 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 +5145,13 @@ 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]'
@@ -5165,7 +5183,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;
         }
@@ -5178,7 +5196,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;
@@ -5202,7 +5220,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();
@@ -5301,9 +5319,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) {
@@ -5350,11 +5369,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/info-circle-alt.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgInfoCircleAlt = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   overflow: "visible",
   preserveAspectRatio: "none",

package/lib/info-circle.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgInfoCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/info-square.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgInfoSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   overflow: "visible",
   preserveAspectRatio: "none",

package/lib/kabob.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgKabob = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/link.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgLink = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/linkedin.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgLinkedin = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   overflow: "visible",
   preserveAspectRatio: "none",

package/lib/list.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _g;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgList = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   overflow: "visible",
   preserveAspectRatio: "none",

package/lib/lock.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgLock = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/magnifying-glass.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgMagnifyingGlass = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   viewBox: "0 0 24 24",
   height: 24,

package/lib/menu.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgMenu = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/minus.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgMinus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/new-releases.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path, _path2;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgNewReleases = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/new.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgNew = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",

package/lib/no.js

@@ -23,7 +23,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgNo = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   overflow: "visible",