@threadlabs/looma 0.2.4 → 0.2.6

package/dist/collection/components/ui-tree/ui-tree.js

@@ -1,515 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { dispatchDetail } from "../../utils/events";
-import { classifyDropPosition, createHoverIntent, setElementDragImage, } from "../../utils/drag-drop";
-export class UITree {
-    host;
-    label = 'Tree';
-    hoverExpandDelay = 700;
-    /** Maximum resulting item depth accepted by pointer reordering. Zero is unlimited. */
-    maxDepth = 0;
-    source = null;
-    target = null;
-    position = null;
-    rejectedTarget = null;
-    rejectedPosition = null;
-    rejection = null;
-    hoverIntent = null;
-    structureObserver = null;
-    tabStop = null;
-    componentDidLoad() {
-        this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
-        this.host.addEventListener('dragstart', this.onDragStart);
-        this.host.addEventListener('drag', this.onDrag);
-        this.host.addEventListener('dragenter', this.onDragOver);
-        this.host.addEventListener('dragover', this.onDragOver);
-        this.host.addEventListener('dragleave', this.onDragLeave);
-        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();
-        this.host.removeEventListener('dragstart', this.onDragStart);
-        this.host.removeEventListener('drag', this.onDrag);
-        this.host.removeEventListener('dragenter', this.onDragOver);
-        this.host.removeEventListener('dragover', this.onDragOver);
-        this.host.removeEventListener('dragleave', this.onDragLeave);
-        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') || '';
-    }
-    rowFor(item) {
-        return item.shadowRoot?.querySelector('[part="row"]') ?? null;
-    }
-    itemAtPoint(clientX, clientY) {
-        let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
-        while (element) {
-            if (element.localName === 'ui-tree-item' && this.host.contains(element)) {
-                return element;
-            }
-            const root = element.getRootNode();
-            element = root instanceof ShadowRoot ? root.host : element.parentElement;
-        }
-        return null;
-    }
-    isWithinTree(node) {
-        let element = node instanceof HTMLElement ? node : null;
-        while (element) {
-            if (element === this.host || this.host.contains(element))
-                return true;
-            const root = element.getRootNode();
-            element = root instanceof ShadowRoot ? root.host : element.parentElement;
-        }
-        return false;
-    }
-    acceptsChildren(item) {
-        return Boolean(item.container ?? item.hasAttribute('container'))
-            && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
-    }
-    itemMetadata(item) {
-        return {
-            type: item.getAttribute('data-drag-type') || item.getAttribute('drag-type') || 'item',
-            scope: item.getAttribute('data-drop-scope') || item.getAttribute('drop-scope') || '',
-            accepts: (item.getAttribute('data-accepts') || item.getAttribute('accepts') || '')
-                .split(',')
-                .map(value => value.trim())
-                .filter(Boolean),
-        };
-    }
-    constraintDepth(item) {
-        if (item.dropDepth !== undefined)
-            return item.dropDepth;
-        const dropDepth = item.getAttribute('drop-depth');
-        if (dropDepth !== null)
-            return Number(dropDepth);
-        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.
-        // Reject the target before showing any insertion affordance so the preview
-        // stays truthful instead of promising a move the consumer must undo.
-        if (source.contains(target))
-            return { reason: 'descendant' };
-        const sourceMeta = this.itemMetadata(source);
-        const targetMeta = this.itemMetadata(target);
-        if (position === 'inside') {
-            if (!this.acceptsChildren(target)
-                || (targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type))) {
-                return { reason: 'incompatible' };
-            }
-        }
-        else if (sourceMeta.type !== targetMeta.type) {
-            return { reason: 'incompatible' };
-        }
-        const maxDepth = Math.max(0, Math.floor(this.maxDepth));
-        if (maxDepth > 0) {
-            const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
-            const subtreeDepth = this.subtreeDepth(source);
-            const resultingDepth = targetDepth + (position === 'inside' ? 1 : 0) + subtreeDepth;
-            if (resultingDepth > maxDepth)
-                return { reason: 'max-depth', maxDepth, resultingDepth };
-        }
-        return null;
-    }
-    clearTarget() {
-        this.target?.removeAttribute('data-drop-position');
-        this.target = null;
-        this.position = null;
-        this.hoverIntent?.cancel();
-    }
-    clearRejection() {
-        this.rejectedTarget = null;
-        this.rejectedPosition = null;
-        this.rejection = null;
-    }
-    finishDrag() {
-        this.source?.removeAttribute('data-dragging');
-        this.source = null;
-        this.clearTarget();
-        this.clearRejection();
-    }
-    expandTarget = (itemId) => {
-        const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
-            .find(candidate => this.itemId(candidate) === itemId);
-        if (!item || item.getAttribute('aria-expanded') !== 'false')
-            return;
-        item.dispatchEvent(new CustomEvent('ui-tree-auto-expand'));
-    };
-    onDragStart = (event) => {
-        const item = this.itemFromEvent(event);
-        if (!item || !Boolean(item.sortable ?? item.hasAttribute('sortable'))
-            || Boolean(item.disabled ?? item.hasAttribute('disabled')))
-            return;
-        const fromHandle = event.composedPath().some(node => (node instanceof HTMLElement && node.getAttribute('part') === 'drag-handle'));
-        if (!fromHandle) {
-            event.preventDefault();
-            return;
-        }
-        const sourceId = this.itemId(item);
-        const row = this.rowFor(item);
-        if (!sourceId || !row) {
-            event.preventDefault();
-            return;
-        }
-        this.source = item;
-        item.setAttribute('data-dragging', 'true');
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/plain', sourceId);
-        }
-        setElementDragImage(event.dataTransfer, row);
-    };
-    updateTarget(target, clientY, dataTransfer) {
-        if (!this.source)
-            return false;
-        if (!target || target === this.source) {
-            this.clearTarget();
-            this.clearRejection();
-            return false;
-        }
-        const row = this.rowFor(target);
-        if (!row)
-            return false;
-        const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
-        const rejection = this.dropRejection(this.source, target, position);
-        if (rejection) {
-            if (dataTransfer)
-                dataTransfer.dropEffect = 'none';
-            this.clearTarget();
-            if (rejection.reason === 'max-depth') {
-                this.rejectedTarget = target;
-                this.rejectedPosition = position;
-                this.rejection = rejection;
-            }
-            else {
-                this.clearRejection();
-            }
-            return false;
-        }
-        this.clearRejection();
-        if (dataTransfer)
-            dataTransfer.dropEffect = 'move';
-        if (this.target !== target || this.position !== position) {
-            this.clearTarget();
-            this.target = target;
-            this.position = position;
-            target.setAttribute('data-drop-position', position);
-        }
-        if (position === 'inside' && target.getAttribute('aria-expanded') === 'false') {
-            this.hoverIntent?.schedule(this.itemId(target));
-        }
-        else {
-            this.hoverIntent?.cancel();
-        }
-        return true;
-    }
-    onDrag = (event) => {
-        if (!this.source || (event.clientX === 0 && event.clientY === 0))
-            return;
-        const target = this.itemAtPoint(event.clientX, event.clientY);
-        // Native dragenter does not fire when a nested source moves onto an
-        // ancestor row: the pointer was already inside that ancestor's host. The
-        // source drag event still carries the live pointer coordinates, so use it
-        // to keep ancestor/outdent feedback current.
-        if (target)
-            this.updateTarget(target, event.clientY, event.dataTransfer);
-    };
-    onDragOver = (event) => {
-        if (!this.source)
-            return;
-        const target = this.itemFromEvent(event);
-        if (this.updateTarget(target, event.clientY, event.dataTransfer)) {
-            event.preventDefault();
-        }
-    };
-    onDragLeave = (event) => {
-        if (this.isWithinTree(event.relatedTarget))
-            return;
-        if (this.itemAtPoint(event.clientX, event.clientY))
-            return;
-        this.clearTarget();
-        this.clearRejection();
-    };
-    dispatchReorder(source, target, position) {
-        const sourceId = this.itemId(source);
-        const targetId = this.itemId(target);
-        if (!sourceId || !targetId)
-            return;
-        if (position === 'inside')
-            this.expandTarget(targetId);
-        const sourceMeta = this.itemMetadata(source);
-        const targetMeta = this.itemMetadata(target);
-        dispatchDetail(this.host, 'reorder', {
-            sourceId,
-            targetId,
-            position,
-            sourceType: sourceMeta.type,
-            targetType: targetMeta.type,
-            sourceScope: sourceMeta.scope,
-            targetScope: targetMeta.scope,
-            trigger: 'pointer',
-        });
-    }
-    dispatchReorderRejected(source, target, position, rejection) {
-        const sourceId = this.itemId(source);
-        const targetId = this.itemId(target);
-        if (!sourceId || !targetId)
-            return;
-        dispatchDetail(this.host, 'reorder-rejected', {
-            sourceId,
-            targetId,
-            position,
-            reason: 'max-depth',
-            maxDepth: rejection.maxDepth,
-            resultingDepth: rejection.resultingDepth,
-            trigger: 'pointer',
-        });
-    }
-    onDrop = (event) => {
-        if (!this.source || !this.target || !this.position)
-            return;
-        event.preventDefault();
-        this.dispatchReorder(this.source, this.target, this.position);
-        this.finishDrag();
-    };
-    onDragEnd = (event) => {
-        if (this.source) {
-            if (this.rejectedTarget && this.rejectedPosition && this.rejection) {
-                this.dispatchReorderRejected(this.source, this.rejectedTarget, this.rejectedPosition, this.rejection);
-                this.finishDrag();
-                return;
-            }
-            const target = this.itemAtPoint(event.clientX, event.clientY);
-            if (target && target !== this.source) {
-                const row = this.rowFor(target);
-                if (row) {
-                    const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-                    const rejection = this.dropRejection(this.source, target, position);
-                    if (!rejection) {
-                        this.dispatchReorder(this.source, target, position);
-                    }
-                    else if (rejection.reason === 'max-depth') {
-                        this.dispatchReorderRejected(this.source, target, position, rejection);
-                    }
-                }
-            }
-        }
-        this.finishDrag();
-    };
-    visibleItems() {
-        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;
-        const items = this.visibleItems();
-        const index = items.indexOf(current);
-        if (index < 0)
-            return;
-        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;
-        }
-        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: 'bae06665078a67c59db2d9e72c7dea6ddeeb9e56', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '232cb02f1a50bc5e18a92c0d8677e917870ec75e' })));
-    }
-    static get is() { return "ui-tree"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-tree.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-tree.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "'Tree'"
-            },
-            "hoverExpandDelay": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hover-expand-delay",
-                "defaultValue": "700"
-            },
-            "maxDepth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum resulting item depth accepted by pointer reordering. Zero is unlimited."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-depth",
-                "defaultValue": "0"
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-}