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

package/scss/data-grid.standalone.scss

@@ -0,0 +1,16 @@
+/*!
+ * CoreUI PRO data-grid.standalone.scss v0.1.0
+ * License (https://coreui.io/pro/license/)
+ */
+
+// The grid plus the base styles it would otherwise borrow from
+// @coreui/coreui(-pro). Load this INSTEAD of data-grid.css when the CoreUI
+// stylesheet is not on the page.
+
+// scss-docs-start import-stack
+@forward "config";
+@forward "functions";
+@forward "mixins";
+@forward "base";
+@forward "components/data-grid";
+// scss-docs-end import-stack

package/scss/functions/_defaults.scss

@@ -0,0 +1,25 @@
+// Vendored from @coreui/coreui-pro (scss/functions/_defaults.scss, v6 line).
+// Sync manually — do not diverge.
+
+@use "sass:map";
+@use "sass:meta";
+
+// Merge overrides on top of defaults, stripping null entries.
+// Null values let users remove map keys via @use ... with().
+// Accepts a list as $defaults (converted to a map with `true` values).
+@function defaults($defaults, $overrides) {
+  @if meta.type-of($defaults) == "list" {
+    $map: ();
+    @each $key in $defaults {
+      $map: map.merge($map, ($key: true));
+    }
+    $defaults: $map;
+  }
+  $merged: map.merge($defaults, $overrides);
+  @each $key, $value in $merged {
+    @if $value == null {
+      $merged: map.remove($merged, $key);
+    }
+  }
+  @return $merged;
+}

package/scss/mixins/_tokens.scss

@@ -0,0 +1,12 @@
+// Vendored from @coreui/coreui-pro (scss/mixins/_tokens.scss, v6 line).
+// Sync manually — do not diverge.
+
+// Output a token map as CSS custom properties
+
+// scss-docs-start mixin-tokens
+@mixin tokens($map) {
+  @each $prop, $value in $map {
+    #{$prop}: #{$value};
+  }
+}
+// scss-docs-end mixin-tokens

package/src/data-grid.ts

@@ -20,6 +20,7 @@ import {
 } from './util/drag'
 import { createScheduler, type Scheduler } from './engine/scheduler'
 import { createGridTable, subscribeToTableState } from './engine/table'
+import { isElementRTL, syncResizeDirection } from './util/direction'
 import { createGridVirtualizer, type GridVirtualizer } from './engine/virtualizer'
 import {
   DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_END_ICON, DEFAULT_MOVE_START_ICON,
@@ -134,6 +135,12 @@ const STATE_STORAGE_PREFIX = 'coreui-data-grid:'
 const STATE_AUTOSAVE_DEBOUNCE_MS = 250
 const HISTORY_LIMIT = 100
 
+// Under RTL the two horizontal keys point at the opposite logical neighbour.
+const INVERTED_ARROWS: Record<string, string | undefined> = {
+  ArrowLeft: 'ArrowRight',
+  ArrowRight: 'ArrowLeft'
+}
+
 const CELL_SELECTION_DIRECTIONS: Record<string, 'up' | 'down' | 'left' | 'right' | undefined> = {
   ArrowDown: 'down',
   ArrowLeft: 'left',
@@ -567,7 +574,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
   private _createTable(): DataGridTable {
     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()
@@ -1293,7 +1300,9 @@ private _undoStack: DataGridEditCommitEntry[] = []
     // Shift+arrow grows the range from its anchor and leaves focus put; a
     // plain arrow moves focus and collapses the range to the new cell.
     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()
@@ -1643,7 +1652,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
       pageStep: paginated ?
         this._table.store.state.pagination.pageSize :
         Math.max(1, viewportRows || rowCount),
-      paginated
+      paginated,
+      rtl: isElementRTL(this._element)
     }
   }
 
@@ -1975,6 +1985,11 @@ private _undoStack: DataGridEditCommitEntry[] = []
       event.preventDefault()
     }
 
+    // The direction table-core snapshotted at construction may be stale — an
+    // app that swaps language flips dir on a live grid. A resize is the only
+    // moment it matters, and it is rare enough to re-read here.
+    syncResizeDirection(this._table, this._element)
+
     const header = this._table.getHeaderGroups()[0]?.headers.find(item => item.column.id === key)
     header?.getResizeHandler()(event)
   }

package/src/engine/active-cell.ts

@@ -23,6 +23,9 @@ export interface ActiveCellContext {
   // page size (paginated).
   pageStep: number
   paginated: boolean
+  // Writing direction of the grid. Arrow keys are physical, column order is
+  // logical, so under RTL the two horizontal keys trade places.
+  rtl?: boolean
 }
 
 export interface NavigationResult {
@@ -72,7 +75,7 @@ export const resolveNavigation = (
   current: ActiveCell,
   context: ActiveCellContext
 ): NavigationResult | null => {
-  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
@@ -86,11 +89,15 @@ export const resolveNavigation = (
 
   switch (key) {
     case 'ArrowLeft': {
-      return cell(current.rowIndex, Math.max(columnIndex - 1, 0))
+      return rtl ?
+        cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn)) :
+        cell(current.rowIndex, Math.max(columnIndex - 1, 0))
     }
 
     case 'ArrowRight': {
-      return cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn))
+      return rtl ?
+        cell(current.rowIndex, Math.max(columnIndex - 1, 0)) :
+        cell(current.rowIndex, Math.min(columnIndex + 1, lastColumn))
     }
 
     case 'ArrowUp': {

package/src/engine/table.ts

@@ -7,6 +7,7 @@
 
 import { constructTable, type FilterFn } from '@tanstack/table-core'
 import { evaluateColumnFilter } from '../filters'
+import { isElementRTL } from '../util/direction'
 import type {
  DataGridColumn, DataGridColumnFilterValue, DataGridFeatures, DataGridItem, DataGridOptions,
  DataGridTable, DataGridTableState
@@ -27,7 +28,10 @@ const toTanStackFilterFn = (column: DataGridColumn): FilterFn<DataGridFeatures,
     evaluateColumnFilter(row.getValue(columnId), filterValue as DataGridColumnFilterValue, column.filterType)
 }
 
-export const createGridTable = (options: DataGridOptions): DataGridTable => {
+export const createGridTable = (
+  options: DataGridOptions,
+  getElement?: () => Element | null
+): DataGridTable => {
   const sortingOptions = typeof options.sorting === 'object' ? options.sorting : {}
   const sizingOptions = typeof options.columnSizing === 'object' ? options.columnSizing : {}
   const paginationOptions = typeof options.pagination === 'object' ? options.pagination : {}
@@ -112,6 +116,10 @@ export const createGridTable = (options: DataGridOptions): DataGridTable => {
       }
     }),
     columnResizeMode: sizingOptions.mode ?? 'onChange',
+    // Construction-time only — table-core copies the options object, so a
+    // getter here would never be re-read. A direction flipped later is picked
+    // up by refreshing this through setOptions when a resize starts.
+    columnResizeDirection: isElementRTL(getElement?.()) ? 'rtl' : 'ltr',
     data: serverSide ? [] : options.items,
     enableCellSelection: Boolean(options.cellSelection),
     enableColumnFilters: Boolean(options.columnFilters),

package/src/util/direction.ts

@@ -0,0 +1,37 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/direction.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+// Read from the element rather than the document: a grid can sit inside an RTL
+// subtree of an LTR page, which is why the vendored isRTL() (it checks
+// documentElement.dir) is not the helper for any of this.
+//
+// Angular prerenders in Node, where there is no getComputedStyle — and no
+// layout to have a direction. LTR is the right answer there: the server-side
+// pass emits logical markup either way, and the client corrects on hydration.
+export const isElementRTL = (element: Element | null | undefined): boolean =>
+  typeof getComputedStyle === 'function' && element ?
+    getComputedStyle(element).direction === 'rtl' :
+    false
+
+interface ResizeDirectionTable {
+  options: { columnResizeDirection?: 'ltr' | 'rtl' }
+  setOptions: (updater: (previous: { columnResizeDirection?: 'ltr' | 'rtl' }) => never) => void
+}
+
+// table-core copies the options object at construction, so the direction it
+// captured goes stale the moment an app swaps language on a live grid. A
+// resize is the only place the value is read, and starting one is rare enough
+// to re-read the element here.
+export const syncResizeDirection = (
+  table: ResizeDirectionTable,
+  element: Element | null | undefined
+): void => {
+  const direction = isElementRTL(element) ? 'rtl' : 'ltr'
+  if (table.options.columnResizeDirection !== direction) {
+    table.setOptions(previous => ({ ...previous, columnResizeDirection: direction }) as never)
+  }
+}

package/src/util/drag.ts

@@ -124,6 +124,17 @@ export const createDragController = (options: DragControllerOptions): DragContro
 
   let sourceHit: DragHit | null = null
   let dragging = false
+  // +1 while the axis runs the way the coordinates do, -1 under RTL, where the
+  // logical column order runs against increasing x. Negating the axis keeps
+  // every comparison below — the zone tiling, the hysteresis band, both edge
+  // clamps, `index > fromIndex` — written once, for one direction. Only the
+  // three places that touch pixels again convert back: the indicator's side,
+  // the preview transform and the settling ghost.
+  //
+  // Read from the grid's own computed direction rather than the document's: a
+  // grid can sit in an RTL subtree of an LTR page, which is exactly the case
+  // the vendored isRTL() cannot see.
+  let axisSign = 1
   let origin = { x: 0, y: 0 }
   let pointer = { x: 0, y: 0 }
   let drop: DragDrop | null = null
@@ -147,6 +158,18 @@ export const createDragController = (options: DragControllerOptions): DragContro
   const contentStarts = new Map<string, number>()
   const contentSizes = new Map<string, number>()
 
+  // A rect's logical start: its leading edge along the axis, in the negated
+  // space when the axis is negated, so the span stays [start, start + size].
+  const logicalStart = (rect: DOMRect): number => {
+    if (!horizontal) {
+      return rect.top
+    }
+
+    return axisSign === 1 ? rect.left : -rect.right
+  }
+
+  const logicalPointer = (): number => (horizontal ? pointer.x * axisSign : pointer.y)
+
   const stopAutoScroll = () => {
     if (scrollFrame) {
       cancelAnimationFrame(scrollFrame)
@@ -212,7 +235,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
     const rootRect = root.getBoundingClientRect()
     indicator.hidden = false
     if (horizontal) {
-      indicator.style.left = `${after ? rect.right : rect.left}px`
+      // `after` is logical; which pixel edge that is flips with the axis.
+      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 {
@@ -224,6 +249,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
 
   const startDrag = () => {
     dragging = true
+    axisSign = horizontal && getComputedStyle(root).direction === 'rtl' ? -1 : 1
     // Chrome focuses a button on mousedown (a press on a header lands on the
     // sort button), and tearing a FOCUSED element out of the DOM — which the
     // drop's header re-append does — makes the browser reset the scroller it
@@ -284,7 +310,11 @@ export const createDragController = (options: DragControllerOptions): DragContro
     }
 
     const rect = scrollElement.getBoundingClientRect()
-    return horizontal ? rect.left - scrollElement.scrollLeft : rect.top - scrollElement.scrollTop
+    // scrollLeft stays a physical axis in every engine (RTL just runs it
+    // negative), so it enters the negated space through the sign.
+    return horizontal ?
+      logicalStart(rect) - (axisSign * scrollElement.scrollLeft) :
+      rect.top - scrollElement.scrollTop
   }
 
   const captureItem = (id: string, origin: number): boolean => {
@@ -296,7 +326,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
     const rect = element.getBoundingClientRect()
     // Corrected by the applied delta for items first seen mid-preview (a row
     // revealed by auto-scroll); at drag start every delta is zero.
-    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
@@ -312,7 +342,7 @@ export const createDragController = (options: DragControllerOptions): DragContro
   }
 
   const updateTarget = () => {
-    const position = horizontal ? pointer.x : pointer.y
+    const position = logicalPointer()
     const origin = contentOrigin()
 
     const zones: Array<{ id: string; start: number; size: number }> = []
@@ -477,7 +507,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
       }
 
       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)
       }
 
@@ -531,7 +563,9 @@ export const createDragController = (options: DragControllerOptions): DragContro
     }
 
     const delta = previewDeltas.get(sourceHit.id) ?? 0
-    return horizontal ? { x: rect.left - delta, y: rect.top } : { x: rect.left, y: rect.top - delta }
+    return horizontal ?
+      { x: rect.left - (axisSign * delta), y: rect.top } :
+      { x: rect.left, y: rect.top - delta }
   }
 
   const cleanup = () => {