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

package/src/dom/{data.js → data.ts}

@@ -1,7 +1,7 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/dom/data.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/dom/data.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI dom/data.js
+ * CoreUI dom/data.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
  * This is a modified version of the Bootstrap's dom/data.js
@@ -13,15 +13,15 @@
  * Constants
  */
 
-const elementMap = new Map()
+const elementMap = new Map<Element, Map<string, unknown>>()
 
 export default {
-  set(element, key, instance) {
+  set(element: Element, key: string, instance: unknown): void {
     if (!elementMap.has(element)) {
       elementMap.set(element, new Map())
     }
 
-    const instanceMap = elementMap.get(element)
+    const instanceMap = elementMap.get(element)!
 
     // make it clear we only want one instance per element
     // can be removed later when multiple key/instances are fine to be used
@@ -34,20 +34,23 @@ export default {
     instanceMap.set(key, instance)
   },
 
-  get(element, key) {
-    if (elementMap.has(element)) {
-      return elementMap.get(element).get(key) || null
+  // Callers pass the result of getElement(), which can be null; Map.has(null)
+  // is simply false at runtime, so the parameter is widened without adding a
+  // guard that would change the emitted code.
+  get(element: Element | null, key: string): any {
+    if (elementMap.has(element as Element)) {
+      return elementMap.get(element as Element)!.get(key) || null
     }
 
     return null
   },
 
-  remove(element, key) {
+  remove(element: Element, key: string): void {
     if (!elementMap.has(element)) {
       return
     }
 
-    const instanceMap = elementMap.get(element)
+    const instanceMap = elementMap.get(element)!
 
     instanceMap.delete(key)
 

package/src/dom/event-handler.ts

@@ -0,0 +1,380 @@
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/dom/event-handler.ts — sync manually
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI dom/event-handler.ts
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's dom/event-handler.ts
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { getjQuery } from '../util/index.js'
+
+/**
+ * Types
+ */
+
+type CoreUIEvent = Event & Record<string, any>
+
+type EventCallable = (this: any, event: CoreUIEvent) => any
+
+interface WrappedHandler {
+  (this: Element, event: Event): any
+  oneOff?: boolean
+  uidEvent?: string | number
+  callable?: EventCallable
+  delegationSelector?: string | null
+  handlerTypeEvent?: string
+}
+
+interface NormalizedParameters {
+  isDelegated: boolean
+  callable: EventCallable
+  typeEvent: string
+  handlerTypeEvent: string
+}
+
+type ElementEvents = Record<string, Record<string, WrappedHandler>>
+
+/**
+ * Constants
+ */
+
+const namespaceRegex = /[^.]*(?=\..*)\.|.*/
+const stripNameRegex = /\..*/
+const stripUidRegex = /::\d+$/
+const eventRegistry: Record<string | number, ElementEvents> = {} // Events storage
+let uidEvent = 1
+const customEvents: Record<string, string> = {
+  mouseenter: 'mouseover',
+  mouseleave: 'mouseout'
+}
+
+const nativeEvents = new Set([
+  'click',
+  'dblclick',
+  'mouseup',
+  'mousedown',
+  'contextmenu',
+  'mousewheel',
+  'DOMMouseScroll',
+  'mouseover',
+  'mouseout',
+  'mousemove',
+  'selectstart',
+  'selectend',
+  'keydown',
+  'keypress',
+  'keyup',
+  'beforeinput',
+  'copy',
+  'cut',
+  'paste',
+  'orientationchange',
+  'touchstart',
+  'touchmove',
+  'touchend',
+  'touchcancel',
+  'pointerdown',
+  'pointermove',
+  'pointerup',
+  'pointerleave',
+  'pointercancel',
+  // Local addition over the coreui-pro source: HTML5 drag & drop events used
+  // by the data grid's column reordering.
+  'drag',
+  'dragstart',
+  'dragend',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+  'gesturestart',
+  'gesturechange',
+  'gestureend',
+  'focus',
+  'blur',
+  'change',
+  'input',
+  'reset',
+  'select',
+  'submit',
+  'focusin',
+  'focusout',
+  'load',
+  'unload',
+  'beforeunload',
+  'resize',
+  'move',
+  'DOMContentLoaded',
+  'readystatechange',
+  'error',
+  'abort',
+  'scroll'
+])
+
+/**
+ * Private methods
+ */
+
+function makeEventUid(element: any, uid?: string): string | number {
+  return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++
+}
+
+function getElementEvents(element: Element & { uidEvent?: string | number }): ElementEvents {
+  const uid = makeEventUid(element)
+
+  element.uidEvent = uid
+  eventRegistry[uid] = eventRegistry[uid] || {}
+
+  return eventRegistry[uid]
+}
+
+// `mouseenter` and `mouseleave` ride on `mouseover` and `mouseout`, which also fire when
+// the pointer moves between descendants of the listening element. Drop those events, so the
+// handler only sees the pointer entering or leaving `delegateTarget` itself.
+// `Node.contains()` is inclusive, so this also covers `relatedTarget === delegateTarget`.
+function isMouseEventWithinTarget(event: CoreUIEvent): boolean {
+  const { delegateTarget, relatedTarget } = event
+
+  return Boolean(relatedTarget && delegateTarget.contains(relatedTarget))
+}
+
+function bootstrapHandler(element: Element, fn: EventCallable, handlerTypeEvent: string): WrappedHandler {
+  const isCustomMouseEvent = handlerTypeEvent in customEvents
+
+  return function handler(event: Event) {
+    const coreuiEvent = hydrateObj(event, { delegateTarget: element })
+
+    if (isCustomMouseEvent && isMouseEventWithinTarget(coreuiEvent)) {
+      return
+    }
+
+    if ((handler as WrappedHandler).oneOff) {
+      EventHandler.off(element, handlerTypeEvent, fn)
+    }
+
+    return fn.apply(element, [coreuiEvent])
+  } as WrappedHandler
+}
+
+function bootstrapDelegationHandler(element: Element, selector: string, fn: EventCallable, handlerTypeEvent: string): WrappedHandler {
+  const isCustomMouseEvent = handlerTypeEvent in customEvents
+
+  return function handler(this: Element, event: Event) {
+    const domElements = element.querySelectorAll(selector)
+
+    for (let { target } = event; target && target !== this; target = (target as Node).parentNode) {
+      for (const domElement of domElements) {
+        if (domElement !== target) {
+          continue
+        }
+
+        const coreuiEvent = hydrateObj(event, { delegateTarget: target })
+
+        if (isCustomMouseEvent && isMouseEventWithinTarget(coreuiEvent)) {
+          return
+        }
+
+        if ((handler as WrappedHandler).oneOff) {
+          EventHandler.off(element, handlerTypeEvent, selector, fn)
+        }
+
+        return fn.apply(target, [coreuiEvent])
+      }
+    }
+  } as WrappedHandler
+}
+
+function findHandler(events: Record<string, WrappedHandler>, callable: EventCallable, handlerTypeEvent: string, delegationSelector: string | null = null): WrappedHandler | undefined {
+  return Object.values(events)
+    .find(event => event.callable === callable && event.handlerTypeEvent === handlerTypeEvent && event.delegationSelector === delegationSelector)
+}
+
+// `typeEvent` is the DOM event type the listener is registered under. `handlerTypeEvent` is
+// the type the caller asked for. The two differ only for `mouseenter` and `mouseleave`, which
+// the registry must keep apart from the `mouseover` and `mouseout` listeners they share.
+function normalizeParameters(originalTypeEvent: string, handler?: string | EventCallable, delegationFunction?: EventCallable): NormalizedParameters {
+  const isDelegated = typeof handler === 'string'
+  // TODO: tooltip passes `false` instead of selector, so we need to check
+  const callable = (isDelegated ? delegationFunction : (handler || delegationFunction)) as EventCallable
+  // Strip the namespace to get the plain event ('click.coreui.button' --> 'click')
+  const baseTypeEvent = originalTypeEvent.replace(stripNameRegex, '')
+  let typeEvent = customEvents[baseTypeEvent] || baseTypeEvent
+
+  if (!nativeEvents.has(typeEvent)) {
+    typeEvent = originalTypeEvent
+  }
+
+  const handlerTypeEvent = baseTypeEvent in customEvents ? baseTypeEvent : typeEvent
+
+  return {
+    isDelegated, callable, typeEvent, handlerTypeEvent
+  }
+}
+
+function addHandler(element: Element, originalTypeEvent: string, handler?: string | EventCallable, delegationFunction?: EventCallable, oneOff?: boolean): void {
+  if (typeof originalTypeEvent !== 'string' || !element) {
+    return
+  }
+
+  const { isDelegated, callable, typeEvent, handlerTypeEvent } = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+  const events = getElementEvents(element)
+  const handlers = events[typeEvent] || (events[typeEvent] = {})
+  const previousFunction = findHandler(handlers, callable, handlerTypeEvent, isDelegated ? (handler as string) : null)
+
+  if (previousFunction) {
+    previousFunction.oneOff = previousFunction.oneOff && oneOff
+
+    return
+  }
+
+  const uid = makeEventUid(callable, originalTypeEvent.replace(namespaceRegex, ''))
+  const fn = isDelegated ?
+    bootstrapDelegationHandler(element, handler as string, callable, handlerTypeEvent) :
+    bootstrapHandler(element, callable, handlerTypeEvent)
+
+  fn.delegationSelector = isDelegated ? (handler as string) : null
+  fn.callable = callable
+  fn.handlerTypeEvent = handlerTypeEvent
+  fn.oneOff = oneOff
+  fn.uidEvent = uid
+  handlers[uid] = fn
+
+  element.addEventListener(typeEvent, fn, isDelegated)
+}
+
+function removeHandler(element: Element, events: ElementEvents, typeEvent: string, handler: WrappedHandler): void {
+  element.removeEventListener(typeEvent, handler, Boolean(handler.delegationSelector))
+  delete events[typeEvent][handler.uidEvent!]
+}
+
+function removeNamespacedHandlers(element: Element, events: ElementEvents, typeEvent: string, namespace: string): void {
+  const storeElementEvent = events[typeEvent] || {}
+
+  for (const [handlerKey, event] of Object.entries(storeElementEvent)) {
+    if (handlerKey.includes(namespace)) {
+      removeHandler(element, events, typeEvent, event)
+    }
+  }
+}
+
+function getTypeEvent(event: string): string {
+  // allow to get the native events from namespaced events ('click.coreui.button' --> 'click')
+  event = event.replace(stripNameRegex, '')
+  return customEvents[event] || event
+}
+
+const EventHandler = {
+  on(element: EventTarget | null, event: string, handler?: string | EventCallable, delegationFunction?: EventCallable): void {
+    addHandler(element as Element, event, handler, delegationFunction, false)
+  },
+
+  one(element: EventTarget | null, event: string, handler?: string | EventCallable, delegationFunction?: EventCallable): void {
+    addHandler(element as Element, event, handler, delegationFunction, true)
+  },
+
+  off(element: EventTarget | null, originalTypeEvent: string, handler?: string | EventCallable, delegationFunction?: EventCallable): void {
+    if (typeof originalTypeEvent !== 'string' || !element) {
+      return
+    }
+
+    const { isDelegated, callable, typeEvent, handlerTypeEvent } = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+    // The caller gave a namespace when neither event type matches what they passed in.
+    // `handlerTypeEvent` must take part, or plain `mouseenter` looks namespaced next to `mouseover`.
+    const inNamespace = typeEvent !== originalTypeEvent && handlerTypeEvent !== originalTypeEvent
+    const events = getElementEvents(element as Element)
+    const storeElementEvent = events[typeEvent] || {}
+    const isNamespace = originalTypeEvent.startsWith('.')
+
+    if (typeof callable !== 'undefined') {
+      // Simplest case: handler is passed, remove that listener ONLY.
+      if (!Object.keys(storeElementEvent).length) {
+        return
+      }
+
+      const fn = findHandler(storeElementEvent, callable, handlerTypeEvent, isDelegated ? (handler as string) : null)
+
+      if (fn) {
+        removeHandler(element as Element, events, typeEvent, fn)
+      }
+
+      return
+    }
+
+    if (isNamespace) {
+      for (const elementEvent of Object.keys(events)) {
+        removeNamespacedHandlers(element as Element, events, elementEvent, originalTypeEvent.slice(1))
+      }
+    }
+
+    for (const [keyHandlers, event] of Object.entries(storeElementEvent)) {
+      const handlerKey = keyHandlers.replace(stripUidRegex, '')
+
+      if (event.handlerTypeEvent === handlerTypeEvent && (!inNamespace || originalTypeEvent.includes(handlerKey))) {
+        removeHandler(element as Element, events, typeEvent, event)
+      }
+    }
+  },
+
+  trigger(element: EventTarget | null, event: string, args?: Record<string, unknown>): CoreUIEvent | null {
+    if (typeof event !== 'string' || !element) {
+      return null
+    }
+
+    const $ = getjQuery()
+    const typeEvent = getTypeEvent(event)
+    const inNamespace = event !== typeEvent
+
+    let jQueryEvent = null
+    let bubbles = true
+    let nativeDispatch = true
+    let defaultPrevented = false
+
+    if (inNamespace && $) {
+      jQueryEvent = $.Event(event, args)
+
+      $(element).trigger(jQueryEvent)
+      bubbles = !jQueryEvent.isPropagationStopped()
+      nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
+      defaultPrevented = jQueryEvent.isDefaultPrevented()
+    }
+
+    const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
+
+    if (defaultPrevented) {
+      evt.preventDefault()
+    }
+
+    if (nativeDispatch) {
+      element.dispatchEvent(evt)
+    }
+
+    if (evt.defaultPrevented && jQueryEvent) {
+      jQueryEvent.preventDefault()
+    }
+
+    return evt
+  }
+}
+
+function hydrateObj<T extends object>(obj: T, meta: Record<string, unknown> = {}): T & Record<string, any> {
+  for (const [key, value] of Object.entries(meta)) {
+    try {
+      (obj as Record<string, unknown>)[key] = value
+    } catch {
+      Object.defineProperty(obj, key, {
+        configurable: true,
+        get() {
+          return value
+        }
+      })
+    }
+  }
+
+  return obj
+}
+
+export default EventHandler
+export type { CoreUIEvent, EventCallable }

package/src/dom/{manipulator.js → manipulator.ts}

@@ -1,15 +1,15 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/dom/manipulator.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/dom/manipulator.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI dom/manipulator.js
+ * CoreUI dom/manipulator.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This is a modified version of the Bootstrap's dom/manipulator.js
+ * This is a modified version of the Bootstrap's dom/manipulator.ts
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-function normalizeData(value) {
+function normalizeData(value: string | null | undefined): unknown {
   if (value === 'true') {
     return true
   }
@@ -37,25 +37,25 @@ function normalizeData(value) {
   }
 }
 
-function normalizeDataKey(key) {
+function normalizeDataKey(key: string): string {
   return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)
 }
 
 const Manipulator = {
-  setDataAttribute(element, key, value) {
-    element.setAttribute(`data-coreui-${normalizeDataKey(key)}`, value)
+  setDataAttribute(element: Element, key: string, value: unknown): void {
+    element.setAttribute(`data-coreui-${normalizeDataKey(key)}`, value as string)
   },
 
-  removeDataAttribute(element, key) {
+  removeDataAttribute(element: Element, key: string): void {
     element.removeAttribute(`data-coreui-${normalizeDataKey(key)}`)
   },
 
-  getDataAttributes(element) {
+  getDataAttributes(element: HTMLElement | null): Record<string, unknown> {
     if (!element) {
       return {}
     }
 
-    const attributes = {}
+    const attributes: Record<string, unknown> = {}
     const coreuiKeys = Object.keys(element.dataset).filter(key => key.startsWith('coreui') && !key.startsWith('coreuiConfig'))
 
     for (const key of coreuiKeys) {
@@ -67,7 +67,7 @@ const Manipulator = {
     return attributes
   },
 
-  getDataAttribute(element, key) {
+  getDataAttribute(element: Element, key: string): unknown {
     return normalizeData(element.getAttribute(`data-coreui-${normalizeDataKey(key)}`))
   }
 }

package/src/engine/data-source.ts

@@ -12,7 +12,10 @@ const FETCH_DEBOUNCE_MS = 100
 export interface GridDataSourceContext {
   getRequest: () => DataGridDataRequest
   onError: (error: unknown) => void
-  onLoad: (response: DataGridDataResponse) => void
+  // The request is handed back so an appending consumer can tell a first page
+  // (replace) from a follow-up one (append) without re-reading table state,
+  // which may already have moved on.
+  onLoad: (response: DataGridDataResponse, request: DataGridDataRequest) => void
   onLoadingChange: (loading: boolean) => void
   provider: (request: DataGridDataRequest) => Promise<DataGridDataResponse>
 }
@@ -36,12 +39,13 @@ export const createDataSource = (context: GridDataSourceContext): GridDataSource
         context.onLoadingChange(true)
 
         try {
-          const response = await context.provider(context.getRequest())
+          const request = context.getRequest()
+          const response = await context.provider(request)
           if (id !== requestId) {
             return
           }
 
-          context.onLoad(response)
+          context.onLoad(response, request)
         } catch (error) {
           if (id !== requestId) {
             return

package/src/engine/features-lite.ts

@@ -0,0 +1,47 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/features-lite.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import {
+  columnFilteringFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString as includesStringFilterFn,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric as alphanumericSortFn,
+  sortFn_datetime as datetimeSortFn,
+  sortFn_text as textSortFn,
+  tableFeatures
+} from '@tanstack/table-core'
+import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'
+
+// The smallest set the grid renders with: sorting, filtering (incl. the
+// toolbar search) and pagination. Everything column-shape related (visibility,
+// ordering, pinning, sizing) and selection/faceting stays out - the grid
+// falls back to core APIs for those. sortFns/filterFns stay in so a lite grid
+// sorts and searches exactly like a full one. Kept in its own module so the
+// lite bundle entry never reaches the full set.
+export const dataGridLiteFeatures = tableFeatures({
+  coreReactivityFeature: storeReactivityBindings(),
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: includesStringFilterFn },
+  sortFns: {
+    alphanumeric: alphanumericSortFn,
+    datetime: datetimeSortFn,
+    text: textSortFn
+  }
+})
+
+export type DataGridLiteFeatures = typeof dataGridLiteFeatures

package/src/engine/features.ts

@@ -0,0 +1,68 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/features.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import {
+  cellSelectionFeature,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString as includesStringFilterFn,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric as alphanumericSortFn,
+  sortFn_datetime as datetimeSortFn,
+  sortFn_text as textSortFn,
+  tableFeatures
+} from '@tanstack/table-core'
+import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'
+
+// v9 exposes an API only when its feature is registered, so this is the full
+// set of table-core behavior the grid can reach - options gate the behavior,
+// not the registration. Prerequisites must precede dependents: sizing before
+// resizing, filtering before global filtering and faceting, every row-model
+// slot after its feature.
+export const dataGridFeatures = tableFeatures({
+  coreReactivityFeature: storeReactivityBindings(),
+  cellSelectionFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnFacetingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  filterFns: { includesString: includesStringFilterFn },
+  // The names column.getAutoSortFn() resolves for sampled value types; without
+  // them every column would silently fall back to the basic comparator.
+  sortFns: {
+    alphanumeric: alphanumericSortFn,
+    datetime: datetimeSortFn,
+    text: textSortFn
+  }
+})
+
+export type DataGridFeatures = typeof dataGridFeatures