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

package/src/util/export-table.ts

@@ -0,0 +1,86 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/export-table.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridItem } from '../types'
+
+// Typed structurally, not as one edition's table: TFeatures is invariant in v9,
+// so the vanilla grid and each framework binding (whose adapter registers its
+// own reactivity feature) have mutually incompatible Table types even though
+// they expose the same row/column surface an export needs. Everything beyond
+// the core row model is optional - a reduced feature set exports whatever
+// layout/scope its features can express and falls back to core for the rest.
+
+export interface ExportColumnMeta {
+  label?: string
+  formatter?: (value: unknown, item: DataGridItem) => string
+  width?: number
+}
+
+export interface ExportColumn {
+  id: string
+  columnDef: { meta?: unknown }
+}
+
+export interface ExportRow {
+  original: DataGridItem
+  getValue: (columnId: string) => unknown
+}
+
+export interface ExportTable {
+  getAllLeafColumns: () => ExportColumn[]
+  getCenterVisibleLeafColumns?: () => ExportColumn[]
+  getCoreRowModel: () => { rows: ExportRow[] }
+  getEndVisibleLeafColumns?: () => ExportColumn[]
+  getFilteredRowModel?: () => { rows: ExportRow[] }
+  getSelectedRowModel?: () => { rows: ExportRow[] }
+  getSortedRowModel?: () => { rows: ExportRow[] }
+  getStartVisibleLeafColumns?: () => ExportColumn[]
+  getVisibleLeafColumns?: () => ExportColumn[]
+}
+
+export type ExportScope = 'filtered' | 'all' | 'selected'
+
+export const rowsFor = (table: ExportTable, scope: ExportScope | undefined): ExportRow[] => {
+  if (scope === 'all') {
+    return table.getCoreRowModel().rows
+  }
+
+  if (scope === 'selected') {
+    return table.getSelectedRowModel?.().rows ?? []
+  }
+
+  return (table.getSortedRowModel ?? table.getFilteredRowModel ?? table.getCoreRowModel)().rows
+}
+
+// Exports follow the rendered layout: pinning, column order and visibility -
+// as far as the registered features track them.
+export const columnsFor = (table: ExportTable): ExportColumn[] => {
+  if (table.getCenterVisibleLeafColumns) {
+    return [
+      ...(table.getStartVisibleLeafColumns?.() ?? []),
+      ...table.getCenterVisibleLeafColumns(),
+      ...(table.getEndVisibleLeafColumns?.() ?? [])
+    ]
+  }
+
+  return table.getVisibleLeafColumns?.() ?? table.getAllLeafColumns()
+}
+
+export const headerFor = (column: ExportColumn): string =>
+  String((column.columnDef.meta as ExportColumnMeta)?.label ?? column.id)
+
+// A column formatter is author intent and matches what the grid renders, so
+// exports honor it - which also means a formatted number leaves as text.
+export const formatterFor = (column: ExportColumn): ExportColumnMeta['formatter'] =>
+  (column.columnDef.meta as ExportColumnMeta)?.formatter
+
+// The author's declared column width in px. Deliberately NOT column.getSize():
+// that returns table-core's 150 px default whenever the grid does not track
+// sizing, which would force an arbitrary width on every exported column. A
+// consequence is that an interactive resize is not carried into the export.
+export const widthFor = (column: ExportColumn): number | undefined =>
+  (column.columnDef.meta as ExportColumnMeta)?.width

package/src/util/{index.js → index.ts}

@@ -1,14 +1,30 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/util/index.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/util/index.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI util/index.js
+ * CoreUI util/index.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This is a modified version of the Bootstrap's util/index.js
+ * This is a modified version of the Bootstrap's util/index.ts
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
+/**
+ * Types
+ */
+
+// The jQuery bridge is untyped on purpose: jQuery is optional at runtime and we
+// only ever touch `.jquery`, index 0, and the plugin registration surface.
+type JQueryLike = { jquery?: unknown, [index: number]: HTMLElement }
+type JQueryStatic = ((selector: unknown) => any) & Record<string, any> & { fn: Record<string, any> }
+type JQueryPlugin = { NAME: string, jQueryInterface: (...args: any[]) => unknown }
+
+declare global {
+  interface Window {
+    jQuery?: JQueryStatic
+  }
+}
+
 const MAX_UID = 1_000_000
 const MILLISECONDS_MULTIPLIER = 1000
 const TRANSITION_END = 'transitionend'
@@ -18,29 +34,31 @@ const TRANSITION_END = 'transitionend'
  * @param {string} selector
  * @returns {string}
  */
-const parseSelector = selector => {
-  if (selector && window.CSS && window.CSS.escape) {
+const parseSelector = (selector: string): string => {
+  // The `window.CSS` checks guard against ancient browsers, so check them as
+  // untyped values instead of letting tsc call them always-defined
+  if (selector && (window as any).CSS && (window as any).CSS.escape) {
     // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
-    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
+    selector = selector.replace(/#([^\s"#']+)/g, (match, id: string) => `#${CSS.escape(id)}`)
   }
 
   return selector
 }
 
 // Shout-out Angus Croll (https://goo.gl/pxwQGp)
-const toType = object => {
+const toType = (object: unknown): string => {
   if (object === null || object === undefined) {
     return `${object}`
   }
 
-  return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)[1].toLowerCase()
+  return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)![1].toLowerCase()
 }
 
 /**
  * Public Util API
  */
 
-const getUID = prefix => {
+const getUID = (prefix: string): string => {
   do {
     prefix += Math.floor(Math.random() * MAX_UID)
   } while (document.getElementById(prefix))
@@ -48,7 +66,7 @@ const getUID = prefix => {
   return prefix
 }
 
-const getTransitionDurationFromElement = element => {
+const getTransitionDurationFromElement = (element: Element | null): number => {
   if (!element) {
     return 0
   }
@@ -71,26 +89,26 @@ const getTransitionDurationFromElement = element => {
   return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER
 }
 
-const triggerTransitionEnd = element => {
+const triggerTransitionEnd = (element: Element): void => {
   element.dispatchEvent(new Event(TRANSITION_END))
 }
 
-const isElement = object => {
+const isElement = (object: unknown): object is Element => {
   if (!object || typeof object !== 'object') {
     return false
   }
 
-  if (typeof object.jquery !== 'undefined') {
-    object = object[0]
+  if (typeof (object as JQueryLike).jquery !== 'undefined') {
+    object = (object as JQueryLike)[0]
   }
 
-  return typeof object.nodeType !== 'undefined'
+  return typeof (object as Element).nodeType !== 'undefined'
 }
 
-const getElement = object => {
+const getElement = (object: unknown): HTMLElement | null => {
   // it's a jQuery object or a node element
   if (isElement(object)) {
-    return object.jquery ? object[0] : object
+    return (object as unknown as JQueryLike).jquery ? (object as unknown as JQueryLike)[0] : object as HTMLElement
   }
 
   if (typeof object === 'string' && object.length > 0) {
@@ -100,7 +118,7 @@ const getElement = object => {
   return null
 }
 
-const isVisible = element => {
+const isVisible = (element: unknown): boolean => {
   if (!isElement(element) || element.getClientRects().length === 0) {
     return false
   }
@@ -127,7 +145,7 @@ const isVisible = element => {
   return elementIsVisible
 }
 
-const isDisabled = element => {
+const isDisabled = (element: Element | null | undefined): boolean => {
   if (!element || element.nodeType !== Node.ELEMENT_NODE) {
     return true
   }
@@ -136,14 +154,14 @@ const isDisabled = element => {
     return true
   }
 
-  if (typeof element.disabled !== 'undefined') {
-    return element.disabled
+  if (typeof (element as HTMLInputElement).disabled !== 'undefined') {
+    return (element as HTMLInputElement).disabled
   }
 
   return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'
 }
 
-const findShadowRoot = element => {
+const findShadowRoot = (element: Node): ShadowRoot | null => {
   if (!document.documentElement.attachShadow) {
     return null
   }
@@ -166,7 +184,7 @@ const findShadowRoot = element => {
   return findShadowRoot(element.parentNode)
 }
 
-const noop = () => {}
+const noop = (): void => {}
 
 /**
  * Trick to restart an element's animation
@@ -176,11 +194,11 @@ const noop = () => {}
  *
  * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
  */
-const reflow = element => {
-  element.offsetHeight // eslint-disable-line no-unused-expressions
+const reflow = (element: HTMLElement): void => {
+  element.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions
 }
 
-const getjQuery = () => {
+const getjQuery = (): JQueryStatic | null => {
   if (window.jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
     return window.jQuery
   }
@@ -188,9 +206,9 @@ const getjQuery = () => {
   return null
 }
 
-const DOMContentLoadedCallbacks = []
+const DOMContentLoadedCallbacks: Array<() => void> = []
 
-const onDOMContentLoaded = callback => {
+const onDOMContentLoaded = (callback: () => void): void => {
   if (document.readyState === 'loading') {
     // add listener on the first call when the document is in loading state
     if (!DOMContentLoadedCallbacks.length) {
@@ -207,9 +225,9 @@ const onDOMContentLoaded = callback => {
   }
 }
 
-const isRTL = () => document.documentElement.dir === 'rtl'
+const isRTL = (): boolean => document.documentElement.dir === 'rtl'
 
-const defineJQueryPlugin = plugin => {
+const defineJQueryPlugin = (plugin: JQueryPlugin): void => {
   onDOMContentLoaded(() => {
     const $ = getjQuery()
     /* istanbul ignore if */
@@ -226,11 +244,11 @@ const defineJQueryPlugin = plugin => {
   })
 }
 
-const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
-  return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue
+const execute = <T = any>(possibleCallback: T | ((...functionArgs: any[]) => T), args: any[] = [], defaultValue: T | ((...functionArgs: any[]) => T) = possibleCallback): T => {
+  return typeof possibleCallback === 'function' ? (possibleCallback as (...functionArgs: any[]) => T).call(...args as [any, ...any[]]) : defaultValue as T
 }
 
-const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+const executeAfterTransition = (callback: () => void, transitionElement: Element, waitForTransition = true): void => {
   if (!waitForTransition) {
     execute(callback)
     return
@@ -241,7 +259,7 @@ const executeAfterTransition = (callback, transitionElement, waitForTransition =
 
   let called = false
 
-  const handler = ({ target }) => {
+  const handler = ({ target }: Event): void => {
     if (target !== transitionElement) {
       return
     }
@@ -268,7 +286,9 @@ const executeAfterTransition = (callback, transitionElement, waitForTransition =
  * @param isCycleAllowed
  * @return {Element|elem} The proper element
  */
-const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
+// `isCycleAllowed` is optional here where upstream requires it: our callers
+// omit it, and adding the argument to match would change the emitted code.
+const getNextActiveElement = <T>(list: T[], activeElement: T, shouldGetNext: boolean, isCycleAllowed?: boolean): T => {
   const listLength = list.length
   let index = list.indexOf(activeElement)
 

package/src/util/print.ts

@@ -0,0 +1,125 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid util/print.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridItem } from '../types'
+
+// Printing a virtualized grid straight from the DOM would print the twenty
+// rows that happen to be in the window, and a paginated one would print the
+// current page. Neither is what anyone means by "print this table", so the
+// grid renders a plain, complete table into the document, prints that, and
+// throws it away. The print stylesheet hides everything else on the page.
+
+const CLASS_NAME_PRINT_ROOT = 'data-grid-print-root'
+
+export interface PrintColumn {
+  id: string
+  label: string
+  formatter?: (value: unknown, item: DataGridItem) => string
+}
+
+export interface PrintRow {
+  getValue: (columnId: string) => unknown
+  original: DataGridItem
+}
+
+export interface PrintTable {
+  // The rows BEFORE pagination: the whole result of the user's sorting and
+  // filtering, which is the table they think they are printing.
+  getSortedRowModel?: () => { rows: PrintRow[] }
+  getFilteredRowModel?: () => { rows: PrintRow[] }
+  getCoreRowModel: () => { rows: PrintRow[] }
+}
+
+export interface PrintOptions {
+  // Printed above the table. Omitted entirely when not set.
+  title?: string
+}
+
+// The widest row model the registered features expose — feature sets without
+// sorting or filtering fall back to the core one.
+const printRows = (table: PrintTable): PrintRow[] => {
+  if (typeof table.getSortedRowModel === 'function') {
+    return table.getSortedRowModel().rows
+  }
+
+  if (typeof table.getFilteredRowModel === 'function') {
+    return table.getFilteredRowModel().rows
+  }
+
+  return table.getCoreRowModel().rows
+}
+
+export const createPrintTable = (
+  table: PrintTable,
+  columns: PrintColumn[],
+  options: PrintOptions = {}
+): HTMLElement => {
+  const root = document.createElement('div')
+  root.className = CLASS_NAME_PRINT_ROOT
+
+  if (options.title) {
+    const heading = document.createElement('h1')
+    heading.textContent = options.title
+    root.append(heading)
+  }
+
+  const tableElement = document.createElement('table')
+  tableElement.classList.add('table')
+
+  const head = document.createElement('thead')
+  const headRow = document.createElement('tr')
+  for (const column of columns) {
+    const cell = document.createElement('th')
+    cell.scope = 'col'
+    cell.textContent = column.label
+    headRow.append(cell)
+  }
+
+  head.append(headRow)
+
+  const body = document.createElement('tbody')
+  for (const row of printRows(table)) {
+    const rowElement = document.createElement('tr')
+    for (const column of columns) {
+      const cell = document.createElement('td')
+      const value = row.getValue(column.id)
+      // textContent, never innerHTML: a custom cell renderer's markup is not
+      // reachable here, and the printed page must not become an injection
+      // surface for the data.
+      cell.textContent = column.formatter ? column.formatter(value, row.original) : String(value ?? '')
+      rowElement.append(cell)
+    }
+
+    body.append(rowElement)
+  }
+
+  tableElement.append(head, body)
+  root.append(tableElement)
+
+  return root
+}
+
+export const printGrid = (table: PrintTable, columns: PrintColumn[], options: PrintOptions = {}): void => {
+  const root = createPrintTable(table, columns, options)
+  document.body.append(root)
+
+  // afterprint fires on every browser we support; the finally is the safety
+  // net for a print dialog that never opens (a headless or blocked context),
+  // where leaving the clone in the document would be worse than a flicker.
+  const cleanup = () => {
+    root.remove()
+    window.removeEventListener('afterprint', cleanup)
+  }
+
+  window.addEventListener('afterprint', cleanup)
+
+  try {
+    window.print()
+  } finally {
+    cleanup()
+  }
+}

package/src/util/{sanitizer.js → sanitizer.ts}

@@ -1,18 +1,20 @@
-// Vendored from https://github.com/coreui/coreui-pro/blob/bc4daf1cd79d527bf665d615c0a31f53ab0c3d4e/js/src/util/sanitizer.js — sync manually
+// Vendored from https://github.com/coreui/coreui-pro/blob/e9355580e/js/src/util/sanitizer.ts — sync manually
 /**
  * --------------------------------------------------------------------------
- * CoreUI util/sanitizer.js
+ * CoreUI util/sanitizer.ts
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This is a modified version of the Bootstrap's util/sanitizer.js
+ * This is a modified version of the Bootstrap's util/sanitizer.ts
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
+type SanitizerAllowList = Record<string, Array<string | RegExp>>
+
 // js-docs-start allow-list
 const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
 
-export const DefaultAllowlist = {
+export const DefaultAllowlist: SanitizerAllowList = {
   // Global attributes allowed on any supplied element below.
   '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
   a: ['target', 'href', 'title', 'rel'],
@@ -51,7 +53,7 @@ export const DefaultAllowlist = {
 // js-docs-end allow-list
 
 // js-docs-start svg-allow-list
-export const SVGAllowlist = {
+export const SVGAllowlist: SanitizerAllowList = {
   ...DefaultAllowlist,
   svg: ['xmlns', 'version', 'baseprofile', 'width', 'height', 'viewbox', 'preserveaspectratio', 'aria-hidden', 'role', 'focusable', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'],
   g: ['id', 'class', 'transform', 'style'],
@@ -79,7 +81,7 @@ export const SVGAllowlist = {
 }
 // js-docs-end svg-allow-list
 
-const ESCAPE_HTML_MAP = {
+const ESCAPE_HTML_MAP: Record<string, string> = {
   '&': '&amp;',
   '<': '&lt;',
   '>': '&gt;',
@@ -87,7 +89,7 @@ const ESCAPE_HTML_MAP = {
   "'": '&#x27;'
 }
 
-export function escapeHtml(unsafeText) {
+export function escapeHtml(unsafeText: string): string {
   return String(unsafeText).replace(/[&<>"']/g, character => ESCAPE_HTML_MAP[character])
 }
 
@@ -110,12 +112,12 @@ const uriAttributes = new Set([
  */
 const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i
 
-const allowedAttribute = (attribute, allowedAttributeList) => {
+const allowedAttribute = (attribute: Attr, allowedAttributeList: Array<string | RegExp>): boolean => {
   const attributeName = attribute.nodeName.toLowerCase()
 
   if (allowedAttributeList.includes(attributeName)) {
     if (uriAttributes.has(attributeName)) {
-      return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue))
+      return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue!))
     }
 
     return true
@@ -126,7 +128,7 @@ const allowedAttribute = (attribute, allowedAttributeList) => {
     .some(regex => regex.test(attributeName))
 }
 
-export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
+export function sanitizeHtml(unsafeHtml: string, allowList: SanitizerAllowList, sanitizeFunction?: ((unsafeHtml: string) => string) | null): string {
   if (!unsafeHtml.length) {
     return unsafeHtml
   }
@@ -137,7 +139,7 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
 
   const domParser = new window.DOMParser()
   const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
-  const elements = [].concat(...createdDocument.body.querySelectorAll('*'))
+  const elements = ([] as Element[]).concat(...createdDocument.body.querySelectorAll('*'))
 
   for (const element of elements) {
     const elementName = element.nodeName.toLowerCase()
@@ -148,8 +150,8 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
       continue
     }
 
-    const attributeList = [].concat(...element.attributes)
-    const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || [])
+    const attributeList = ([] as Attr[]).concat(...element.attributes)
+    const allowedAttributes = ([] as Array<string | RegExp>).concat(allowList['*'] || [], allowList[elementName] || [])
 
     for (const attribute of attributeList) {
       if (!allowedAttribute(attribute, allowedAttributes)) {
@@ -160,3 +162,5 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
 
   return createdDocument.body.innerHTML
 }
+
+export type { SanitizerAllowList }