@coreui/data-grid 0.2.0-rc.0 → 0.3.0-rc.0

package/dist/js/data-grid.lite.mjs

@@ -1,5 +1,5 @@
 /*!
-* CoreUI PRO data-grid v0.2.0-rc.0 (https://coreui.io)
+* CoreUI PRO data-grid v0.3.0-rc.0 (https://coreui.io)
 * Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
 * License (https://coreui.io/pro/license/)
 * Bundles @tanstack/table-core and @tanstack/virtual-core, MIT (https://github.com/TanStack/table/blob/main/LICENSE)
@@ -916,7 +916,7 @@ const clampActiveCell = (cell, context) => {
 	};
 };
 const resolveNavigation = (key, ctrlKey, current, context) => {
-	const { columnIds, rowCount, pageStep, paginated } = context;
+	const { columnIds, rowCount, pageStep, paginated, rtl } = context;
 	const columnIndex = columnIds.indexOf(current.columnId);
 	if (columnIndex === -1 || columnIds.length === 0) return null;
 	const lastRow = rowCount - 1;
@@ -926,8 +926,8 @@ const resolveNavigation = (key, ctrlKey, current, context) => {
 		columnId: columnIds[index]
 	} });
 	switch (key) {
-		case "ArrowLeft": return cell(current.rowIndex, Math.max(columnIndex - 1, 0));
-		case "ArrowRight": return cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn));
+		case "ArrowLeft": return rtl ? cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn)) : cell(current.rowIndex, Math.max(columnIndex - 1, 0));
+		case "ArrowRight": return rtl ? cell(current.rowIndex, Math.max(columnIndex - 1, 0)) : cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn));
 		case "ArrowUp": return cell(Math.max(current.rowIndex - 1, HEADER_ROW_INDEX), columnIndex);
 		case "ArrowDown": return cell(Math.min(current.rowIndex + 1, lastRow), columnIndex);
 		case "Home":
@@ -1151,6 +1151,7 @@ const createDragController = (options) => {
 	const horizontal = axis === "x";
 	let sourceHit = null;
 	let dragging = false;
+	let axisSign = 1;
 	let origin = {
 		x: 0,
 		y: 0
@@ -1170,6 +1171,11 @@ const createDragController = (options) => {
 	const previewClassed = /* @__PURE__ */ new Set();
 	const contentStarts = /* @__PURE__ */ new Map();
 	const contentSizes = /* @__PURE__ */ new Map();
+	const logicalStart = (rect) => {
+		if (!horizontal) return rect.top;
+		return axisSign === 1 ? rect.left : -rect.right;
+	};
+	const logicalPointer = () => horizontal ? pointer.x * axisSign : pointer.y;
 	const stopAutoScroll = () => {
 		if (scrollFrame) {
 			cancelAnimationFrame(scrollFrame);
@@ -1206,7 +1212,8 @@ const createDragController = (options) => {
 		const rootRect = root.getBoundingClientRect();
 		indicator.hidden = false;
 		if (horizontal) {
-			indicator.style.left = `${after ? rect.right : rect.left}px`;
+			const trailing = after === (axisSign === 1);
+			indicator.style.left = `${trailing ? rect.right : rect.left}px`;
 			indicator.style.top = `${rootRect.top}px`;
 			indicator.style.height = `${rootRect.height}px`;
 		} else {
@@ -1217,6 +1224,7 @@ const createDragController = (options) => {
 	};
 	const startDrag = () => {
 		dragging = true;
+		axisSign = horizontal && getComputedStyle(root).direction === "rtl" ? -1 : 1;
 		const active = document.activeElement;
 		if (active instanceof HTMLElement && root.contains(active)) active.blur();
 		root.classList.add(CLASS_NAME_DRAG_ACTIVE);
@@ -1243,13 +1251,13 @@ const createDragController = (options) => {
 		const scrollElement = options.getScrollElement();
 		if (!scrollElement) return 0;
 		const rect = scrollElement.getBoundingClientRect();
-		return horizontal ? rect.left - scrollElement.scrollLeft : rect.top - scrollElement.scrollTop;
+		return horizontal ? logicalStart(rect) - axisSign * scrollElement.scrollLeft : rect.top - scrollElement.scrollTop;
 	};
 	const captureItem = (id, origin) => {
 		const element = options.items.getElements(id)[0];
 		if (!element) return false;
 		const rect = element.getBoundingClientRect();
-		const start = (horizontal ? rect.left : rect.top) - (previewDeltas.get(id) ?? 0);
+		const start = logicalStart(rect) - (previewDeltas.get(id) ?? 0);
 		contentStarts.set(id, start - origin);
 		contentSizes.set(id, horizontal ? rect.width : rect.height);
 		return true;
@@ -1261,7 +1269,7 @@ const createDragController = (options) => {
 		for (const id of options.items.getOrderedIds()) captureItem(id, origin);
 	};
 	const updateTarget = () => {
-		const position = horizontal ? pointer.x : pointer.y;
+		const position = logicalPointer();
 		const origin = contentOrigin();
 		const zones = [];
 		for (const id of options.items.getOrderedIds()) {
@@ -1364,7 +1372,7 @@ const createDragController = (options) => {
 		for (const [id, delta] of next) {
 			if (previewDeltas.get(id) === delta) continue;
 			for (const element of options.items.getElements(id)) {
-				element.style.transform = horizontal ? `translateX(${delta}px)` : `translateY(${delta}px)`;
+				element.style.transform = horizontal ? `translateX(${axisSign * delta}px)` : `translateY(${delta}px)`;
 				element.classList.add(CLASS_NAME_PREVIEW);
 			}
 			previewClassed.add(id);
@@ -1398,7 +1406,7 @@ const createDragController = (options) => {
 		};
 		const delta = previewDeltas.get(sourceHit.id) ?? 0;
 		return horizontal ? {
-			x: rect.left - delta,
+			x: rect.left - axisSign * delta,
 			y: rect.top
 		} : {
 			x: rect.left,
@@ -5591,6 +5599,22 @@ const evaluateColumnFilter = (cellValue, filterValue, filterType = "text") => {
 	return filterValue.value.some((candidate) => String(candidate) === String(cellValue));
 };
 //#endregion
+//#region src/util/direction.ts
+/**
+* --------------------------------------------------------------------------
+* CoreUI PRO data-grid util/direction.ts
+* License (https://coreui.io/pro/license/)
+* --------------------------------------------------------------------------
+*/
+const isElementRTL = (element) => typeof getComputedStyle === "function" && element ? getComputedStyle(element).direction === "rtl" : false;
+const syncResizeDirection = (table, element) => {
+	const direction = isElementRTL(element) ? "rtl" : "ltr";
+	if (table.options.columnResizeDirection !== direction) table.setOptions((previous) => ({
+		...previous,
+		columnResizeDirection: direction
+	}));
+};
+//#endregion
 //#region src/ui/toolbar.ts
 const CLASS_NAME_TOOLBAR = "data-grid-toolbar";
 const CLASS_NAME_ACTIONS = "data-grid-toolbar-actions";
@@ -5721,7 +5745,7 @@ const toTanStackFilterFn = (column) => {
 	if (filterFn) return (row, columnId, filterValue) => filterFn(row.getValue(columnId), filterValue, row.original);
 	return (row, columnId, filterValue) => evaluateColumnFilter(row.getValue(columnId), filterValue, column.filterType);
 };
-const createGridTable = (options) => {
+const createGridTable = (options, getElement) => {
 	const sortingOptions = typeof options.sorting === "object" ? options.sorting : {};
 	const sizingOptions = typeof options.columnSizing === "object" ? options.columnSizing : {};
 	const paginationOptions = typeof options.pagination === "object" ? options.pagination : {};
@@ -5784,6 +5808,7 @@ const createGridTable = (options) => {
 			};
 		}),
 		columnResizeMode: sizingOptions.mode ?? "onChange",
+		columnResizeDirection: isElementRTL(getElement?.()) ? "rtl" : "ltr",
 		data: serverSide ? [] : options.items,
 		enableCellSelection: Boolean(options.cellSelection),
 		enableColumnFilters: Boolean(options.columnFilters),
@@ -8826,6 +8851,10 @@ let editorErrorCount = 0;
 const STATE_STORAGE_PREFIX = "coreui-data-grid:";
 const STATE_AUTOSAVE_DEBOUNCE_MS = 250;
 const HISTORY_LIMIT = 100;
+const INVERTED_ARROWS = {
+	ArrowLeft: "ArrowRight",
+	ArrowRight: "ArrowLeft"
+};
 const CELL_SELECTION_DIRECTIONS = {
 	ArrowDown: "down",
 	ArrowLeft: "left",
@@ -9137,7 +9166,7 @@ var DataGrid$1 = class DataGrid$1 extends BaseComponent {
 	}
 	_createTable() {
 		this._unsubscribeState?.();
-		const table = createGridTable(this._config);
+		const table = createGridTable(this._config, () => this._element);
 		this._unsubscribeState = subscribeToTableState(table, (previous, next) => {
 			this._notifyStateChange(previous, next);
 			this._scheduler.schedule();
@@ -9639,7 +9668,7 @@ var DataGrid$1 = class DataGrid$1 extends BaseComponent {
 		if (!result) return;
 		event.preventDefault();
 		if (this._config.cellSelection && found.cell.rowIndex >= 0 && result.cell.rowIndex >= 0) {
-			const direction = CELL_SELECTION_DIRECTIONS[event.key];
+			const direction = CELL_SELECTION_DIRECTIONS[isElementRTL(this._element) ? INVERTED_ARROWS[event.key] ?? event.key : event.key];
 			if (event.shiftKey && direction) {
 				this._table.extendCellSelection(direction);
 				this._scheduler.schedule();
@@ -9882,7 +9911,8 @@ var DataGrid$1 = class DataGrid$1 extends BaseComponent {
 			columnIds: this._visibleLeafColumns().map((column) => column.id),
 			rowCount,
 			pageStep: paginated ? this._table.store.state.pagination.pageSize : Math.max(1, viewportRows || rowCount),
-			paginated
+			paginated,
+			rtl: isElementRTL(this._element)
 		};
 	}
 	_cellElementFor(cell) {
@@ -10081,6 +10111,7 @@ var DataGrid$1 = class DataGrid$1 extends BaseComponent {
 		const key = (event.delegateTarget ?? event.target).closest("th")?.dataset.coreuiColumn;
 		if (!key) return;
 		if (event.type === "mousedown") event.preventDefault();
+		syncResizeDirection(this._table, this._element);
 		(this._table.getHeaderGroups()[0]?.headers.find((item) => item.column.id === key))?.getResizeHandler()(event);
 	}
 	_toggleRowSelection(event) {