@ixfx/components 0.8.6 → 0.8.8

package/dist/crumbs.d.ts

@@ -1,5 +1,5 @@
 import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Bc23SI94.js";
-import { a as TreeComponent, c as TreeExpandEvent, g as TreeDataModel, h as TreeTickleEvent, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, u as TreeItemClickEvent } from "./tree-component-F6qZ0Gdv.js";
+import { _ as TreeTickleEvent, a as TreeComponent, c as TreeExpandEvent, h as TreeSelectEvent, n as TreeActivateEvent, o as TreeComponentEventMap, u as TreeItemClickEvent, v as TreeDataModel } from "./tree-component-nPP5Y-WS.js";
 import "./menu-item-CZi9vy5O.js";
 import "./narrowed-text.js";
 import { LitElement, PropertyValues } from "lit";

package/dist/crumbs.js

@@ -2,8 +2,8 @@ import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-B9AAlsFO.js";
-import "./menu-item-BQDYxk5A.js";
+import "./interaction-BskmlA9t.js";
+import "./menu-item-BYGQzyCe.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import "./narrowed-text.js";

package/dist/{data-grid-D-z7bx5-.d.ts → data-grid-BKa9i86q.d.ts}

@@ -1,4 +1,5 @@
-import { S as ListSearchController } from "./index-h6gxtfHH.js";
+import { i as ListDragPreviewRenderer, s as ListNativeDragStartEvent } from "./list-drag-types-kpaXz2pZ.js";
+import { S as ListSearchController } from "./index-Dgrx-DIA.js";
 import "./index-9AhaHIT2.js";
 import { LitElement } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -110,6 +111,7 @@ interface DataGridElementEventMap {
   'datagrid-cell-click': DataGridCellClickEvent;
   'datagrid-cell-edit': DataGridCellEditEvent;
   'datagrid-group-change': DataGridGroupChangeEvent;
+  'list-native-drag-start': ListNativeDragStartEvent<unknown>;
 }
 declare class DataGridElement extends LitElement {
   #private;
@@ -151,6 +153,17 @@ declare class DataGridElement extends LitElement {
    * disabled. See `docs/infra-incremental.md`.
    */
   searchModes: string | undefined;
+  /**
+   * Enable native browser drag-and-drop for selectable rows. When true,
+   * selectable rows become draggable and the grid emits
+   * `list-native-drag-start` when a drag begins.
+   */
+  itemsDraggable: boolean;
+  /**
+   * Custom drag preview renderer (synchronous). Defaults to the shared
+   * built-in HTML+canvas preview.
+   */
+  dragPreviewRenderer: ListDragPreviewRenderer<unknown> | undefined;
   private _columnFormatters;
   private _selectedKeys;
   private _scrollTop;
@@ -269,4 +282,4 @@ interface DataGridElement {
 }
 //#endregion
 export { DataGridSortDetail as _, DataGridColumnReorderDetail as a, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridSelectEvent as g, DataGridSelectDetail as h, DataGridCellEditEvent as i, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSortEvent as v };
-//# sourceMappingURL=data-grid-D-z7bx5-.d.ts.map
+//# sourceMappingURL=data-grid-BKa9i86q.d.ts.map

package/dist/data-grid-BKa9i86q.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-BKa9i86q.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":"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"}

package/dist/data-grid.d.ts

@@ -1,2 +1,3 @@
-import { _ as DataGridSortDetail, a as DataGridColumnReorderDetail, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridSelectEvent, h as DataGridSelectDetail, i as DataGridCellEditEvent, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSortEvent } from "./data-grid-D-z7bx5-.js";
-export { DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent };
+import { a as ListDragSource, i as ListDragPreviewRenderer, n as ListDragPreview, o as ListNativeDragStartDetail, r as ListDragPreviewContext, s as ListNativeDragStartEvent, t as ListDragEntry } from "./list-drag-types-kpaXz2pZ.js";
+import { _ as DataGridSortDetail, a as DataGridColumnReorderDetail, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridSelectEvent, h as DataGridSelectDetail, i as DataGridCellEditEvent, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSortEvent } from "./data-grid-BKa9i86q.js";
+export { DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };

package/dist/data-grid.js

@@ -4,10 +4,11 @@ import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-C05WjbZh.js";
 import { t as handleStyles } from "./handle-BPOxBOKf.js";
-import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
-import "./interaction-B9AAlsFO.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-DrY3qeJM.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
+import "./interaction-BskmlA9t.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-HMoxCPY2.js";
+import "./menu-CMXhIaNZ.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -29,6 +30,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
+		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -46,7 +48,45 @@ let DataGridElement = class DataGridElement extends LitElement {
 				id: k,
 				enabled: true
 			})),
-			onStateChange: () => this.requestUpdate()
+			onStateChange: () => this.requestUpdate(),
+			hoverDisabled: () => this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `data-grid`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._flat.some((f) => f.type === `row`),
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				if (target.closest?.(`.header-cell`)) return void 0;
+				return (target.closest?.(`.row`))?.dataset.key;
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({ rowHeight: this.rowHeight }),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
+				detail,
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			})),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = this._selectedKeys.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.#dragOriginKey = void 0;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				this.#startPostDragSuppressTimer();
+			}
 		});
 		this._sortedRows = [];
 		this._flat = [];
@@ -318,6 +358,7 @@ let DataGridElement = class DataGridElement extends LitElement {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+    .row.item.dragging-origin { opacity: 0.6; }
 
     /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
        the row set changes — do rows slide (their top transitions) to make or
@@ -363,6 +404,43 @@ let DataGridElement = class DataGridElement extends LitElement {
   `
 		];
 	}
+	#nativeDragging;
+	#dragOriginKey;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const rows = this._flat.filter((f) => f.type === `row`);
+		if (!rows.some((f) => f.key === originKey)) return void 0;
+		if (!this._selectedKeys.has(originKey)) this._replaceSelection(originKey);
+		const selected = [];
+		let displayIndex = 0;
+		for (const entry of rows) {
+			if (!this._selectedKeys.has(entry.key)) {
+				displayIndex++;
+				continue;
+			}
+			const rowEl = this.renderRoot.querySelector(`.row[data-key="${CSS.escape(entry.key)}"]`) ?? void 0;
+			selected.push({
+				key: entry.key,
+				index: displayIndex,
+				item: entry.row,
+				...rowEl ? { element: rowEl } : {}
+			});
+			displayIndex++;
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	#searchKeyByRow;
@@ -439,6 +517,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 			clearTimeout(this.#rowReflowTimer);
 			this.#rowReflowTimer = 0;
 		}
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	/**
 	* Dispatch a command to this grid — routes through the command registry so
@@ -621,6 +703,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}));
 	}
 	_onRowClick(rowKey, col, e) {
+		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		if (col && col.selectable === false) return;
 		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
 		if (this.interactionMode === `manual`) return;
@@ -1280,8 +1363,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
+                  draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
 				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
@@ -1464,6 +1548,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], DataGridElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DataGridElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);