@ixfx/components 0.8.6 → 0.8.8

package/dist/{grid-list-j5C7qtlG.js → grid-list-C8oMxLl-.js}

@@ -3,9 +3,10 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-DrY3qeJM.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
-import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
-import "./interaction-B9AAlsFO.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
+import "./interaction-BskmlA9t.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { LitElement, css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -597,12 +598,50 @@ let GridListElement = class GridListElement extends LitElement {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap,
-			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging || this.#nativeDrag.isDragging
 		});
 		this.#marqueePreview = /* @__PURE__ */ new Set();
 		this.#nativeDragging = false;
 		this.#dragOriginKey = void 0;
 		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `grid-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this.#source.count > 0,
+			resolveEventToKey: (target) => {
+				if (target instanceof Element) {
+					const key = (target.closest?.(`.cell`))?.dataset.key;
+					if (key) return key;
+					const keyed = (target.closest?.(`[data-key]`))?.dataset.key ?? target.dataset?.key ?? keyForElement(target);
+					if (keyed) return keyed;
+				}
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({
+				itemSize: this.itemSize,
+				captionStyle: this.captionStyle,
+				captionHeight: this.captionHeight,
+				rowHeight: this.#rowHeight()
+			}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatch(`list-native-drag-start`, detail, true),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = [...this.selection.selectedKeys].filter((k) => !isSyntheticKey(k)).length;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#clearNativeDragState();
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => {
+				for (const child of this.children) if (child instanceof HTMLElement) child.draggable = this.itemsDraggable;
+			}
+		});
 		this.#activeCaptionPan = null;
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.#viewportRef.value,
@@ -648,23 +687,6 @@ let GridListElement = class GridListElement extends LitElement {
 				this.#emitViewportChange();
 			});
 		};
-		this.#onDragStart = (e, key) => {
-			this.#doDragStart(key, () => e.preventDefault(), e);
-		};
-		this.#onSlottedDragStart = (e) => {
-			if (!this.itemsDraggable) return;
-			let cell = e.composedPath().find((n) => n instanceof Element && n.classList.contains(`cell`));
-			if (!cell && e.target instanceof Element) cell = e.target.closest?.(`.cell`);
-			if (!cell) return;
-			const key = cell.dataset.key;
-			if (!key) return;
-			if (e instanceof DragEvent) this.#doDragStart(key, () => e.preventDefault(), e);
-			else this.#doDragStart(key, () => {});
-		};
-		this.#onDragEnd = () => {
-			this.#clearNativeDragState();
-			this.#startPostDragSuppressTimer();
-		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -1101,6 +1123,35 @@ let GridListElement = class GridListElement extends LitElement {
 	#dragOriginKey;
 	/** Timer handle for post-drag click suppression. */
 	#postDragSuppressTimer;
+	#nativeDrag;
+	/** Origin rule + display-ordered entry resolution for native drag-out (both modes). */
+	#prepareNativeDrag(originKey) {
+		const index = this.#source.indexOfKey(originKey);
+		if (index < 0 || !this.#source.isSelectable(index)) return void 0;
+		if (!this.selection.selectedKeys.has(originKey)) this.selection.replace(originKey);
+		const ordered = this.#source.keys().filter((k) => !isSyntheticKey(k) && this.selection.selectedKeys.has(k));
+		const selected = [];
+		for (const key of ordered) {
+			const entryIndex = this.#source.indexOfKey(key);
+			if (entryIndex < 0) continue;
+			const data = this.#source.resolveKeyToData(key);
+			const element = this.#source.resolveKeyToElement(key);
+			const item = data ?? element;
+			if (item === void 0) continue;
+			selected.push({
+				key,
+				index: entryIndex,
+				item,
+				...element ? { element } : {}
+			});
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
 	/**
 	* The single caption pan-text currently scrolling. At most one caption is
 	* a pan-text in loop mode at a time — when tickle moves, the old one is
@@ -1233,7 +1284,7 @@ let GridListElement = class GridListElement extends LitElement {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
-		if (this.#nativeDragging) this.#clearNativeDragState();
+		if (this.#nativeDragging || this.#nativeDrag.isDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -1314,7 +1365,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
-		this.#initSlottedDragInterceptor();
+		this.#nativeDrag.refreshDraggable();
 	}
 	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
 	#rebuildSource() {
@@ -1404,7 +1455,7 @@ let GridListElement = class GridListElement extends LitElement {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
 		}
-		if (changed.has(`itemsDraggable`)) this.#syncSlottedDraggable();
+		if (changed.has(`itemsDraggable`)) this.#nativeDrag.refreshDraggable();
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -1823,8 +1874,6 @@ let GridListElement = class GridListElement extends LitElement {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
@@ -1909,8 +1958,6 @@ let GridListElement = class GridListElement extends LitElement {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
@@ -1927,145 +1974,10 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 	}
 	#onCellClick(e, key) {
-		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
-	#doDragStart(key, cancelled, dragEvent) {
-		if (!this.itemsDraggable) return false;
-		const index = this.#source.indexOfKey(key);
-		if (index < 0 || !this.#source.isSelectable(index)) return false;
-		if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
-		const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
-		const detail = {
-			key,
-			index: this.#source.indexOfKey(key),
-			item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
-			selectedKeys
-		};
-		if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
-			cancelled();
-			return false;
-		}
-		this.#nativeDragging = true;
-		this.#dragOriginKey = key;
-		this.toggleAttribute(`data-native-dragging`, true);
-		const count = selectedKeys.length;
-		this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
-		if (dragEvent && count > 1) this.#setMultiItemDragImage(dragEvent, selectedKeys);
-		return true;
-	}
-	#setMultiItemDragImage(e, selectedKeys) {
-		const preview = this.#createMultiItemPreview(selectedKeys);
-		document.body.appendChild(preview);
-		const rect = preview.getBoundingClientRect();
-		e.dataTransfer?.setDragImage(preview, rect.width / 2, rect.height / 2);
-		requestAnimationFrame(() => preview.remove());
-	}
-	#createMultiItemPreview(selectedKeys) {
-		const preview = document.createElement(`div`);
-		preview.style.cssText = `
-      position: fixed;
-      top: -9999px;
-      left: -9999px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      padding: 8px;
-      background: var(--surface-4, #333);
-      border: 1px solid var(--border, #555);
-      border-radius: 8px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-      font-family: system-ui, sans-serif;
-      font-size: 12px;
-      color: var(--surface-text, #fff);
-      max-width: 200px;
-      z-index: 999999;
-    `;
-		const header = document.createElement(`div`);
-		header.style.cssText = `
-      font-weight: 600;
-      padding-bottom: 4px;
-      border-bottom: 1px solid var(--border, #555);
-      margin-bottom: 4px;
-    `;
-		header.textContent = `${selectedKeys.length} items`;
-		preview.appendChild(header);
-		for (const key of selectedKeys.slice(0, 5)) {
-			const row = this.#createPreviewRow(key);
-			if (row) preview.appendChild(row);
-		}
-		if (selectedKeys.length > 5) {
-			const more = document.createElement(`div`);
-			more.style.cssText = `opacity: 0.6; text-align: center;`;
-			more.textContent = `+${selectedKeys.length - 5} more`;
-			preview.appendChild(more);
-		}
-		return preview;
-	}
-	#createPreviewRow(key) {
-		const el = this.#source.resolveKeyToElement(key);
-		if (!el) return null;
-		const row = document.createElement(`div`);
-		row.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    `;
-		const thumb = document.createElement(`div`);
-		thumb.style.cssText = `
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
-      overflow: hidden;
-      background: var(--surface-5, #444);
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-		const slottedImg = el.querySelector(`img`);
-		const slottedSvg = el.querySelector(`svg`);
-		const slottedPlaceholder = el.querySelector(`.placeholder`);
-		if (slottedImg) {
-			const img = slottedImg.cloneNode(true);
-			img.style.cssText = `width: 100%; height: 100%; object-fit: cover;`;
-			thumb.appendChild(img);
-		} else if (slottedSvg) {
-			const svg = slottedSvg.cloneNode(true);
-			svg.style.cssText = `width: 70%; height: 70%; opacity: 0.8;`;
-			thumb.appendChild(svg);
-		} else if (slottedPlaceholder) thumb.textContent = slottedPlaceholder.textContent || `?`;
-		const label = document.createElement(`span`);
-		label.style.cssText = `
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-		label.textContent = el.getAttribute(`data-label`) || key;
-		row.appendChild(thumb);
-		row.appendChild(label);
-		return row;
-	}
-	#onDragStart;
-	#onSlottedDragStart;
-	#initSlottedDragInterceptor() {
-		this.renderRoot.addEventListener(`dragstart`, this.#onSlottedDragStart, { capture: true });
-		const observer = new MutationObserver(() => this.#syncSlottedDraggable());
-		observer.observe(this, {
-			childList: true,
-			subtree: true
-		});
-		this.#slottedDragObserver = observer;
-		this.#syncSlottedDraggable();
-	}
-	#slottedDragObserver;
-	#syncSlottedDraggable() {
-		const draggable = this.itemsDraggable;
-		for (const child of this.children) if (child instanceof HTMLElement) child.draggable = draggable;
-	}
-	#onDragEnd;
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -2140,6 +2052,7 @@ __decorate([property({
 	attribute: `items-draggable`,
 	reflect: true
 })], GridListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -2155,4 +2068,4 @@ GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElem
 //#endregion
 export { PanTextElement as n, GridListElement as t };
 
-//# sourceMappingURL=grid-list-j5C7qtlG.js.map
+//# sourceMappingURL=grid-list-C8oMxLl-.js.map