@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/table/Table.js

@@ -1,50 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useRef } from 'react';
-import { Pagination } from '../../components/pagination/Pagination';
-import { useViewportFill } from '../../hooks/useViewportFill';
-import { TableEmptyState } from './components/empty-state/EmptyState';
-import { TableBody } from './components/TableBody';
-import { TableHeader } from './components/TableHeader';
-import { TableLoadingBody } from './components/TableLoadingBody';
-import { cx } from './table.classes';
-import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, fillViewportBottomOffset = 16, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
-    const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
-    const selectionInputName = useId();
-    const internalTableRootRef = useRef(null);
-    const tableRootRefWrapper = useRef(tableRootRef);
-    const hasSelection = Boolean(selectedRows && onRowSelect);
-    const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
-    const paginationOffset = hasPagination ? 72 : 0;
-    const { style: viewportFillStyle } = useViewportFill(internalTableRootRef, {
-        bottomOffset: fillViewportBottomOffset + paginationOffset,
-        min: 120,
-    });
-    const setTableRootRef = useCallback((node) => {
-        internalTableRootRef.current = node;
-        if (typeof tableRootRefWrapper.current === 'function') {
-            tableRootRefWrapper.current(node);
-        }
-        else if (tableRootRefWrapper.current) {
-            tableRootRefWrapper.current.current = node;
-        }
-    }, []);
-    const handlePageChange = useCallback((e) => {
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
-    }, [onPageChange]);
-    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = hasPagination ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
-    const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
-    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: setTableRootRef, className: styles.tableScroll, style: fillViewport ? viewportFillStyle : undefined, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
-    if (fillViewport) {
-        return (_jsxs("div", { className: styles.fillViewportRoot, style: {
-                flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',
-            }, children: [toolbar ? _jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null, _jsx("div", { className: styles.tableViewport, children: tableShell }), paginationEl] }));
-    }
-    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", style: {
-            flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
-            position: 'relative',
-        }, children: [toolbar ? _jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null, tableShell, paginationEl] }));
-}

package/dist/components/table/Table.module.css

@@ -1,536 +0,0 @@
-.fillViewportRoot {
-  display: flex;
-  position: relative;
-  block-size: 100%;
-  min-block-size: 0;
-  min-inline-size: 0;
-  overflow: hidden;
-}
-
-.inlineRoot {
-  display: flex;
-  flex-direction: column;
-  min-block-size: 0;
-  min-inline-size: 0;
-  inline-size: 100%;
-  max-inline-size: 100%;
-  position: relative;
-}
-
-.toolbarSlot {
-  margin-bottom: 12px;
-  flex: 0 0 auto;
-}
-
-.tableViewport {
-  flex: 1 1 auto;
-  min-block-size: 0;
-  min-inline-size: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.paginationSlot {
-  flex: 0 0 auto;
-  overflow: visible;
-  margin-top: auto;
-}
-
-.paginationSlot:not(.paginationSlotTop) {
-  padding-top: var(--spacing-sm);
-}
-
-.paginationSlot.paginationSlotTop {
-  padding-bottom: var(--spacing-sm);
-}
-
-.tableRoot {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-block-size: 0;
-  min-inline-size: 0;
-  inline-size: 100%;
-  max-inline-size: 100%;
-}
-
-.measuringLayout {
-  visibility: hidden;
-}
-
-.tableScroll {
-  flex: 1 1 auto;
-  min-block-size: 0;
-  min-inline-size: 0;
-  overflow: auto;
-  background: var(--table-row-bg);
-  -webkit-overflow-scrolling: touch;
-}
-
-.tableElement {
-  inline-size: 100%;
-  min-inline-size: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: fixed;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--table-cell-fg);
-  background: var(--table-row-bg);
-}
-
-.header {
-  position: relative;
-  z-index: 10;
-}
-
-.headerRow,
-.row {
-  position: relative;
-}
-
-.emptyStateSlot {
-  display: grid;
-  place-items: center;
-  min-block-size: 100%;
-  padding: var(--spacing-lg);
-}
-
-.body {
-  min-block-size: 0;
-}
-
-.body .row:first-child .cell {
-  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
-}
-
-.headerCell,
-.cell {
-  position: relative;
-  box-sizing: border-box;
-  min-width: 0;
-  vertical-align: top;
-  text-align: start;
-}
-
-.headerCell {
-  position: sticky;
-  top: 0;
-  z-index: 6;
-  vertical-align: middle;
-  background-color: var(--table-header-bg);
-  border-block-end: 1px solid var(--table-border-header);
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  color: var(--table-header-fg);
-  white-space: nowrap;
-}
-
-.cell {
-  padding-block: 6px;
-  padding-inline: var(--spacing-sm);
-  border-block-end: 1px solid var(--table-border-subtle);
-  background: var(--table-row-bg);
-  overflow: hidden;
-  line-height: 20px;
-}
-
-.md .headerCell {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-}
-
-.md .cell {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-}
-
-.sm .headerCell {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
-}
-
-.sm .cell {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
-  font-size: var(--font-size-xs);
-  line-height: 20px;
-}
-
-.cell[data-vertical-align='top'] {
-  vertical-align: top;
-}
-
-.cell[data-vertical-align='middle'] {
-  vertical-align: middle;
-}
-
-.cell[data-vertical-align='bottom'] {
-  vertical-align: bottom;
-}
-
-.headerCell[data-align='right'],
-.cell[data-align='right'] {
-  text-align: end;
-  font-variant-numeric: tabular-nums;
-}
-
-.headerCell[data-align='center'],
-.cell[data-align='center'] {
-  text-align: center;
-}
-
-.headerCell.selectionCell,
-.cell.selectionCell {
-  padding-inline: calc(var(--spacing-xxs) + 6px) var(--spacing-sm);
-  cursor: pointer;
-  overflow: visible;
-  line-height: 0;
-}
-
-.headerCell.selectionCell {
-  padding-block: var(--spacing-xxs);
-  vertical-align: middle;
-}
-
-.cell.selectionCell {
-  vertical-align: top;
-  padding-block: var(--spacing-xxs);
-}
-
-.selectionHitArea {
-  display: inline-flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  min-block-size: 0;
-  padding: 0;
-  line-height: 0;
-}
-
-.selectionControlWrap {
-  display: inline-flex;
-  align-items: flex-start;
-  line-height: 0;
-}
-
-.selectionControlWrap span {
-  gap: 0;
-}
-
-.selectionControlWrap input[type='radio'] + span {
-  width: 18px;
-  height: 18px;
-  border-width: 1px;
-  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
-}
-
-.selectionControlWrap input[type='radio'] + span > span {
-  width: 8px;
-  height: 8px;
-}
-
-.clickableRow {
-  cursor: pointer;
-}
-
-.row:hover > .cell {
-  background-color: var(--table-row-bg-hover);
-}
-
-.selectedRow > .cell {
-  background-color: var(--table-row-bg-selected);
-}
-
-.selectedRow:hover > .cell {
-  background-color: var(--table-row-bg-selected-hover);
-}
-
-.striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
-  background-color: var(--table-row-bg-alt);
-}
-
-.row:focus-within > .cell {
-  box-shadow:
-    inset 0 2px 0 var(--color-brand),
-    inset 0 -2px 0 var(--color-brand);
-}
-
-.row:focus-within > .cell:first-child {
-  box-shadow:
-    inset 2px 0 0 var(--color-brand),
-    inset 0 2px 0 var(--color-brand),
-    inset 0 -2px 0 var(--color-brand);
-}
-
-.row:focus-within > .cell:last-child {
-  box-shadow:
-    inset -2px 0 0 var(--color-brand),
-    inset 0 2px 0 var(--color-brand),
-    inset 0 -2px 0 var(--color-brand);
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.allowWrap {
-  white-space: normal;
-  overflow-wrap: break-word;
-  word-break: normal;
-}
-
-.thInner {
-  display: flex;
-  align-items: center;
-  inline-size: 100%;
-  min-width: 0;
-}
-
-.thInnerRight {
-  justify-content: flex-end;
-}
-
-.thInnerCenter {
-  justify-content: center;
-}
-
-.thMain {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.thMainRight {
-  justify-content: flex-end;
-}
-
-.thMainCenter {
-  justify-content: center;
-}
-
-.thButton {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  max-inline-size: 100%;
-  cursor: pointer;
-  user-select: none;
-  border-radius: var(--border-radius-default);
-  padding-block: 2px;
-  padding-inline: 2px;
-  justify-content: flex-start;
-}
-
-.thButtonRight {
-  justify-content: flex-end;
-}
-
-.thButtonCenter {
-  justify-content: center;
-}
-
-.thLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.thLabelRight {
-  text-align: right;
-  width: 100%;
-}
-
-.thLabelCenter {
-  text-align: center;
-  width: 100%;
-}
-
-.thOverlayExtras {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  pointer-events: none;
-  z-index: 7;
-}
-
-.thOverlayExtras > * {
-  pointer-events: auto;
-}
-
-.sortIndicator {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  color: var(--color-fg-subtle);
-  opacity: 0.9;
-}
-
-.sortIndicator svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}
-
-.descending {
-  transform: rotate(180deg);
-}
-
-.inActiveSort {
-  opacity: 0.45;
-}
-
-.cellContent {
-  display: flex;
-  inline-size: 100%;
-  min-width: 0;
-  max-inline-size: 100%;
-}
-
-/* horizontal alignment inside content wrapper */
-.cellContent[data-align='left'] {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.cellContent[data-align='center'] {
-  justify-content: center;
-  text-align: center;
-}
-
-.cellContent[data-align='right'] {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-/* vertical alignment inside content wrapper */
-.cellContent[data-vertical-align='top'] {
-  align-items: flex-start;
-}
-
-.cellContent[data-vertical-align='middle'] {
-  align-items: center;
-}
-
-.cellContent[data-vertical-align='bottom'] {
-  align-items: flex-end;
-}
-
-.cellContent > * {
-  min-width: 0;
-  max-inline-size: 100%;
-}
-
-/* keep truncation + text alignment working */
-.cellValueEllipsis {
-  display: block;
-  inline-size: 100%;
-  min-width: 0;
-  max-inline-size: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.cellContent[data-align='left'] .cellValueEllipsis {
-  text-align: left;
-}
-
-.cellContent[data-align='center'] .cellValueEllipsis {
-  text-align: center;
-}
-
-.cellContent[data-align='right'] .cellValueEllipsis {
-  text-align: right;
-}
-
-.allowWrap .cellContent,
-.allowWrap .cellValueEllipsis {
-  white-space: normal;
-  overflow-wrap: break-word;
-  word-break: normal;
-  overflow: visible;
-  text-overflow: clip;
-}
-
-.severityTable {
-  --row-rail-width: 2px;
-  --row-rail-inset-block: 1px;
-  --row-rail-radius: 0;
-}
-
-.severityTable .row.severity > .cell:first-child {
-  position: relative;
-}
-
-.severityTable .row.severity > .cell:first-child::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: var(--row-rail-inset-block);
-  inset-block-end: var(--row-rail-inset-block);
-  inline-size: var(--row-rail-width);
-  background-color: var(--row-severity-color);
-  border-radius: var(--row-rail-radius);
-  z-index: 2;
-  pointer-events: none;
-  opacity: 0.95;
-}
-
-.severityTable .row.severity:hover > .cell:first-child::before,
-.severityTable .row.severity:focus-within > .cell:first-child::before {
-  opacity: 1;
-  z-index: 8;
-}
-
-.severityTable .row.severityFailed > .cell:first-child::before {
-  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
-}
-
-.sm .severityTable {
-  --row-rail-width: 4px;
-  --row-rail-inset-block: 1px;
-}
-
-.dividerLeft,
-.dividerRight {
-  position: relative;
-}
-
-.headerCell.dividerLeft,
-.headerCell.dividerRight {
-  position: sticky;
-}
-
-.dividerLeft::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 1px;
-  background: var(--table-divider);
-}
-
-.dividerRight::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 1px;
-  background: var(--table-divider);
-}

package/dist/components/table/Table.types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/table/TanstackTable.js

@@ -1,111 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useReactTable, getCoreRowModel, getSortedRowModel, } from '@tanstack/react-table';
-import * as React from 'react';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
-import { Table } from './Table';
-import { DEFAULT_COLUMN_PX } from './table.utils';
-import { buildDistributedColumnWidths, buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, } from './tanstackTable.utils';
-export function TanstackTable(props) {
-    const { data, dataKey, columns, sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, selectedRows, onRowSelect, ...tableProps } = props;
-    const isControlledSorting = controlledSorting != null;
-    const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
-    React.useEffect(() => {
-        if (!isControlledSorting)
-            return;
-        if (sortingEqual(uiSorting, controlledSorting))
-            return;
-        setUiSorting(controlledSorting);
-    }, [isControlledSorting, controlledSorting, uiSorting]);
-    const columnVisibility = React.useMemo(() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds), [columns, visibleColumnIds]);
-    const [columnSizing, setColumnSizing] = React.useState({});
-    const containerRef = React.useRef(null);
-    const [availableWidth, setAvailableWidth] = React.useState(undefined);
-    const table = useReactTable({
-        data,
-        columns: columns,
-        state: {
-            sorting: uiSorting,
-            columnSizing,
-            columnVisibility,
-        },
-        onSortingChange: updater => {
-            const next = typeof updater === 'function' ? updater(uiSorting) : updater;
-            if (optimisticSortingUi)
-                setUiSorting(next);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-        },
-        onColumnSizingChange: setColumnSizing,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
-        enableColumnResizing: true,
-        columnResizeMode: 'onChange',
-        defaultColumn: {
-            enableResizing: true,
-            minSize: 80,
-            size: DEFAULT_COLUMN_PX,
-        },
-    });
-    React.useLayoutEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const updateWidth = () => {
-            const next = el.clientWidth;
-            setAvailableWidth(next > 0 ? next : undefined);
-        };
-        updateWidth();
-        if (typeof ResizeObserver === 'undefined') {
-            window.addEventListener('resize', updateWidth);
-            return () => window.removeEventListener('resize', updateWidth);
-        }
-        const observer = new ResizeObserver(() => updateWidth());
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, []);
-    const distributedLayout = React.useMemo(() => {
-        if (availableWidth == null)
-            return null;
-        return buildDistributedColumnWidths({
-            table,
-            hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-            defaultMinPx: 80,
-            columnSizing,
-            availableWidth,
-        });
-    }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
-    const initialLayoutReady = availableWidth != null;
-    const resolvedLayout = React.useMemo(() => {
-        const next = {};
-        table.getVisibleLeafColumns().forEach((column) => {
-            next[column.id] = {
-                width: distributedLayout === null || distributedLayout === void 0 ? void 0 : distributedLayout.widths[column.id],
-            };
-        });
-        return next;
-    }, [table, distributedLayout]);
-    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout), [columns, columnVisibility, resolvedLayout]);
-    const visibleData = table.getRowModel().rows.map(r => r.original);
-    const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
-    const handleSortChange = React.useCallback((column, direction) => {
-        const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
-        if (optimisticSortingUi)
-            setUiSorting(next);
-        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-    }, [optimisticSortingUi, onSortingChange]);
-    const headerExtras = React.useCallback(({ index }) => {
-        var _a, _b, _c, _d;
-        const headerGroups = table.getHeaderGroups();
-        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-        const header = leafHeaders[index];
-        if (!header)
-            return null;
-        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
-        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
-        if (!canResize || !handler)
-            return null;
-        return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
-    }, [table]);
-    return (_jsx(Table, { ...tableProps, tableRootRef: containerRef, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, tableWidth: distributedLayout === null || distributedLayout === void 0 ? void 0 : distributedLayout.totalWidth, measuringLayout: !initialLayoutReady, sortById: sortById, sortDirection: sortDirection, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
-}

package/dist/components/table/components/TableBody.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-import { TableRow } from './TableRow';
-export function TableBody({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
-    return (_jsx("tbody", { className: cx(styles.body, striped && styles.striped), children: data.map(row => {
-            const rowId = row[dataKey];
-            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
-        }) }));
-}