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

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

@@ -11,6 +11,8 @@ 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

package/lib/index.js

@@ -5606,45 +5606,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
@@ -5692,6 +5653,7 @@ 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, _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.
@@ -5706,16 +5668,48 @@ 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]);
     // Always control selection: react-aria's own state is lost if the tree
@@ -5727,9 +5721,11 @@ var TreeView = React.forwardRef(function (_a, ref) {
     // 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, {
+    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 ? { onAction: handleAction } : {}), selectionProps, other, { style: mergedStyle }), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+        }), 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.6.0-canary.02bddc70",
+  "version": "7.6.0-canary.05d324ca",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -19,7 +19,7 @@
     "classnames": "^2.2.6",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
-    "react-aria-components": "^1.20.0",
+    "react-aria-components": "^1.21.1",
     "react-id-generator": "^3.0.1",
     "react-syntax-highlighter": "^16.1.1",
     "tslib": "^2.4.0"