@threadlabs/looma 0.1.23 → 0.1.24

package/dist/esm/ui-tree.entry.js

@@ -53,7 +53,7 @@ function createHoverIntent(delay, onIntent) {
     };
 }
 
-const uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+const uiTreeCss = () => `:host{--ui-tree-indent:16px;--ui-tree-gutter:0px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
 
 const UITree = class {
     constructor(hostRef) {
@@ -71,6 +71,8 @@ const UITree = class {
     rejectedPosition = null;
     rejection = null;
     hoverIntent = null;
+    structureObserver = null;
+    tabStop = null;
     componentDidLoad() {
         this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
         this.host.addEventListener('dragstart', this.onDragStart);
@@ -81,6 +83,11 @@ const UITree = class {
         this.host.addEventListener('drop', this.onDrop);
         this.host.addEventListener('dragend', this.onDragEnd);
         this.host.addEventListener('keydown', this.onKeyDown);
+        this.host.addEventListener('focusin', this.onFocusIn);
+        this.host.addEventListener('ui-tree-expansion-change', this.onExpansionChange);
+        this.syncStructuralLevels();
+        this.structureObserver = new MutationObserver(this.syncStructuralLevels);
+        this.structureObserver.observe(this.host, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         this.hoverIntent?.destroy();
@@ -92,10 +99,44 @@ const UITree = class {
         this.host.removeEventListener('drop', this.onDrop);
         this.host.removeEventListener('dragend', this.onDragEnd);
         this.host.removeEventListener('keydown', this.onKeyDown);
+        this.host.removeEventListener('focusin', this.onFocusIn);
+        this.host.removeEventListener('ui-tree-expansion-change', this.onExpansionChange);
+        this.structureObserver?.disconnect();
+        this.structureObserver = null;
+    }
+    syncStructuralLevels = () => {
+        for (const item of Array.from(this.host.querySelectorAll('ui-tree-item'))) {
+            item.dispatchEvent(new CustomEvent('ui-tree-structure-sync'));
+        }
+        this.syncTabStop();
+    };
+    syncTabStop(preferred) {
+        const items = this.visibleItems();
+        const next = preferred && items.includes(preferred)
+            ? preferred
+            : this.tabStop && items.includes(this.tabStop)
+                ? this.tabStop
+                : items[0] ?? null;
+        this.tabStop = next;
+        for (const item of items) {
+            item.dispatchEvent(new CustomEvent('ui-tree-roving-tab-stop', {
+                detail: { active: item === next },
+            }));
+        }
     }
     itemFromEvent(event) {
         return event.composedPath().find(node => (node instanceof HTMLElement && node.localName === 'ui-tree-item')) ?? null;
     }
+    eventTargetsInteractiveContent(event) {
+        for (const node of event.composedPath()) {
+            if (node instanceof HTMLElement && node.localName === 'ui-tree-item')
+                break;
+            if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) {
+                return true;
+            }
+        }
+        return false;
+    }
     itemId(item) {
         return item.itemId || item.getAttribute('item-id') || '';
     }
@@ -143,9 +184,23 @@ const UITree = class {
         const dropDepth = item.getAttribute('drop-depth');
         if (dropDepth !== null)
             return Number(dropDepth);
-        if (item.depth !== undefined)
-            return item.depth;
-        return Number(item.getAttribute('depth')) || 1;
+        return Number(item.getAttribute('aria-level')) || 1;
+    }
+    subtreeDepth(item) {
+        if (item.subtreeDepth !== undefined)
+            return Math.max(0, Math.floor(item.subtreeDepth));
+        const override = item.getAttribute('subtree-depth');
+        if (override !== null)
+            return Math.max(0, Math.floor(Number(override)));
+        return Array.from(item.querySelectorAll('ui-tree-item')).reduce((deepest, descendant) => {
+            let nesting = 0;
+            let ancestor = descendant.parentElement?.closest('ui-tree-item') ?? null;
+            while (ancestor && ancestor !== item) {
+                nesting += 1;
+                ancestor = ancestor.parentElement?.closest('ui-tree-item') ?? null;
+            }
+            return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+        }, 0);
     }
     dropRejection(source, target, position) {
         // A tree item can never move into (or beside) one of its own descendants.
@@ -165,9 +220,9 @@ const UITree = class {
             return { reason: 'incompatible' };
         }
         const maxDepth = Math.max(0, Math.floor(this.maxDepth));
-        if (maxDepth > 0 && source.subtreeDepth !== undefined) {
+        if (maxDepth > 0) {
             const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
-            const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+            const subtreeDepth = this.subtreeDepth(source);
             const resultingDepth = targetDepth + (position === 'inside' ? 1 : 0) + subtreeDepth;
             if (resultingDepth > maxDepth)
                 return { reason: 'max-depth', maxDepth, resultingDepth };
@@ -363,7 +418,35 @@ const UITree = class {
         return Array.from(this.host.querySelectorAll('ui-tree-item'))
             .filter(item => item.getClientRects().length > 0 && !item.hasAttribute('disabled'));
     }
+    parentItem(item) {
+        const parent = item.parentElement?.closest('ui-tree-item') ?? null;
+        return parent && this.host.contains(parent) ? parent : null;
+    }
+    firstVisibleChild(item, items) {
+        return items.find(candidate => this.parentItem(candidate) === item) ?? null;
+    }
+    focusItem(item) {
+        this.syncTabStop(item);
+        item.focus();
+    }
+    requestExpansion(item, expanded) {
+        item.dispatchEvent(new CustomEvent('ui-tree-request-expanded', {
+            detail: { expanded, trigger: 'keyboard' },
+        }));
+    }
+    onFocusIn = (event) => {
+        if (this.eventTargetsInteractiveContent(event))
+            return;
+        const item = this.itemFromEvent(event);
+        if (item)
+            this.syncTabStop(item);
+    };
+    onExpansionChange = () => {
+        requestAnimationFrame(() => this.syncTabStop());
+    };
     onKeyDown = (event) => {
+        if (this.eventTargetsInteractiveContent(event))
+            return;
         const current = this.itemFromEvent(event);
         if (!current)
             return;
@@ -371,14 +454,43 @@ const UITree = class {
         const index = items.indexOf(current);
         if (index < 0)
             return;
-        const next = event.key === 'ArrowDown' ? items[index + 1] : event.key === 'ArrowUp' ? items[index - 1] : null;
-        if (!next)
+        const next = event.key === 'ArrowDown' ? items[index + 1]
+            : event.key === 'ArrowUp' ? items[index - 1]
+                : event.key === 'Home' ? items[0]
+                    : event.key === 'End' ? items.at(-1)
+                        : null;
+        if (next) {
+            event.preventDefault();
+            this.focusItem(next);
             return;
-        event.preventDefault();
-        next.focus();
+        }
+        if (event.key === 'ArrowLeft') {
+            if (current.getAttribute('aria-expanded') === 'true') {
+                event.preventDefault();
+                this.requestExpansion(current, false);
+            }
+            else if (this.parentItem(current)) {
+                event.preventDefault();
+                this.focusItem(this.parentItem(current));
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            if (current.getAttribute('aria-expanded') === 'false') {
+                event.preventDefault();
+                this.requestExpansion(current, true);
+            }
+            else if (current.getAttribute('aria-expanded') === 'true') {
+                const child = this.firstVisibleChild(current, items);
+                if (child) {
+                    event.preventDefault();
+                    this.focusItem(child);
+                }
+            }
+        }
     };
     render() {
-        return (h(Host, { key: '474c2154d2abe3c76eee9c36bf552390089df6e8', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '93aedd02f984dd33b5efc811fef417d1199917bd' })));
+        return (h(Host, { key: '549c09abc67dc60b16bf2d6b7d6346f214e9d6ae', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: 'fea59bde97611bf384e32ce4fb2b3eec9aca784f' })));
     }
 };
 UITree.style = uiTreeCss();