@deque/cauldron-react 7.5.0 → 7.6.0-canary.02bddc70

package/lib/cauldron.css

@@ -27,7 +27,6 @@
 }
 
 /* Dark Theme */
-
 .cauldron--theme-dark {
   --expandcollapse-trigger-color: var(--white);
   --expandcollapse-panel-color: var(--accent-light);
@@ -38,7 +37,6 @@
     animation: none !important;
   }
 }
-
 a.Button--primary,
 a.Button--secondary,
 a.Button--thin {
@@ -53,7 +51,6 @@ a.Button--secondary {
 a.Button--thin {
   padding: 0 var(--space-small);
 }
-
 .Icon {
   display: inline-block;
   vertical-align: middle;
@@ -66,7 +63,6 @@ a.Button--thin {
 }
 
 /* Icon--down is the default orientation */
-
 .Icon__down {
 }
 

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

@@ -2,7 +2,14 @@ import React from 'react';
 import { Cauldron } from '../../types';
 import { TreeViewNode } from './types';
 export type { TreeViewNode } from './types';
-type TreeViewProps = Cauldron.LabelProps & {
+/** Seeds the initial scroll math. Keep in step with `--tree-view-row-height`,
+ *  which sizes a virtualized row — see the spacing-parity test. */
+export declare const ESTIMATED_ROW_HEIGHT = 36;
+/** Keep in step with `--space-quarter` / `--space-half`, which `.TreeView` uses
+ *  for its flex spacing — see the spacing-parity test. */
+export declare const ROW_GAP = 2;
+export declare const LIST_PADDING = 4;
+type TreeViewProps = Cauldron.LabelProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'dangerouslySetInnerHTML'> & {
     items: TreeViewNode[];
     onAction?: (key: string) => void;
     selectionMode?: 'none' | 'single' | 'multiple';
@@ -13,7 +20,15 @@ type TreeViewProps = Cauldron.LabelProps & {
      *  all of its descendants. */
     cascadeDeselect?: boolean;
     defaultExpandedKeys?: string[];
-    className?: string;
+    /** Render only the rows in view. Use for long lists, where rendering every
+     *  row makes selection changes slow enough to look frozen. Needs a height —
+     *  from `height`, `style`, or CSS — or no rows render. Toggling this at
+     *  runtime remounts the tree, which resets expansion and scroll position. */
+    virtualized?: boolean;
+    /** Height of the scroll region, taking precedence over `style.height`. Only
+     *  applies when `virtualized` is set. A relative unit (`"20rem"`) keeps the
+     *  visible row count stable at zoom. */
+    height?: number | string;
 };
 declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
 export default TreeView;

package/lib/index.js

@@ -517,7 +517,7 @@ var Accordion = function (_a) {
     var panelProps = panelElement.props;
     return (React__default["default"].createElement("div", tslib.__assign({ className: "Accordion" }, props),
         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),
+            React__default["default"].createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", "aria-controls": panelProps.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props, { className: classNames__default["default"]('Accordion__trigger', trigger.props.className) }), trigger),
             panelElement)));
 };
 Accordion.displayName = 'Accordion';
@@ -1420,7 +1420,7 @@ function createFocusTrap(targetElement, initialFocusElement) {
         suspended: false
     };
     var focusListener = function (event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         var eventTarget = event.target;
         var elementContainsTarget = elementContains(targetElement, eventTarget);
         if (focusTrapMetadata.suspended) {
@@ -1438,24 +1438,26 @@ function createFocusTrap(targetElement, initialFocusElement) {
             return;
         }
         var focusableElements = Array.from((targetElement === null || targetElement === void 0 ? void 0 : targetElement.querySelectorAll(focusable__default["default"])) || []);
+        // Tab stops such as contenteditable and video[controls] can report tabIndex -1 without a tabindex attribute.
+        var wrapTargets = focusableElements.filter(function (element) { return !(element.hasAttribute('tabindex') && element.tabIndex < 0); });
         // If focus reaches the trap guards, we need to wrap focus around to the leading
         // or trailing focusable element depending on which guard obtained focus
-        if (focusableElements.length && eventTarget === startGuard) {
-            (_a = focusableElements.reverse()[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        if (wrapTargets.length && eventTarget === startGuard) {
+            wrapTargets[wrapTargets.length - 1].focus();
             return;
         }
-        else if (focusableElements.length && eventTarget === endGuard) {
-            (_b = focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        else if (wrapTargets.length && eventTarget === endGuard) {
+            wrapTargets[0].focus();
             return;
         }
         // If focus somehow escaped the trap, we need to try to restore focus to
         // to a suitable focusable element within the focus trap target. Otherwise
         // we'll need to focus on an alternative within the container.
         if (elementContains(targetElement, focusTrapMetadata.lastFocusedElement)) {
-            (_c = focusTrapMetadata.lastFocusedElement) === null || _c === void 0 ? void 0 : _c.focus();
+            (_a = focusTrapMetadata.lastFocusedElement) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else if (focusableElements.length) {
-            (_d = focusableElements[0]) === null || _d === void 0 ? void 0 : _d.focus();
+            (_b = focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus();
         }
         else {
             // if there are no focusable elements, just focus the container
@@ -1659,7 +1661,11 @@ var DialogContent = function (_a) {
             'text--align-left': align === 'left',
             'text--align-center': align === 'center',
             'text--align-right': align === 'right'
-        }), tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? -1 : undefined }, other), children));
+        }), 
+        // A keyboard user can only scroll this region if it is tabbable (WCAG
+        // 2.1.1). The rule allows that on role="tabpanel" only. See #680.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? 0 : undefined }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 var DialogFooter = function (_a) {
@@ -1882,6 +1888,12 @@ var preventTopOverflowMiddleware = {
         });
     }
 };
+// Element-resize tracking is split out of `whileElementsMounted` so it can be
+// scoped to the open state. This function's identity must stay stable:
+// floating-ui keys its positioning effect on whether one was passed, and a
+// re-run calls `update()` again, which on close pulls focus back out of the
+// trigger.
+var autoUpdateWithoutElementResize = function (reference, floating, update) { return dom.autoUpdate(reference, floating, update, { elementResize: false }); };
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
     var _b, _c;
     var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, portal = _a.portal, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange", "portal"]);
@@ -1910,8 +1922,35 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
         elements: {
             reference: resolveElement(target)
         },
-        whileElementsMounted: dom.autoUpdate
-    }), refs = _f.refs, floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
+        whileElementsMounted: autoUpdateWithoutElementResize
+    }), refs = _f.refs, floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData, update = _f.update, elements = _f.elements;
+    // Observing the target while the overlay is closed measures it for the
+    // first time mid-layout, which leaves a ResizeObserver notification
+    // undelivered and has the browser report an uncaught error.
+    React.useEffect(function () {
+        var reference = elements.reference, floating = elements.floating;
+        if (!open ||
+            !reference ||
+            !floating ||
+            typeof ResizeObserver !== 'function') {
+            return;
+        }
+        // Deferred a task: starting it re-positions, and a render in the middle
+        // of the open sequence loses the overlay's initial focus target.
+        var stopObserving;
+        var timeout = setTimeout(function () {
+            stopObserving = dom.autoUpdate(reference, floating, update, {
+                ancestorScroll: false,
+                ancestorResize: false,
+                layoutShift: false,
+                elementResize: true
+            });
+        });
+        return function () {
+            clearTimeout(timeout);
+            stopObserving === null || stopObserving === void 0 ? void 0 : stopObserving();
+        };
+    }, [open, elements, update]);
     useEscapeKey({
         active: open,
         capture: true,
@@ -3783,6 +3822,20 @@ var Listbox = React.forwardRef(function (_a, ref) {
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     var isActiveControlled = typeof controlledActiveOption !== 'undefined';
+    var hasActiveChangeHandler = typeof onActiveChange === 'function';
+    React.useEffect(function () {
+        if (process.env.NODE_ENV !== 'production' &&
+            isActiveControlled &&
+            hasActiveChangeHandler) {
+            console.warn('Listbox received both `activeOption` and `onActiveChange`. Do not ' +
+                'write the option reported by `onActiveChange` back into ' +
+                '`activeOption`: the two copies then race, and a stale downward ' +
+                'sync can revert a newer value and re-render without settling. ' +
+                'Let Listbox own the active option, or use `activeOption` only as ' +
+                'a one-shot request. ' +
+                'See https://github.com/dequelabs/cauldron/issues/2512');
+        }
+    }, [isActiveControlled, hasActiveChangeHandler]);
     React.useLayoutEffect(function () {
         if (!isControlled && selectedOptions.length > 0) {
             return;
@@ -3924,7 +3977,7 @@ var Listbox = React.forwardRef(function (_a, ref) {
             var firstOption = !focusDisabledOptions
                 ? options.find(function (option) { return !isDisabledOption(option); })
                 : options[0];
-            if (firstOption) {
+            if (firstOption && firstOption.element !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.element)) {
                 setActiveOption(firstOption);
             }
             return;
@@ -3933,7 +3986,7 @@ var Listbox = React.forwardRef(function (_a, ref) {
             var lastOption = !focusDisabledOptions
                 ? tslib.__spreadArray([], tslib.__read(options), false).reverse().find(function (option) { return !isDisabledOption(option); })
                 : options[options.length - 1];
-            if (lastOption) {
+            if (lastOption && lastOption.element !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.element)) {
                 setActiveOption(lastOption);
             }
             return;
@@ -5154,21 +5207,24 @@ function useMnemonics(_a) {
 
 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(null);
+    // Listbox owns the active option. ActionList must not mirror it back down
+    // as a controlled prop: the two copies then race, and a downward sync
+    // carrying an already-stale value can revert a newer one and oscillate.
+    // `activeOption` below is only a one-shot mnemonic request, never a
+    // mirror. See cauldron#2512; cauldron#2522 tracks making `activeOption`
+    // properly controlled so this constraint lives in the interface instead.
     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;
-        setActiveOption(value);
-    }, []);
     var handleAction = React.useCallback(function (key, event) {
         if (typeof onAction === 'function') {
             onAction(key, event);
         }
     }, [onAction]);
+    // A new object every match, even for the same element: this is a one-shot
+    // request to Listbox rather than a mirror of its state, so re-using the
+    // previous object would leave the controlled prop unchanged and the
+    // request would never reach Listbox.
     var handleMnemonicMatch = React.useCallback(function (element) {
-        setActiveOption(function (prev) {
-            return (prev === null || prev === void 0 ? void 0 : prev.element) === element ? prev : { element: element };
-        });
+        setActiveOption({ element: element });
     }, []);
     var containerRef = useMnemonics({
         onMatch: handleMnemonicMatch,
@@ -5185,7 +5241,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": undefined, 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, { navigation: "bound" }),
         React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
 });
 ActionList.displayName = 'ActionList';
@@ -5627,9 +5683,16 @@ function applyCascade(nodes, previous, next, selectionMode, _a) {
     return result;
 }
 
+/** Seeds the initial scroll math. Keep in step with `--tree-view-row-height`,
+ *  which sizes a virtualized row — see the spacing-parity test. */
+var ESTIMATED_ROW_HEIGHT = 36;
+/** Keep in step with `--space-quarter` / `--space-half`, which `.TreeView` uses
+ *  for its flex spacing — see the spacing-parity test. */
+var ROW_GAP = 2;
+var LIST_PADDING = 4;
 var TreeView = React.forwardRef(function (_a, ref) {
-    var items = _a.items, onAction = _a.onAction, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.cascadeSelect, cascadeSelect = _c === void 0 ? false : _c, _d = _a.cascadeDeselect, cascadeDeselect = _d === void 0 ? false : _d, defaultExpandedKeys = _a.defaultExpandedKeys, className = _a.className, other = tslib.__rest(_a, ["items", "onAction", "selectionMode", "cascadeSelect", "cascadeDeselect", "defaultExpandedKeys", "className"]);
-    var _e = tslib.__read(React.useState(new Set()), 2), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var items = _a.items, onAction = _a.onAction, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.cascadeSelect, cascadeSelect = _c === void 0 ? false : _c, _d = _a.cascadeDeselect, cascadeDeselect = _d === void 0 ? false : _d, defaultExpandedKeys = _a.defaultExpandedKeys, _e = _a.virtualized, virtualized = _e === void 0 ? false : _e, height = _a.height, className = _a.className, style = _a.style, other = tslib.__rest(_a, ["items", "onAction", "selectionMode", "cascadeSelect", "cascadeDeselect", "defaultExpandedKeys", "virtualized", "height", "className", "style"]);
+    var _f = tslib.__read(React.useState(new Set()), 2), selectedKeys = _f[0], setSelectedKeys = _f[1];
     var cascade = { cascadeSelect: cascadeSelect, cascadeDeselect: cascadeDeselect };
     // Cascade only applies to multiple selection.
     var isCascade = selectionMode === 'multiple' && (cascadeSelect || cascadeDeselect);
@@ -5655,12 +5718,28 @@ var TreeView = React.forwardRef(function (_a, ref) {
     };
     // Disabled nodes are non-selectable; react-aria disables them via disabledKeys.
     var disabledKeys = React.useMemo(function () { return collectDisabledKeys(items); }, [items]);
-    // Cascade requires controlling selection. Without it, preserve the original
-    // behavior: selection is only controlled when an `onAction` handler is set.
-    var selectionProps = selectionMode !== 'none' && (isCascade || onAction)
+    // Always control selection: react-aria's own state is lost if the tree
+    // remounts (which toggling `virtualized` does), taking the user's checkboxes
+    // with it.
+    var selectionProps = selectionMode !== 'none'
         ? { selectedKeys: selectedKeys, onSelectionChange: handleSelectionChange }
         : {};
-    return (React__default["default"].createElement(reactAriaComponents.Tree, tslib.__assign({ ref: ref, className: classNames__default["default"]('TreeView', className), selectionMode: selectionMode, defaultExpandedKeys: defaultExpandedKeys }, (disabledKeys.length > 0 ? { disabledKeys: disabledKeys } : {}), (onAction ? { onAction: handleAction } : {}), selectionProps, other), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+    // The `height` prop outranks `style.height`, but only when it is actually
+    // set — spreading an undefined `height` would wipe the caller's own.
+    var mergedStyle = virtualized && height !== undefined ? tslib.__assign(tslib.__assign({}, style), { height: height }) : style;
+    var tree = (React__default["default"].createElement(reactAriaComponents.Tree, tslib.__assign({ ref: ref, className: classNames__default["default"]('TreeView', className, {
+            'TreeView--virtualized': virtualized
+        }), selectionMode: selectionMode, defaultExpandedKeys: defaultExpandedKeys }, (disabledKeys.length > 0 ? { disabledKeys: disabledKeys } : {}), (onAction ? { onAction: handleAction } : {}), selectionProps, other, { style: mergedStyle }), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+    // Rows are absolutely positioned here, so the list layout owns their spacing
+    // rather than `.TreeView`'s flex `gap`/`padding`.
+    if (virtualized) {
+        return (React__default["default"].createElement(reactAriaComponents.Virtualizer, { layout: reactAriaComponents.ListLayout, layoutOptions: {
+                estimatedRowHeight: ESTIMATED_ROW_HEIGHT,
+                gap: ROW_GAP,
+                padding: LIST_PADDING
+            } }, tree));
+    }
+    return tree;
 });
 TreeView.displayName = 'TreeView';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.5.0",
+  "version": "7.6.0-canary.02bddc70",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -14,12 +14,12 @@
     "lib/"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.0.0",
+    "@floating-ui/dom": "^1.8.0",
     "@floating-ui/react-dom": "^2.1.2",
     "classnames": "^2.2.6",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
-    "react-aria-components": "^1.13.0",
+    "react-aria-components": "^1.20.0",
     "react-id-generator": "^3.0.1",
     "react-syntax-highlighter": "^16.1.1",
     "tslib": "^2.4.0"
@@ -37,9 +37,9 @@
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.7",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.11",
     "@types/jest-axe": "^3.5.4",
@@ -56,7 +56,7 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "nyc": "^15.0.1",
-    "postcss": "^8.5.15",
+    "postcss": "^8.5.28",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-loader": "^8.2.1",