@deque/cauldron-react 7.6.0-canary.f34365cc → 7.6.0-canary.fef8f6a8

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

@@ -1,34 +1,16 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     label: React.ReactNode;
     description?: React.ReactNode;
     error?: React.ReactNode;
     defaultValue?: string;
     onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * @deprecated Use the forwarded `ref` instead. Will be removed in the next major version.
+     */
     fieldRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
     requiredText?: string;
     multiline?: boolean;
 }
-interface TextFieldState {
-    value: string | number | string[] | undefined;
-}
-export default class TextField extends React.Component<TextFieldProps, TextFieldState> {
-    static displayName: string;
-    static defaultProps: {
-        error: null;
-        required: boolean;
-        defaultValue: null;
-        onChange: () => void;
-        fieldRef: () => void;
-        requiredText: string;
-        multiline: boolean;
-    };
-    private inputId;
-    private errorId;
-    private descriptionId;
-    private input;
-    constructor(props: TextFieldProps);
-    render(): React.JSX.Element;
-    onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
-}
-export {};
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export default TextField;

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

@@ -14,15 +14,6 @@ interface CascadeOptions {
     cascadeSelect: boolean;
     cascadeDeselect: boolean;
 }
-/**
- * Toggle a single node, applying cascade per the options (multiple mode only):
- * - selecting + `cascadeSelect`: also selects all (non-disabled) descendants.
- * - deselecting + `cascadeDeselect`: also deselects all descendants.
- *
- * In `single` mode only the clicked node is selected (clicking it again clears
- * it); cascade does not apply.
- */
-export declare function toggleSelection(nodes: TreeViewNode[], previous: Set<Key>, key: Key, selectionMode: 'single' | 'multiple', { cascadeSelect, cascadeDeselect }: CascadeOptions): Set<Key>;
 /**
  * Apply react-aria's proposed selection while enforcing cascade. Each key
  * react-aria added cascades to its descendants when `cascadeSelect` is set; each

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

@@ -2,8 +2,17 @@ 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[];
+    /** Runs when an item is activated by a click, Space or Enter. Each of these
+     *  also toggles the item's selection. Without selection, Space does not act. */
     onAction?: (key: string) => void;
     selectionMode?: 'none' | 'single' | 'multiple';
     /** When true (multiple selection only), selecting a parent also selects all
@@ -13,7 +22,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
@@ -2747,89 +2749,53 @@ function TooltipTabstop(_a) {
 }
 TooltipTabstop.displayName = 'TooltipTabstop';
 
-var TextField = /** @class */ (function (_super) {
-    tslib.__extends(TextField, _super);
-    function TextField(props) {
-        var _this = _super.call(this, props) || this;
-        _this.inputId = _this.props.id || randomId();
-        _this.errorId = randomId();
-        _this.descriptionId = randomId();
-        _this.state = {
-            value: typeof _this.props.value !== 'undefined'
-                ? _this.props.value
-                : _this.props.defaultValue || ''
-        };
-        _this.onChange = _this.onChange.bind(_this);
-        return _this;
-    }
-    TextField.prototype.render = function () {
-        var _this = this;
-        var isRequired = !!this.props.required;
-        // disabling `no-unused-vars` to prevent specific
-        // props from being passed through to the input
-        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, description = _a.description; 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onChange; 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.defaultValue; var _b = _a.error, error = _b === void 0 ? null : _b, requiredText = _a.requiredText, multiline = _a.multiline, ariaDescribedby = _a["aria-describedby"]; _a.children; var className = _a.className, other = tslib.__rest(_a, ["label", "fieldRef", "value", "description", "onChange", "defaultValue", "error", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
-        // typescript can't infer the type so it's complaining about
-        // textarea and input props being incompatible
-        // we should probably fix this
-        var Field = multiline ? 'textarea' : 'input';
-        var describedby = description
-            ? addIdRef(ariaDescribedby, this.descriptionId)
-            : ariaDescribedby;
-        var inputProps = {
-            'aria-describedby': error
-                ? addIdRef(describedby, this.errorId)
-                : describedby
-        };
-        return (React__default["default"].createElement("div", { className: "Field" },
-            React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
-                    'Field__label--is-required': isRequired,
-                    'Field__label--has-error': error
-                }), htmlFor: this.inputId },
-                React__default["default"].createElement("span", null, label),
-                isRequired && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
-            description && (React__default["default"].createElement("div", { className: "Field__description", id: this.descriptionId }, description)),
-            error && (React__default["default"].createElement("div", { className: "Field__error", id: this.errorId },
-                React__default["default"].createElement(Icon, { type: "caution" }),
-                error)),
-            React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
-                    'Field__text-input': !multiline,
-                    Field__textarea: multiline,
-                    'Field--has-error': error
-                }), id: this.inputId, value: typeof value !== 'undefined' ? value : this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
-                    _this.input = input;
-                    setRef(fieldRef, input);
-                } }, other, inputProps))));
-    };
-    TextField.prototype.onChange = function (e) {
-        var _a, _b;
-        if (this.props.onChange) {
-            this.props.onChange(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || /* istanbul ignore next: default value */ '', e);
-        }
-        if (typeof this.props.value !== 'undefined') {
+var TextField = React.forwardRef(function (_a, ref) {
+    var id = _a.id, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, description = _a.description, onChange = _a.onChange, defaultValue = _a.defaultValue, _b = _a.error, error = _b === void 0 ? null : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.requiredText, requiredText = _d === void 0 ? 'Required' : _d, _e = _a.multiline, multiline = _e === void 0 ? false : _e, ariaDescribedby = _a["aria-describedby"]; 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.children; var className = _a.className, other = tslib.__rest(_a, ["id", "label", "fieldRef", "value", "description", "onChange", "defaultValue", "error", "required", "requiredText", "multiline", 'aria-describedby', "children", "className"]);
+    var _f = tslib.__read(nextId.useId(3, 'textfield'), 3), generatedInputId = _f[0], errorId = _f[1], descriptionId = _f[2];
+    var inputId = id || generatedInputId;
+    var isControlled = typeof value !== 'undefined';
+    var _g = tslib.__read(React.useState(isControlled ? value : defaultValue || ''), 2), uncontrolledValue = _g[0], setUncontrolledValue = _g[1];
+    var setFieldRef = React.useCallback(function (field) {
+        setRef(ref, field);
+        setRef(fieldRef, field);
+    }, [ref, fieldRef]);
+    var handleChange = function (e) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
+        if (isControlled) {
             return;
         }
-        this.setState({
-            value: (_b = this.input) === null || _b === void 0 ? void 0 : _b.value
-        });
+        setUncontrolledValue(e.target.value);
     };
-    TextField.displayName = 'TextField';
-    TextField.defaultProps = {
-        error: null,
-        required: false,
-        defaultValue: null,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        fieldRef: function () { },
-        requiredText: 'Required',
-        multiline: false
+    // typescript can't infer the type so it's complaining about
+    // textarea and input props being incompatible
+    // we should probably fix this
+    var Field = multiline ? 'textarea' : 'input';
+    var describedby = description
+        ? addIdRef(ariaDescribedby, descriptionId)
+        : ariaDescribedby;
+    var inputProps = {
+        'aria-describedby': error ? addIdRef(describedby, errorId) : describedby
     };
-    return TextField;
-}(React__default["default"].Component));
+    return (React__default["default"].createElement("div", { className: "Field" },
+        React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
+                'Field__label--is-required': required,
+                'Field__label--has-error': error
+            }), htmlFor: inputId },
+            React__default["default"].createElement("span", null, label),
+            required && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
+        description && (React__default["default"].createElement("div", { className: "Field__description", id: descriptionId }, description)),
+        error && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
+        React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
+                'Field__text-input': !multiline,
+                Field__textarea: multiline,
+                'Field--has-error': error
+            }), id: inputId, value: isControlled ? value : uncontrolledValue, onChange: handleChange, "aria-invalid": !!error, required: required, ref: setFieldRef }, other, inputProps))));
+});
+TextField.displayName = 'TextField';
 
 var TextFieldWrapper = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, otherProps = tslib.__rest(_a, ["className", "children"]);
@@ -3766,7 +3732,7 @@ var Notice = React.forwardRef(function (_a, ref) {
             _b["Notice--".concat(type)] = type,
             _b["Notice--condensed"] = variant === 'condensed',
             _b)), ref: ref }, otherProps),
-        React__default["default"].createElement(Icon, { type: icon || iconTypeMap[type] }),
+        React__default["default"].createElement(Icon, { className: "Notice__icon", type: icon || iconTypeMap[type] }),
         React__default["default"].createElement("div", { className: "Notice__title" }, title),
         children && React__default["default"].createElement("div", { className: "Notice__content" }, children)));
 });
@@ -5604,45 +5570,6 @@ function collectDescendantKeys(node) {
 function collectDisabledKeys(nodes) {
     return nodes.flatMap(function (node) { return tslib.__spreadArray(tslib.__spreadArray([], tslib.__read((node.disabled ? [node.id] : [])), false), tslib.__read((node.children ? collectDisabledKeys(node.children) : [])), false); });
 }
-/**
- * Toggle a single node, applying cascade per the options (multiple mode only):
- * - selecting + `cascadeSelect`: also selects all (non-disabled) descendants.
- * - deselecting + `cascadeDeselect`: also deselects all descendants.
- *
- * In `single` mode only the clicked node is selected (clicking it again clears
- * it); cascade does not apply.
- */
-function toggleSelection(nodes, previous, key, selectionMode, _a) {
-    var cascadeSelect = _a.cascadeSelect, cascadeDeselect = _a.cascadeDeselect;
-    if (selectionMode === 'single') {
-        var result_1 = new Set();
-        if (!previous.has(key)) {
-            result_1.add(key);
-        }
-        return result_1;
-    }
-    var result = new Set(previous);
-    var node = findNode(nodes, key);
-    var descendants = node ? collectDescendantKeys(node) : [];
-    var disabled = new Set(collectDisabledKeys(nodes));
-    if (!previous.has(key)) {
-        result.add(key);
-        if (cascadeSelect) {
-            descendants.forEach(function (k) {
-                if (!disabled.has(k)) {
-                    result.add(k);
-                }
-            });
-        }
-    }
-    else {
-        result.delete(key);
-        if (cascadeDeselect) {
-            descendants.forEach(function (k) { return result.delete(k); });
-        }
-    }
-    return result;
-}
 /**
  * Apply react-aria's proposed selection while enforcing cascade. Each key
  * react-aria added cascades to its descendants when `cascadeSelect` is set; each
@@ -5681,9 +5608,17 @@ 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 treeRef = useSharedRef(ref);
+    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);
@@ -5697,24 +5632,74 @@ var TreeView = React.forwardRef(function (_a, ref) {
                 : selection;
         });
     };
-    // When `onAction` is set, react-aria treats a row press as an action rather
-    // than a selection, so we toggle selection here ourselves.
-    var handleAction = function (key) {
-        if (selectionMode !== 'none') {
-            setSelectedKeys(function (prev) {
-                return toggleSelection(items, toKeySet(prev, items), key, selectionMode, cascade);
-            });
-        }
-        onAction === null || onAction === void 0 ? void 0 : onAction(key);
-    };
+    // react-aria only reports a press as an action while nothing is selected, so
+    // activation is driven here and react-aria is left to own selection. Click,
+    // Space and Enter all do the same thing: toggle the checkbox and run the action.
+    // Without selection react-aria handles the action itself (see the Tree props).
+    React.useEffect(function () {
+        var node = treeRef.current;
+        if (!node || !onAction || selectionMode === 'none')
+            return;
+        var rowKey = function (target) {
+            var _a;
+            var row = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[role="row"][data-key]');
+            if (!row || row.getAttribute('aria-disabled') === 'true')
+                return null;
+            return row.getAttribute('data-key');
+        };
+        var handleKeyDown = function (event) {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            if (event.repeat || event.defaultPrevented)
+                return;
+            var key = rowKey(event.target);
+            if (key)
+                onAction(key);
+        };
+        var handleClick = function (event) {
+            var _a;
+            var target = event.target;
+            // The chevron expands rather than activates, and a click on the
+            // checkbox box or label is re-dispatched on the checkbox itself.
+            if ((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.TreeView__chevron, label[for], .Checkbox__overlay'))
+                return;
+            var key = rowKey(target);
+            if (key)
+                onAction(key);
+        };
+        node.addEventListener('keydown', handleKeyDown);
+        node.addEventListener('click', handleClick);
+        return function () {
+            node.removeEventListener('keydown', handleKeyDown);
+            node.removeEventListener('click', handleClick);
+        };
+    }, [onAction, selectionMode, virtualized]);
     // 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: treeRef, className: classNames__default["default"]('TreeView', className, {
+            'TreeView--virtualized': virtualized
+        }), selectionMode: selectionMode, defaultExpandedKeys: defaultExpandedKeys }, (disabledKeys.length > 0 ? { disabledKeys: disabledKeys } : {}), (onAction && selectionMode === 'none'
+        ? { onAction: function (key) { return onAction(String(key)); } }
+        : {}), 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.6.0-canary.f34365cc",
+  "version": "7.6.0-canary.fef8f6a8",
   "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.19.0",
+    "react-aria-components": "^1.21.1",
     "react-id-generator": "^3.0.1",
     "react-syntax-highlighter": "^16.1.1",
     "tslib": "^2.4.0"
@@ -37,7 +37,7 @@
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.7",
     "@types/classnames": "^2.2.10",
@@ -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",