@coreui/data-grid 0.1.0-rc.0

package/src/dom/data.js

@@ -0,0 +1,59 @@
+// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/dom/data.js — sync manually
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI dom/data.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's dom/data.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+/**
+ * Constants
+ */
+
+const elementMap = new Map()
+
+export default {
+  set(element, key, instance) {
+    if (!elementMap.has(element)) {
+      elementMap.set(element, new Map())
+    }
+
+    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
+    if (!instanceMap.has(key) && instanceMap.size !== 0) {
+      // eslint-disable-next-line no-console
+      console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`)
+      return
+    }
+
+    instanceMap.set(key, instance)
+  },
+
+  get(element, key) {
+    if (elementMap.has(element)) {
+      return elementMap.get(element).get(key) || null
+    }
+
+    return null
+  },
+
+  remove(element, key) {
+    if (!elementMap.has(element)) {
+      return
+    }
+
+    const instanceMap = elementMap.get(element)
+
+    instanceMap.delete(key)
+
+    // free up element references if there are no instances left for an element
+    if (instanceMap.size === 0) {
+      elementMap.delete(element)
+    }
+  }
+}

package/src/dom/event-handler.d.ts

@@ -0,0 +1,11 @@
+// Hand-written types for the vendored event-handler.js (see the provenance header there)
+type EventHandlerFunction = (event: Event & Record<string, unknown>) => void
+
+declare const EventHandler: {
+  on(element: Element | Document | Window, event: string, handler: string | EventHandlerFunction, delegationFunction?: EventHandlerFunction): void
+  one(element: Element | Document | Window, event: string, handler: string | EventHandlerFunction, delegationFunction?: EventHandlerFunction): void
+  off(element: Element | Document | Window, originalTypeEvent: string, handler?: string | EventHandlerFunction, delegationFunction?: EventHandlerFunction): void
+  trigger(element: Element | Document | Window, event: string, args?: Record<string, unknown>): (Event & Record<string, unknown>) | null
+}
+
+export default EventHandler

package/src/dom/event-handler.js

@@ -0,0 +1,331 @@
+// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/dom/event-handler.js — sync manually
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI dom/event-handler.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's dom/event-handler.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { getjQuery } from '../util/index.js'
+
+/**
+ * Constants
+ */
+
+const namespaceRegex = /[^.]*(?=\..*)\.|.*/
+const stripNameRegex = /\..*/
+const stripUidRegex = /::\d+$/
+const eventRegistry = {} // Events storage
+let uidEvent = 1
+const customEvents = {
+  mouseenter: 'mouseover',
+  mouseleave: 'mouseout'
+}
+
+const nativeEvents = new Set([
+  'click',
+  'dblclick',
+  'mouseup',
+  'mousedown',
+  'contextmenu',
+  'mousewheel',
+  'DOMMouseScroll',
+  'mouseover',
+  'mouseout',
+  'mousemove',
+  'selectstart',
+  'selectend',
+  'keydown',
+  'keypress',
+  'keyup',
+  '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, uid) {
+  return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++
+}
+
+function getElementEvents(element) {
+  const uid = makeEventUid(element)
+
+  element.uidEvent = uid
+  eventRegistry[uid] = eventRegistry[uid] || {}
+
+  return eventRegistry[uid]
+}
+
+function bootstrapHandler(element, fn) {
+  return function handler(event) {
+    hydrateObj(event, { delegateTarget: element })
+
+    if (handler.oneOff) {
+      EventHandler.off(element, event.type, fn)
+    }
+
+    return fn.apply(element, [event])
+  }
+}
+
+function bootstrapDelegationHandler(element, selector, fn) {
+  return function handler(event) {
+    const domElements = element.querySelectorAll(selector)
+
+    for (let { target } = event; target && target !== this; target = target.parentNode) {
+      for (const domElement of domElements) {
+        if (domElement !== target) {
+          continue
+        }
+
+        hydrateObj(event, { delegateTarget: target })
+
+        if (handler.oneOff) {
+          EventHandler.off(element, event.type, selector, fn)
+        }
+
+        return fn.apply(target, [event])
+      }
+    }
+  }
+}
+
+function findHandler(events, callable, delegationSelector = null) {
+  return Object.values(events)
+    .find(event => event.callable === callable && event.delegationSelector === delegationSelector)
+}
+
+function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
+  const isDelegated = typeof handler === 'string'
+  // TODO: tooltip passes `false` instead of selector, so we need to check
+  const callable = isDelegated ? delegationFunction : (handler || delegationFunction)
+  let typeEvent = getTypeEvent(originalTypeEvent)
+
+  if (!nativeEvents.has(typeEvent)) {
+    typeEvent = originalTypeEvent
+  }
+
+  return [isDelegated, callable, typeEvent]
+}
+
+function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) {
+  if (typeof originalTypeEvent !== 'string' || !element) {
+    return
+  }
+
+  let [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+
+  // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
+  // this prevents the handler from being dispatched the same way as mouseover or mouseout does
+  if (originalTypeEvent in customEvents) {
+    const wrapFunction = fn => {
+      return function (event) {
+        if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))) {
+          return fn.call(this, event)
+        }
+      }
+    }
+
+    callable = wrapFunction(callable)
+  }
+
+  const events = getElementEvents(element)
+  const handlers = events[typeEvent] || (events[typeEvent] = {})
+  const previousFunction = findHandler(handlers, callable, isDelegated ? handler : null)
+
+  if (previousFunction) {
+    previousFunction.oneOff = previousFunction.oneOff && oneOff
+
+    return
+  }
+
+  const uid = makeEventUid(callable, originalTypeEvent.replace(namespaceRegex, ''))
+  const fn = isDelegated ?
+    bootstrapDelegationHandler(element, handler, callable) :
+    bootstrapHandler(element, callable)
+
+  fn.delegationSelector = isDelegated ? handler : null
+  fn.callable = callable
+  fn.oneOff = oneOff
+  fn.uidEvent = uid
+  handlers[uid] = fn
+
+  element.addEventListener(typeEvent, fn, isDelegated)
+}
+
+function removeHandler(element, events, typeEvent, handler, delegationSelector) {
+  const fn = findHandler(events[typeEvent], handler, delegationSelector)
+
+  if (!fn) {
+    return
+  }
+
+  element.removeEventListener(typeEvent, fn, Boolean(delegationSelector))
+  delete events[typeEvent][fn.uidEvent]
+}
+
+function removeNamespacedHandlers(element, events, typeEvent, namespace) {
+  const storeElementEvent = events[typeEvent] || {}
+
+  for (const [handlerKey, event] of Object.entries(storeElementEvent)) {
+    if (handlerKey.includes(namespace)) {
+      removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
+    }
+  }
+}
+
+function getTypeEvent(event) {
+  // 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, event, handler, delegationFunction) {
+    addHandler(element, event, handler, delegationFunction, false)
+  },
+
+  one(element, event, handler, delegationFunction) {
+    addHandler(element, event, handler, delegationFunction, true)
+  },
+
+  off(element, originalTypeEvent, handler, delegationFunction) {
+    if (typeof originalTypeEvent !== 'string' || !element) {
+      return
+    }
+
+    const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+    const inNamespace = typeEvent !== originalTypeEvent
+    const events = getElementEvents(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
+      }
+
+      removeHandler(element, events, typeEvent, callable, isDelegated ? handler : null)
+      return
+    }
+
+    if (isNamespace) {
+      for (const elementEvent of Object.keys(events)) {
+        removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.slice(1))
+      }
+    }
+
+    for (const [keyHandlers, event] of Object.entries(storeElementEvent)) {
+      const handlerKey = keyHandlers.replace(stripUidRegex, '')
+
+      if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
+        removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
+      }
+    }
+  },
+
+  trigger(element, event, args) {
+    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(obj, meta = {}) {
+  for (const [key, value] of Object.entries(meta)) {
+    try {
+      obj[key] = value
+    } catch {
+      Object.defineProperty(obj, key, {
+        configurable: true,
+        get() {
+          return value
+        }
+      })
+    }
+  }
+
+  return obj
+}
+
+export default EventHandler

package/src/dom/manipulator.d.ts

@@ -0,0 +1,9 @@
+// Hand-written types for the vendored manipulator.js (see the provenance header there)
+declare const Manipulator: {
+  setDataAttribute(element: Element, key: string, value: unknown): void
+  removeDataAttribute(element: Element, key: string): void
+  getDataAttributes(element: Element): Record<string, unknown>
+  getDataAttribute(element: Element, key: string): unknown
+}
+
+export default Manipulator

package/src/dom/manipulator.js

@@ -0,0 +1,75 @@
+// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/dom/manipulator.js — sync manually
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI dom/manipulator.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ *
+ * This is a modified version of the Bootstrap's dom/manipulator.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+function normalizeData(value) {
+  if (value === 'true') {
+    return true
+  }
+
+  if (value === 'false') {
+    return false
+  }
+
+  if (value === Number(value).toString()) {
+    return Number(value)
+  }
+
+  if (value === '' || value === 'null') {
+    return null
+  }
+
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  try {
+    return JSON.parse(decodeURIComponent(value))
+  } catch {
+    return value
+  }
+}
+
+function normalizeDataKey(key) {
+  return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)
+}
+
+const Manipulator = {
+  setDataAttribute(element, key, value) {
+    element.setAttribute(`data-coreui-${normalizeDataKey(key)}`, value)
+  },
+
+  removeDataAttribute(element, key) {
+    element.removeAttribute(`data-coreui-${normalizeDataKey(key)}`)
+  },
+
+  getDataAttributes(element) {
+    if (!element) {
+      return {}
+    }
+
+    const attributes = {}
+    const coreuiKeys = Object.keys(element.dataset).filter(key => key.startsWith('coreui') && !key.startsWith('coreuiConfig'))
+
+    for (const key of coreuiKeys) {
+      let pureKey = key.replace(/^coreui/, '')
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1)
+      attributes[pureKey] = normalizeData(element.dataset[key])
+    }
+
+    return attributes
+  },
+
+  getDataAttribute(element, key) {
+    return normalizeData(element.getAttribute(`data-coreui-${normalizeDataKey(key)}`))
+  }
+}
+
+export default Manipulator

package/src/engine/active-cell.ts

@@ -0,0 +1,195 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid engine/active-cell.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+// The cellNavigation substrate: one grid-owned active cell (roving tabindex).
+// rowIndex is an index into the current row model (page-local under
+// pagination); -1 addresses the header label row. Focus is derived from this
+// state, never from the DOM - the body applies it after every render pass.
+
+export interface ActiveCell {
+  rowIndex: number
+  columnId: string
+}
+
+export interface ActiveCellContext {
+  // Visible leaf column ids in visual order (pinning + order + visibility).
+  columnIds: string[]
+  rowCount: number
+  // Rows per PageUp/PageDown step: visible viewport rows (virtualized) or the
+  // page size (paginated).
+  pageStep: number
+  paginated: boolean
+}
+
+export interface NavigationResult {
+  cell: ActiveCell
+  pageDelta?: -1 | 1
+}
+
+const HEADER_ROW_INDEX = -1
+
+const clampColumn = (columnId: string, columnIds: string[]): string | null => {
+  if (columnIds.includes(columnId)) {
+    return columnId
+  }
+
+  return columnIds.length > 0 ? columnIds[0] : null
+}
+
+// Nulls the cell when the grid has no addressable cells; otherwise snaps it
+// back into the current column set and row range.
+export const clampActiveCell = (cell: ActiveCell | null, context: ActiveCellContext): ActiveCell | null => {
+  if (!cell) {
+    return null
+  }
+
+  const columnId = clampColumn(cell.columnId, context.columnIds)
+  if (columnId === null) {
+    return null
+  }
+
+  const maxRow = context.rowCount - 1
+  const rowIndex = cell.rowIndex < 0 ?
+    HEADER_ROW_INDEX :
+    Math.max(0, Math.min(cell.rowIndex, Math.max(maxRow, 0)))
+
+  if (rowIndex >= 0 && maxRow < 0) {
+    return { rowIndex: HEADER_ROW_INDEX, columnId }
+  }
+
+  return { rowIndex, columnId }
+}
+
+// The APG key decision table - a pure function so every edition asserts
+// identical outcomes. Returns null for keys the grid does not handle.
+export const resolveNavigation = (
+  key: string,
+  ctrlKey: boolean,
+  current: ActiveCell,
+  context: ActiveCellContext
+): NavigationResult | null => {
+  const { columnIds, rowCount, pageStep, paginated } = context
+  const columnIndex = columnIds.indexOf(current.columnId)
+  if (columnIndex === -1 || columnIds.length === 0) {
+    return null
+  }
+
+  const lastRow = rowCount - 1
+  const lastColumn = columnIds.length - 1
+  const cell = (rowIndex: number, index: number): NavigationResult => ({
+    cell: { rowIndex, 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 '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': {
+      if (ctrlKey) {
+        return cell(rowCount > 0 ? 0 : HEADER_ROW_INDEX, 0)
+      }
+
+      return cell(current.rowIndex, 0)
+    }
+
+    case 'End': {
+      if (ctrlKey) {
+        return cell(rowCount > 0 ? lastRow : HEADER_ROW_INDEX, lastColumn)
+      }
+
+      return cell(current.rowIndex, lastColumn)
+    }
+
+    case 'PageUp': {
+      if (paginated && current.rowIndex === 0) {
+        return { ...cell(0, columnIndex), pageDelta: -1 }
+      }
+
+      return cell(Math.max(current.rowIndex - pageStep, 0), columnIndex)
+    }
+
+    case 'PageDown': {
+      if (paginated && current.rowIndex === lastRow) {
+        return { ...cell(lastRow, columnIndex), pageDelta: 1 }
+      }
+
+      return cell(Math.min(current.rowIndex + pageStep, lastRow), columnIndex)
+    }
+
+    default: {
+      return null
+    }
+  }
+}
+
+export interface ActiveCellManager {
+  get: () => ActiveCell | null
+  // Stores the cell; focus: true marks a pending focus request the next
+  // render pass consumes (set false for pointer-driven activation, where the
+  // browser already moved focus).
+  set: (cell: ActiveCell, options?: { focus?: boolean }) => void
+  clamp: (context: ActiveCellContext) => void
+  reset: () => void
+  consumeFocusRequest: () => boolean
+}
+
+export const createActiveCellManager = (onChange: () => void): ActiveCellManager => {
+  let current: ActiveCell | null = null
+  let focusRequested = false
+
+  return {
+    get: () => current,
+    set(cell, options = {}) {
+      const changed = !current || current.rowIndex !== cell.rowIndex || current.columnId !== cell.columnId
+      current = cell
+      if (options.focus) {
+        focusRequested = true
+      }
+
+      if (changed || options.focus) {
+        onChange()
+      }
+    },
+    clamp(context) {
+      const next = clampActiveCell(current, context)
+      const changed = Boolean(current) !== Boolean(next) ||
+        (current && next && (current.rowIndex !== next.rowIndex || current.columnId !== next.columnId))
+      current = next
+      if (changed) {
+        onChange()
+      }
+    },
+    reset() {
+      if (current) {
+        current = null
+        focusRequested = false
+        onChange()
+      }
+    },
+    consumeFocusRequest() {
+      if (!focusRequested) {
+        return false
+      }
+
+      focusRequested = false
+      return true
+    }
+  }
+}