@fusion.dev/helix-headless 0.154.0 → 0.155.0

package/dist/tree/item/tree-item.d.ts

@@ -146,6 +146,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * tree: the item being moved, or the one the drop indicator is beside.
      */
     move?: TreeItemMove | undefined;
+    /**
+     * @internal The item's place among its siblings, counting from one, written
+     * by the tree for `aria-posinset`, for the reason `level` gives.
+     */
+    position?: number | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -168,6 +173,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * row is not part of the tree React hydrates.
      */
     selected: boolean;
+    /**
+     * @internal How many siblings the item has, itself included, written by the
+     * tree for `aria-setsize`, for the reason `level` gives.
+     */
+    setSize?: number | undefined;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */

package/dist/tree/item/tree-item.js

@@ -174,6 +174,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         const linked = this.href !== '';
         const level = this.level ?? 1;
         const depth = this.level ?? nothing;
+        const position = this.position ?? nothing;
+        const size = this.setSize ?? nothing;
         const expanded = this.isBranch ? (this.open ? 'true' : 'false') : nothing;
         const chosen = this.checkable ? undefined : this.selected ? 'true' : 'false';
         const checked = this.checkable
@@ -193,6 +195,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         aria-disabled=${linked ? nothing : off}
         aria-busy=${linked ? nothing : busy}
         aria-level=${linked ? nothing : depth}
+        aria-posinset=${linked ? nothing : position}
+        aria-setsize=${linked ? nothing : size}
         tabindex=${linked ? nothing : tabIndex}
       >
         ${linked
@@ -208,6 +212,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
                 aria-disabled=${off}
                 aria-busy=${busy}
                 aria-level=${depth}
+                aria-posinset=${position}
+                aria-setsize=${size}
                 tabindex=${tabIndex}
                 style="--tree-level: ${level}"
                 @click=${this.handleRowClick}
@@ -255,12 +261,18 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTreeItem.prototype, "move", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], HelixHeadlessTreeItem.prototype, "position", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTreeItem.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], HelixHeadlessTreeItem.prototype, "setSize", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "target", void 0);

package/dist/tree/root/tree-root.d.ts

@@ -35,6 +35,13 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * or open, and the tree's one tab stop stays on the item last reached. In a
  * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
  * item or clears them all, and Shift with Up or Down Arrow moves and checks.
+ * Shift+Space checks every item from the one last checked to the focused one,
+ * and Control+Shift+Home or End checks every item from the focused one to the
+ * first or the last, then moves there, as the tree pattern's range keys do.
+ *
+ * A tree with no name of its own is announced as "Tree", which says nothing
+ * about what it holds, so a development build warns once with the kind
+ * `missing-name` where neither `label` nor an `aria-label` names it.
  *
  * Removing the item that has focus moves focus to the item after it among its
  * siblings, or the one before, or its parent, so focus stays in the tree.
@@ -50,7 +57,15 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * `helix-before-reorder`, which you can refuse, and then `helix-reorder`, whose
  * `keys` hold the siblings in the new order. **You move the items**: the tree
  * moves no element of yours, and focus follows the moved item once you have.
- * Moving an item into another branch is not part of this.
+ *
+ * **Alt with the arrow along the line moves an item into another branch.**
+ * Alt with the arrow that opens a branch (Right on a left-to-right page) puts
+ * the focused item last inside the item before it, and opens that item; Alt
+ * with the other arrow puts it after its parent, a level out. The same
+ * `helix-before-reorder` and `helix-reorder` are sent, with `parent` naming
+ * the branch it moves into by its key, `''` for the top level, and `keys`
+ * holding that branch's items in their new order. The tree says the move with
+ * `moved-into-label`.
  *
  * @since 0.1.0
  * @status stable
@@ -92,6 +107,14 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * wins over this.
      */
     label: string;
+    /**
+     * What screen readers hear when an item moves into another branch, in a
+     * `reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+     * the branch it moved into, or the tree's `label` for the top level,
+     * `{position}` its place there, counting from 1, and `{count}` the number of
+     * items there.
+     */
+    movedIntoLabel: string;
     /**
      * What screen readers hear each time an item moves, in a `reorderable`
      * tree. `{name}` is the item's words, `{position}` its place among its
@@ -188,6 +211,8 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     private watcher;
     /** The item that last had focus, so its removal can hand focus on. */
     private focused;
+    /** The item last checked or unchecked, where a range Shift+Space checks starts. */
+    private anchor;
     private readonly handleFocusIn;
     /**
      * Puts focus back in the tree where the item that had it was removed and
@@ -253,6 +278,20 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * Returns whether the press was one of those.
      */
     private handleMultiple;
+    /** Checks every item of a range, and keeps the ones already checked. */
+    private checkRange;
+    /**
+     * Moves the focused item into another branch, in a `reorderable` tree: last
+     * inside the item before it, `toward` the line's end, or after its parent,
+     * toward its start. Asks the page, which moves the item, and says where it
+     * went or that the move was refused. Returns whether the key moved anything.
+     */
+    private nest;
+    /**
+     * Gives focus back to a moved item once the page has moved it, where moving
+     * it sent focus to the body, as a move among siblings does.
+     */
+    private follow;
     private move;
     private focusOn;
     private readonly handleKeydown;

package/dist/tree/root/tree-root.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, closestInstance, commaList, customElement, deepActiveElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, closestInstance, commaList, customElement, deepActiveElement, formatWords, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, requestReorder, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { fromGrip } from '../grip.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
-import { checkedState, pressRow } from '../selection.js';
+import { checkedState, checkRows, pressRow } from '../selection.js';
 const KEYS = new Set([
     'ArrowDown',
     'ArrowUp',
@@ -26,6 +26,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
         this.label = 'Tree';
+        this.movedIntoLabel = '{name} moved into {parent}, position {position} of {count}';
         this.movedLabel = '{name} moved to position {position} of {count}';
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -66,6 +67,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 this.requestActive(this.multiple
                     ? pressRow(this.rowOf(origin), this.values, this.order).join(',')
                     : event.detail.value);
+                this.anchor = origin;
             }
             this.syncItems();
         };
@@ -87,8 +89,15 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             this.typeahead.reset();
             const along = inlineStep(this, event.key);
+            if (event.altKey && along !== 0 && this.reorderable) {
+                if (!current.disabled && this.nest(current, along)) {
+                    event.preventDefault();
+                }
+                return;
+            }
             if (this.multiple && event.key === ' ') {
                 current.select();
+                this.anchor = current;
                 event.preventDefault();
                 return;
             }
@@ -240,8 +249,18 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const heads = this.nesting === 'heading' || this.selectionMode === 'leaf';
         const multiple = this.multiple;
         const checked = new Set(this.values);
+        const places = new Map();
+        for (const item of this.items) {
+            if (!places.has(item)) {
+                const siblings = this.siblingsOf(item);
+                siblings.forEach((one, at) => {
+                    places.set(one, { position: at + 1, size: siblings.length });
+                });
+            }
+        }
         for (const item of this.items) {
             const key = this.keyOf(item);
+            const place = places.get(item);
             const selected = !multiple && item.value !== '' && item.value === this.active;
             const state = multiple ? checkedState(this.rowOf(item), checked) : false;
             const focusable = item === stop;
@@ -259,6 +278,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 item.checked = state;
                 item.focusable = focusable;
                 item.level = level;
+                item.position = place?.position;
+                item.setSize = place?.size;
                 item.heads = heads;
                 item.grip = this.reorderable;
                 item.move = this.reorder.moveOf(key);
@@ -308,9 +329,24 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.syncItems();
             return true;
         }
+        const visible = this.visibleItems;
+        const at = visible.indexOf(current);
+        if (event.shiftKey && event.key === ' ') {
+            const from = this.anchor ? visible.indexOf(this.anchor) : -1;
+            const range = from < 0 ? [current] : visible.slice(Math.min(from, at), Math.max(from, at) + 1);
+            this.checkRange(range);
+            return true;
+        }
+        if (event.shiftKey &&
+            (event.ctrlKey || event.metaKey) &&
+            (event.key === 'Home' || event.key === 'End')) {
+            const range = event.key === 'Home' ? visible.slice(0, at + 1) : visible.slice(at);
+            this.checkRange(range);
+            this.focusOn(event.key === 'Home' ? range[0] : range.at(-1));
+            return true;
+        }
         if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            const visible = this.visibleItems;
-            const next = visible[visible.indexOf(current) + (event.key === 'ArrowDown' ? 1 : -1)];
+            const next = visible[at + (event.key === 'ArrowDown' ? 1 : -1)];
             if (next) {
                 this.focusOn(next);
                 next.select();
@@ -319,6 +355,81 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }
         return false;
     }
+    checkRange(range) {
+        this.requestActive(checkRows(range.map((item) => this.rowOf(item)), this.values, this.order).join(','));
+        this.syncItems();
+    }
+    nest(current, toward) {
+        const siblings = this.siblingsOf(current);
+        const from = siblings.indexOf(current);
+        const key = this.keyOf(current);
+        let into;
+        let keys;
+        if (toward > 0) {
+            const before = siblings[from - 1];
+            if (!before || before.disabled) {
+                return false;
+            }
+            into = before;
+            const inside = [...before.children].filter((node) => node instanceof HelixHeadlessTreeItem);
+            keys = [...inside.map((one) => this.keyOf(one)), key];
+        }
+        else {
+            const parent = closestInstance(current.parentElement, HelixHeadlessTreeItem);
+            if (!(parent instanceof HelixHeadlessTreeItem) || !this.items.includes(parent)) {
+                return false;
+            }
+            const above = closestInstance(parent.parentElement, HelixHeadlessTreeItem);
+            into =
+                above instanceof HelixHeadlessTreeItem && this.items.includes(above) ? above : undefined;
+            keys = this.siblingsOf(parent).map((one) => this.keyOf(one));
+            keys.splice(keys.indexOf(this.keyOf(parent)) + 1, 0, key);
+        }
+        const to = keys.indexOf(key);
+        const stood = requestReorder(this, {
+            from,
+            key,
+            keys,
+            kind: 'item',
+            parent: into ? this.keyOf(into) : '',
+            to,
+            value: keys.join(','),
+        });
+        const name = slottedWords(current, ['']) || key;
+        this.announced = stood
+            ? formatWords(this, 'movedIntoLabel', {
+                count: keys.length,
+                name,
+                parent: into ? slottedWords(into, ['']) || this.keyOf(into) : this.label,
+                position: to + 1,
+            })
+            : this.canceledLabel;
+        this.requestUpdate();
+        if (stood) {
+            if (into && !into.open) {
+                into.requestOpen(true);
+            }
+            this.follow(key);
+        }
+        return true;
+    }
+    follow(key) {
+        const lost = () => {
+            const active = deepActiveElement();
+            return !active || active === document.body;
+        };
+        if (lost()) {
+            this.focusOn(this.itemFor(key));
+            return;
+        }
+        const watch = new MutationObserver(() => {
+            watch.disconnect();
+            if (lost()) {
+                this.focusOn(this.itemFor(key));
+            }
+        });
+        watch.observe(this, { childList: true, subtree: true });
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);
@@ -359,6 +470,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.syncItems();
+        auditName(this, () => null, 'Give it a `label` that says what it holds, such as "Files".', () => this.hasAttribute('label') || this.label !== 'Tree');
     }
     updated(changed) {
         super.updated(changed);
@@ -400,6 +512,10 @@ __decorate([
     words,
     property()
 ], HelixHeadlessTree.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-into-label' })
+], HelixHeadlessTree.prototype, "movedIntoLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })

package/dist/tree/selection.d.ts

@@ -14,6 +14,12 @@ export interface CheckableRow {
  * a branch by its leaves, `mixed` where some of them are.
  */
 export declare const checkedState: (row: CheckableRow, chosen: ReadonlySet<string>) => boolean | 'mixed';
+/**
+ * The checked values after checking every row in `rows`, in `order`: a range
+ * the reader extends with Shift and Space, or with Control, Shift and Home or
+ * End. Rows already checked stay checked, and disabled rows are passed over.
+ */
+export declare const checkRows: (rows: readonly CheckableRow[], chosen: readonly string[], order: readonly string[]) => string[];
 /**
  * The checked values after a press on `row`, in `order`.
  *

package/dist/tree/selection.js

@@ -8,6 +8,17 @@ export const checkedState = (row, chosen) => {
     }
     return count === values.length ? true : 'mixed';
 };
+export const checkRows = (rows, chosen, order) => {
+    const added = new Set(chosen);
+    for (const row of rows) {
+        if (!row.disabled) {
+            for (const value of valuesOf(row)) {
+                added.add(value);
+            }
+        }
+    }
+    return order.filter((value) => added.has(value));
+};
 export const pressRow = (row, chosen, order) => {
     return row.disabled ? [...chosen] : toggleEvery(chosen, valuesOf(row), order);
 };