@fusion.dev/helix-headless 0.209.0 → 0.210.0

package/dist/toolbar/root/toolbar-root.js

@@ -1,44 +1,8 @@
 var HelixHeadlessToolbar_1;
 import { __decorate } from "tslib";
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, ToolbarController, toolbarAround, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
-const ownsTabStop = (node) => 'focusable' in node;
-const NATIVE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable=""], [contenteditable="true"]';
-const TABBABLE = NATIVE.replace('[tabindex]', '[tabindex]:not([tabindex="-1"])');
-const innerStops = new WeakMap();
-const takesFocus = (node) => {
-    if (!(node instanceof HTMLElement) ||
-        node.hasAttribute('disabled') ||
-        node.getAttribute('aria-hidden') === 'true') {
-        return false;
-    }
-    return (node.matches(NATIVE) ||
-        ownsTabStop(node) ||
-        node.shadowRoot?.delegatesFocus === true ||
-        node.shadowRoot?.querySelector(TABBABLE) != null ||
-        innerStops.get(node)?.isConnected === true);
-};
-const stopOf = (node) => {
-    if (node.hasAttribute('tabindex')) {
-        return node;
-    }
-    const held = innerStops.get(node);
-    if (held?.isConnected && held.getRootNode() === node.shadowRoot) {
-        return held;
-    }
-    const inner = node.localName.includes('-')
-        ? node.shadowRoot?.querySelector(TABBABLE)
-        : null;
-    if (!inner) {
-        return node;
-    }
-    innerStops.set(node, inner);
-    return inner;
-};
-const flattens = (node) => ownsTabStop(node) &&
-    node.selectionMode === 'multiple';
 let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
@@ -47,180 +11,16 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             label: true,
             target: () => this.partNamed('toolbar'),
         });
-        this.wroteForeign = false;
         this.stopAtEnds = false;
-        this.handleFocusIn = (event) => {
-            if (this.nested) {
-                return;
-            }
-            const control = this.origin(event);
-            if (control) {
-                this.setTabStop(control);
-            }
-        };
-        this.restoreTabStop = () => {
-            if (this.nested) {
-                return;
-            }
-            const controls = this.controls;
-            const held = controls.some((control) => {
-                if (control.group) {
-                    return control.group.focusable;
-                }
-                const composite = control.stops.length !== 1;
-                const element = composite ? control.child : control.stops[0];
-                if (ownsTabStop(element)) {
-                    return element.focusable;
-                }
-                return composite || stopOf(element).tabIndex === 0;
-            });
-            if (controls.length > 0 && !held) {
-                this.setTabStop(controls[0], false);
-            }
-        };
-        this.handleCompositeKeydown = (event) => {
-            if (this.nested) {
-                return;
-            }
-            const control = this.origin(event);
-            if (!control || (control.stops.length === 1 && !control.group)) {
-                return;
-            }
-            this.handleKeydown(event);
-            if (event.defaultPrevented) {
-                event.stopPropagation();
-            }
-        };
-        this.handleKeydown = (event) => {
-            if (this.nested || !KEYS.has(event.key) || keyClaimed(event)) {
-                return;
-            }
-            const along = inlineStep(this, event.key);
-            const forward = this.axis === 'horizontal' ? along === 1 : event.key === 'ArrowDown';
-            const back = this.axis === 'horizontal' ? along === -1 : event.key === 'ArrowUp';
-            const controls = this.controls;
-            const origin = this.origin(event);
-            const current = origin ? controls.findIndex((control) => control.child === origin.child) : -1;
-            if (current === -1) {
-                return;
-            }
-            let next = current;
-            const last = controls.length - 1;
-            if (forward) {
-                next = this.stopAtEnds ? Math.min(current + 1, last) : (current + 1) % controls.length;
-            }
-            else if (back) {
-                next = this.stopAtEnds
-                    ? Math.max(current - 1, 0)
-                    : (current - 1 + controls.length) % controls.length;
-            }
-            else if (event.key === 'Home') {
-                next = 0;
-            }
-            else if (event.key === 'End') {
-                next = controls.length - 1;
-            }
-            else {
-                return;
-            }
-            event.preventDefault();
-            const target = controls[next];
-            this.setTabStop(target);
-            const element = target ? this.entry(target) : undefined;
-            if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
-                element.focusItem();
-            }
-            else if (element) {
-                ;
-                (ownsTabStop(element) ? element : stopOf(element)).focus();
-            }
-        };
+        this.tabStop = new ToolbarController(this, {
+            arrows: () => this.axis,
+            members: () => [...this.children],
+            nested: () => this.nested,
+            stopAtEnds: () => this.stopAtEnds,
+        });
     }
     static { HelixHeadlessToolbar_1 = this; }
     static { this.words = 'helix-toolbar'; }
-    get controls() {
-        const controls = [];
-        for (const child of this.members) {
-            if (!(child instanceof HTMLElement) ||
-                child.hasAttribute('disabled') ||
-                child.getAttribute('aria-hidden') === 'true') {
-                continue;
-            }
-            if (takesFocus(child)) {
-                const stops = this.inside(child);
-                if (stops.length > 1 && flattens(child)) {
-                    for (const stop of stops) {
-                        controls.push({ child: stop, group: child, stops: [stop] });
-                    }
-                    continue;
-                }
-                controls.push({ child, stops });
-                continue;
-            }
-            for (const stop of this.within(child)) {
-                controls.push({ child: stop, stops: [stop] });
-            }
-        }
-        return controls;
-    }
-    get members() {
-        return [...this.children].flatMap((child) => child instanceof HTMLSlotElement ? child.assignedElements({ flatten: true }) : [child]);
-    }
-    within(child) {
-        return [...child.querySelectorAll('*')].filter(takesFocus);
-    }
-    inside(child) {
-        if (!ownsTabStop(child)) {
-            return [child];
-        }
-        const members = this.within(child);
-        return members.length > 1 ? members : [child];
-    }
-    entry(control) {
-        const { stops } = control;
-        if (stops.length === 1) {
-            return stops[0];
-        }
-        return (stops.find((stop) => (ownsTabStop(stop) && stop.focusable) ||
-            stop.selected === true) ?? stops[0]);
-    }
-    origin(event) {
-        const path = event.composedPath();
-        return this.controls.find((control) => control.stops.some((stop) => path.includes(stop)));
-    }
-    setTabStop(active, foreign = true) {
-        if (foreign) {
-            this.wroteForeign = true;
-        }
-        for (const control of this.controls) {
-            if (control.group) {
-                control.group.focusable = control.group === active?.group;
-                continue;
-            }
-            if (control.stops.length !== 1) {
-                if (ownsTabStop(control.child)) {
-                    control.child.focusable = control.child === active?.child;
-                }
-                continue;
-            }
-            const element = control.stops[0];
-            const stop = control.child === active?.child;
-            if (ownsTabStop(element)) {
-                element.focusable = stop;
-            }
-            else if (foreign || this.wroteForeign) {
-                stopOf(element).tabIndex = stop ? 0 : -1;
-            }
-        }
-    }
-    async claimTabStop() {
-        if (this.nested) {
-            return;
-        }
-        const pending = [...new Set(this.members.map((child) => child.localName))].filter((name) => name.includes('-'));
-        await Promise.all(pending.map((name) => customElements.whenDefined(name)));
-        this.setTabStop(this.controls[0], false);
-    }
     get nested() {
         const parent = this.parentElement;
         if (!parent) {
@@ -234,27 +34,10 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     connectedCallback() {
         super.connectedCallback();
         this.requestUpdate();
-        this.addEventListener('keydown', this.handleCompositeKeydown, true);
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('focusin', this.handleFocusIn);
-        this.watcher = new MutationObserver(this.restoreTabStop);
-        this.watcher.observe(this, {
-            attributeFilter: ['disabled', 'aria-hidden'],
-            attributes: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.handleCompositeKeydown, true);
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusin', this.handleFocusIn);
-        this.watcher?.disconnect();
-        this.watcher = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        void this.claimTabStop();
+        void this.tabStop.claim();
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -262,7 +45,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         this.toggleState('horizontal', this.axis === 'horizontal');
         this.toggleState('vertical', this.axis === 'vertical');
         if (this.hasUpdated && changed.has('orientation')) {
-            for (const child of this.members) {
+            for (const child of this.tabStop.members) {
                 ;
                 child.requestUpdate?.();
             }
@@ -276,7 +59,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
       aria-label=${this.label}
       aria-orientation=${nested ? nothing : this.axis}
     >
-      <slot @slotchange=${() => this.claimTabStop()}></slot>
+      <slot @slotchange=${() => this.tabStop.claim()}></slot>
     </div>`;
     }
 };