@threadlabs/looma 0.1.21 → 0.1.23

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
 
 /**
@@ -614,6 +614,10 @@ const UITreeItem = class {
     label = '';
     /** One-based visual and semantic nesting level. */
     depth = 1;
+    /** Application hierarchy depth used for drop constraints. Defaults to visual depth. */
+    dropDepth;
+    /** Deepest descendant distance, used with the tree's max-depth drop constraint. */
+    subtreeDepth;
     /** Whether this item accepts children and exposes disclosure behavior. */
     container = false;
     /** Whether this item participates in pointer drag and drop. */
@@ -676,10 +680,10 @@ const UITreeItem = class {
         const level = Math.max(1, Math.floor(this.depth));
         const disclosureLabel = `${this.internalExpanded ? 'Collapse' : 'Expand'} ${this.label || 'item'}`;
         const dragLabel = `Drag ${this.label || 'item'} to reorder`;
-        return (h(Host, { key: 'ea8ed538aa3883c87257a25614a066965364693f', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
+        return (h(Host, { key: '606f5fdac8a95489d0c62cd7d4918c6d5d0c759e', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
                 '--ui-tree-item-depth': String(level - 1),
                 'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
-            } }, h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), h("span", { key: '9efc0e95588f1dd4527dade2b7ff9f2774462c2e', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null, h("span", { key: '8893ec2c4082bb8af942ef563055a2910d0d4201', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
+            } }, h("div", { key: '2b4bb03d4b24ef668f22b08e803f7f43c2d63ae5', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: 'e7b935158e35cdc6518bdd73d54c42dcfa211aee', class: "leading", part: "leading" }, h("slot", { key: '8448462349fd23b8be0fb673fc6e101bf94beaa7', name: "leading" })), h("span", { key: 'e0b6338e1ec9ec043446e42c5f03724adf7e1862', class: "label", part: "label" }, h("slot", { key: 'ed44e6f2ce3466c28d2b87fc7511399ecc339255' })), h("span", { key: '2aea78227904fe23cfc4b8e14852a4601e3cc34b', class: "actions", part: "actions" }, h("slot", { key: '7c6549008c2a54c3ea6fcdf9e0fdbe445d379922', name: "actions" })), h("span", { key: '05166ba04765bc518d6b95ca7ae5a67c4394d1bf', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, h("slot", { name: "children" }))) : null, h("span", { key: '7381d6e9e2a8f94695f29e73194b1603d79cefb9', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
     }
     static get watchers() { return {
         "expanded": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
 
 /**
@@ -62,13 +62,19 @@ const UITree = class {
     get host() { return getElement(this); }
     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;
     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);
@@ -79,6 +85,7 @@ const UITree = class {
     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);
@@ -130,19 +137,42 @@ const UITree = class {
                 .filter(Boolean),
         };
     }
-    permitsDrop(source, target, position) {
+    constraintDepth(item) {
+        if (item.dropDepth !== undefined)
+            return item.dropDepth;
+        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;
+    }
+    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 false;
+            return { reason: 'descendant' };
         const sourceMeta = this.itemMetadata(source);
         const targetMeta = this.itemMetadata(target);
         if (position === 'inside') {
-            return this.acceptsChildren(target)
-                && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+            if (!this.acceptsChildren(target)
+                || (targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type))) {
+                return { reason: 'incompatible' };
+            }
         }
-        return sourceMeta.type === targetMeta.type;
+        else if (sourceMeta.type !== targetMeta.type) {
+            return { reason: 'incompatible' };
+        }
+        const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+        if (maxDepth > 0 && source.subtreeDepth !== undefined) {
+            const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+            const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+            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');
@@ -150,10 +180,16 @@ const UITree = class {
         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'))
@@ -186,27 +222,36 @@ const UITree = class {
         }
         setElementDragImage(event.dataTransfer, row);
     };
-    onDragOver = (event) => {
+    updateTarget(target, clientY, dataTransfer) {
         if (!this.source)
-            return;
-        const target = this.itemFromEvent(event);
+            return false;
         if (!target || target === this.source) {
             this.clearTarget();
-            return;
+            this.clearRejection();
+            return false;
         }
         const row = this.rowFor(target);
         if (!row)
-            return;
-        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-        if (!this.permitsDrop(this.source, target, position)) {
-            if (event.dataTransfer)
-                event.dataTransfer.dropEffect = 'none';
+            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();
-            return;
+            if (rejection.reason === 'max-depth') {
+                this.rejectedTarget = target;
+                this.rejectedPosition = position;
+                this.rejection = rejection;
+            }
+            else {
+                this.clearRejection();
+            }
+            return false;
         }
-        event.preventDefault();
-        if (event.dataTransfer)
-            event.dataTransfer.dropEffect = 'move';
+        this.clearRejection();
+        if (dataTransfer)
+            dataTransfer.dropEffect = 'move';
         if (this.target !== target || this.position !== position) {
             this.clearTarget();
             this.target = target;
@@ -219,6 +264,26 @@ const UITree = class {
         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))
@@ -226,12 +291,15 @@ const UITree = class {
         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', {
@@ -245,6 +313,21 @@ const UITree = class {
             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;
@@ -254,14 +337,23 @@ const UITree = class {
     };
     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));
-                    if (this.permitsDrop(this.source, target, position)) {
+                    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);
+                    }
                 }
             }
         }
@@ -286,7 +378,7 @@ const UITree = class {
         next.focus();
     };
     render() {
-        return (h(Host, { key: 'b659635f6acdf09a3618c514f5bdd9bf173f9d98', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '0815f0eb0bfe766dd2f358385af1516fd4328e2e' })));
+        return (h(Host, { key: '474c2154d2abe3c76eee9c36bf552390089df6e8', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '93aedd02f984dd33b5efc811fef417d1199917bd' })));
     }
 };
 UITree.style = uiTreeCss();