@deque/cauldron-react 6.13.0 → 6.14.0

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

@@ -1,5 +1,6 @@
 import { type Placement } from '@floating-ui/dom';
 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>;
@@ -13,6 +14,10 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     onPlacementChange?: ((placement: Placement) => void) | undefined;
     /** An optional offset number to position the anchor element from its anchored target. */
     offset?: number | undefined;
+    /** When set, traps focus within the AnchoredOverlay. */
+    focusTrap?: boolean | undefined;
+    /** When `focusTrap` is true, optional arguments to configure the focus trap. */
+    focusTrapOptions?: Parameters<typeof useFocusTrap>[1];
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

package/lib/index.js

@@ -1779,7 +1779,7 @@ function getAutoAlignment(placement) {
     }
 }
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
-    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "onOpenChange", "onPlacementChange"]);
+    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange"]);
     var ref = useSharedRef(refProp);
     var Component = as || 'div';
     var _d = reactDom$1.useFloating({
@@ -1815,6 +1815,7 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
             }
         }
     });
+    useFocusTrap(ref, !focusTrap ? { disabled: true } : focusTrapOptions);
     React.useEffect(function () {
         if (typeof onPlacementChange === 'function') {
             onPlacementChange(placement);
@@ -3647,16 +3648,20 @@ var Listbox = React.forwardRef(function (_a, ref) {
                 });
             });
             setSelectedOptions(matchingOptions);
-            setActiveOption(matchingOptions[0] || null);
+            if (!activeOption) {
+                setActiveOption(matchingOptions[0] || null);
+            }
         }
         else {
             var matchingOption = options.find(function (option) {
                 return optionMatchesValue(option, listboxValue);
             });
             setSelectedOptions(matchingOption ? [matchingOption] : []);
-            setActiveOption(matchingOption || null);
+            if (!activeOption) {
+                setActiveOption(matchingOption || null);
+            }
         }
-    }, [isControlled, options, value, defaultValue]);
+    }, [isControlled, options, value, defaultValue, activeOption]);
     React.useEffect(function () {
         if (activeOption) {
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(activeOption);
@@ -3749,7 +3754,8 @@ var Listbox = React.forwardRef(function (_a, ref) {
         }
     }, [options, activeOption, navigation, handleSelect]);
     var handleFocus = React.useCallback(function (event) {
-        if (!activeOption) {
+        if (!activeOption ||
+            !options.some(function (option) { return option.element === activeOption.element; })) {
             var firstOption = options.find(function (option) { return !isDisabledOption(option); });
             // istanbul ignore else
             if (firstOption) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.13.0",
+  "version": "6.14.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",