@deque/cauldron-react 6.13.0 → 6.14.0-canary.1653ddc7

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/components/Button/index.d.ts

@@ -1,7 +1,7 @@
-import React, { ButtonHTMLAttributes, Ref } from 'react';
+import React, { type ButtonHTMLAttributes, type Ref } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     buttonRef?: Ref<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag' | 'badge';
     thin?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/index.js

@@ -1715,7 +1715,7 @@ var SkipLink = /** @class */ (function (_super) {
 
 var Button = React.forwardRef(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "children", "className", "buttonRef"]);
-    return (React__default["default"].createElement("button", tslib.__assign({ type: 'button', className: classNames__default["default"](className, {
+    return (React__default["default"].createElement("button", tslib.__assign({ type: "button", className: classNames__default["default"](className, {
             'Button--primary': variant === 'primary',
             'Button--secondary': variant === 'secondary',
             'Button--error': variant === 'error',
@@ -1723,7 +1723,8 @@ var Button = React.forwardRef(function (_a, ref) {
             Link: variant === 'link',
             Tag: variant === 'tag',
             'Button--tag': variant === 'tag',
-            'Button--thin': thin
+            'Button--thin': thin,
+            'Button--badge': variant === 'badge'
         }), ref: ref || buttonRef }, other), children));
 });
 Button.displayName = 'Button';
@@ -1779,7 +1780,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 +1816,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 +3649,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 +3755,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-canary.1653ddc7",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",