@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/split-pane/SplitPane.module.css

@@ -0,0 +1,106 @@
+.container {
+  display: flex;
+  inline-size: 100%;
+  overflow: hidden;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.container[data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+.container[data-direction='vertical'] {
+  flex-direction: column;
+}
+
+/* ===== Primary pane ===== */
+.primary {
+  flex: 0 0 var(--split-pane-primary-size, 300px);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  flex-direction: column;
+  display: flex;
+}
+
+/* ===== Secondary pane ===== */
+.secondary {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Gutter (spacing + hit area) ===== */
+.gutter {
+  position: relative;
+  flex: 0 0 var(--split-pane-gutter, 8px);
+  background: transparent;
+  z-index: 1;
+}
+
+/* Vertical mode gutter */
+.container[data-direction='vertical'] .gutter {
+  inline-size: 100%;
+  block-size: var(--split-pane-gutter, 8px);
+}
+
+/* ===== Resizer (interaction only) ===== */
+.resizer {
+  position: absolute;
+  inset: 0;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.container[data-direction='vertical'] .resizer {
+  cursor: row-resize;
+}
+
+/* ===== Divider line ===== */
+.resizer::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 50%;
+  inline-size: var(--border-width-hairline);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+/* Vertical divider */
+.container[data-direction='vertical'] .resizer::after {
+  inset-inline: 0;
+  inset-block: 50%;
+  inline-size: 100%;
+  block-size: var(--border-width-hairline);
+  transform: translateY(-50%);
+}
+
+/* ===== Divider visibility modes ===== */
+.container[data-divider='hover'] .resizer:hover::after,
+.container[data-divider='hover'] .resizer:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.container[data-divider='always'] .resizer::after {
+  opacity: 1;
+}
+
+.container[data-divider='never'] .resizer::after {
+  display: none;
+}
+
+.container[data-divider='hover'] .resizer:active::after,
+.container[data-divider='always'] .resizer:active::after {
+  background-color: var(--color-brand);
+}

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type SplitDirection = 'horizontal' | 'vertical';
+export interface SplitPaneContextValue {
+    direction: SplitDirection;
+    primarySize: number;
+    setPrimarySize: React.Dispatch<React.SetStateAction<number>>;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    storageKey?: string;
+}
+export declare const SplitPaneContext: React.Context<SplitPaneContextValue | null>;
+export declare function useSplitPaneContext(): SplitPaneContextValue;
+type SplitPaneProviderProps = {
+    children: React.ReactNode;
+    direction: SplitDirection;
+    initialPrimarySize: number;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    storageKey?: string;
+};
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export {};

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+export const SplitPaneContext = React.createContext(null);
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function readStoredSize(key) {
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const num = Number(raw);
+        return Number.isFinite(num) ? num : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredSize(key, value) {
+    try {
+        localStorage.setItem(key, String(Math.round(value)));
+    }
+    catch {
+        // ignore (private mode, disabled storage, etc.)
+    }
+}
+export function useSplitPaneContext() {
+    const ctx = React.useContext(SplitPaneContext);
+    if (!ctx)
+        throw new Error('SplitPane components must be used within <SplitPane />');
+    return ctx;
+}
+export function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }) {
+    const containerRef = useRef(null);
+    /**
+     * IMPORTANT (Next.js hydration):
+     * Always start with initialPrimarySize so server HTML and first client render match.
+     * Then, after hydration, read localStorage and update.
+     */
+    const [primarySize, setPrimarySize] = useState(initialPrimarySize);
+    // Apply persisted size AFTER hydration (prevents SSR/client mismatch warnings)
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        const stored = readStoredSize(storageKey);
+        if (stored === null)
+            return;
+        setPrimarySize(stored);
+    }, [storageKey]);
+    // Clamp after mount / when container is measurable; re-clamp on resize
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const clampToContainer = () => {
+            const rect = el.getBoundingClientRect();
+            const total = direction === 'horizontal' ? rect.width : rect.height;
+            if (!Number.isFinite(total) || total <= 0)
+                return;
+            const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+            setPrimarySize(prev => clamp(prev, minPrimarySize, maxPrimary));
+        };
+        clampToContainer();
+        const ro = new ResizeObserver(() => clampToContainer());
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [direction, minPrimarySize, minSecondarySize]);
+    // Persist on change
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        writeStoredSize(storageKey, primarySize);
+    }, [storageKey, primarySize]);
+    const value = useMemo(() => ({
+        direction,
+        primarySize,
+        setPrimarySize,
+        minPrimarySize,
+        minSecondarySize,
+        containerRef,
+        storageKey,
+    }), [direction, primarySize, minPrimarySize, minSecondarySize, storageKey]);
+    return _jsx(SplitPaneContext.Provider, { value: value, children: children });
+}

package/dist/components/table/Table.d.ts

@@ -1,34 +1,47 @@
-import { PageChangeEvent } from '../pagination/Pagination';
+import React from 'react';
+import type { JSX, ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
+import { PageChangeEvent } from '../../components/pagination/Pagination';
+import { ViewMode } from '../../hooks/useTableSettings';
+import { TableEmptyConfig } from './components/empty-state/EmptyState';
 type SortDirection = 'asc' | 'desc' | null;
 export interface ColumnItem<T> {
-    header: string;
+    id: string;
+    header: string | (() => ReactNode);
     accessor?: keyof T;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
-    render?: (item: T) => React.ReactNode;
+    render?: (item: T) => ReactNode;
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
     fitContent?: boolean;
+    allowWrap?: boolean;
+    emptyPlaceholder?: ReactNode;
+    width?: number | string;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableVariant = 'filled' | 'outlined';
-interface TableProps<T extends Record<string, any>> {
+export type TableVariant = 'primary' | 'embedded';
+export interface TableProps<T extends Record<string, any>> {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
     selectedRows?: Set<number | string>;
+    selectionMode?: 'single' | 'multiple';
+    allRowsSelected?: boolean;
     onRowClick?: (row: T) => void;
-    onRowSelect?: (rowIndex: number | string, isSelected: boolean) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onSelectAllRows?: (isSelected: boolean) => void;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
-    sortBy?: keyof T;
+    sortById?: string;
     sortDirection?: SortDirection;
     loading?: boolean;
-    headerExtras?: (args: HeaderExtrasArgs<T>) => React.ReactNode;
+    headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     columnStyles?: Partial<Record<string, React.CSSProperties>>;
-    headerBelowRow?: React.ReactNode;
+    headerBelowRow?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
     viewportBottomOffset?: number;
@@ -36,10 +49,15 @@ interface TableProps<T extends Record<string, any>> {
     viewportIncludeMarginTop?: boolean;
     take?: number;
     skip?: number;
+    paginationPlacement?: 'top' | 'bottom';
     totalItemsCount?: number;
     onPageChange?: (e: PageChangeEvent) => void;
     variant?: TableVariant;
     size?: 'sm' | 'md';
+    getRowSeverity?: (row: T) => Severity | undefined;
+    showFirstLast?: boolean;
+    viewMode?: ViewMode;
+    emptyConfig?: TableEmptyConfig;
 }
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, onSortChange, onRowClick, sortBy, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, totalItemsCount, onPageChange, loading, variant, size, }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -1,175 +1,120 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ArrowUp, ArrowDown } from 'lucide-react';
-import { Checkbox } from '../checkbox/Checkbox';
-import { useMemo, useCallback, useRef } from 'react';
-import styles from './Table.module.css';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { useCallback, useMemo, useRef } from 'react';
+import { SeverityBgColor } from '../../constants/severity';
 import { useViewportFill } from '../../hooks/useViewportFill';
-import { Pagination } from '../pagination/Pagination';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-
-function Table({
-  data,
-  columns,
-  selectedRows,
-  onRowSelect,
-  onSortChange,
-  onRowClick,
-  sortBy,
-  sortDirection,
-  dataKey,
-  headerExtras,
-  columnStyles,
-  headerBelowRow,
-  striped,
-  fillViewport = false,
-  viewportBottomOffset = 0,
-  viewportMin = 120,
-  viewportIncludeMarginTop = false,
-  take,
-  skip,
-  totalItemsCount,
-  onPageChange,
-  loading,
-  variant = "filled",
-  size = "md"
-}) {
-  const filteredColumns = useMemo(() => columns.filter((c) => !c.hidden), [columns]);
-  const handlePageChange = useCallback(
-    (e) => {
-      onPageChange == null ? void 0 : onPageChange(e);
-    },
-    [onPageChange]
-  );
-  const getColStyle = (accessor, alignment) => {
-    const baseStyle = accessor ? columnStyles == null ? void 0 : columnStyles[String(accessor)] : void 0;
-    return {
-      textAlign: alignment != null ? alignment : "left",
-      ...baseStyle != null ? baseStyle : {}
+import { Checkbox } from '../../components/forms/checkbox/Checkbox';
+import { Pagination } from '../../components/pagination/Pagination';
+import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { TableEmptyState } from './components/empty-state/EmptyState';
+import styles from './Table.module.css';
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, }) {
+    const filteredColumns = useMemo(() => columns.filter(c => !c.hidden), [columns]);
+    const handlePageChange = useCallback((e) => {
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
+    }, [onPageChange]);
+    const getColStyle = (columnId, alignment, verticalAlignment, width) => {
+        const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
+        return {
+            ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
+            ...(alignment === 'right' && { fontVariantNumeric: 'tabular-nums' }),
+            verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
+            textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
+            width: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.width,
+            minWidth: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth,
+        };
     };
-  };
-  const scrollRef = useRef(null);
-  const { style: viewportStyle } = useViewportFill(scrollRef, {
-    bottomOffset: viewportBottomOffset + 60,
-    min: viewportMin,
-    includeMarginTop: viewportIncludeMarginTop
-  });
-  const tableEl = /* @__PURE__ */ jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [
-    /* @__PURE__ */ jsxs("thead", { children: [
-      /* @__PURE__ */ jsxs("tr", { children: [
-        selectedRows && dataKey && /* @__PURE__ */ jsx("th", { className: "fitContent" }),
-        filteredColumns.map((column, index) => {
-          var _a;
-          const accessorKey = String((_a = column.accessor) != null ? _a : "");
-          const isActiveSort = sortBy === column.accessor;
-          const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
-          const toggleSort = () => {
-            if (!onSortChange || !column.sortable) return;
-            const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
-            onSortChange(column, nextDir);
-          };
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              style: getColStyle(column.accessor, column.align),
-              "aria-sort": ariaSort,
-              className: `${styles.th} ${column.sortable ? styles.sortable : ""}`,
-              onClick: (e) => {
-                if (!column.sortable) return;
-                if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
-                toggleSort();
-              },
-              role: column.sortable ? "button" : void 0,
-              tabIndex: column.sortable ? 0 : void 0,
-              onKeyDown: (e) => {
-                if (!column.sortable) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleSort();
-                }
-              },
-              children: /* @__PURE__ */ jsx("div", { className: styles.thInner, children: /* @__PURE__ */ jsxs("span", { children: [
-                /* @__PURE__ */ jsx("span", { className: styles.thLabel, children: column.header }),
-                column.sortable && /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
-                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
-                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending }),
-                  !isActiveSort && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending })
-                ] }),
-                headerExtras == null ? void 0 : headerExtras({ column, index })
-              ] }) })
-            },
-            `${accessorKey}-${index}`
-          );
-        })
-      ] }),
-      headerBelowRow ? /* @__PURE__ */ jsx("tr", { className: styles.headerBelowRow, children: /* @__PURE__ */ jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
-    ] }),
-    loading && !data.length ? /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsx(
-      "td",
-      {
-        style: getColStyle(column.accessor, column.align),
-        className: `${styles.tableCell}`,
-        children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" })
-      },
-      `loading-cell-${colIndex}`
-    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
-        className: `${onRowClick ? styles.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ""}`,
-        children: [
-          selectedRows && dataKey && /* @__PURE__ */ jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: selectedRows.has(row[dataKey]),
-              size: "sm",
-              onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
-            }
-          ) }),
-          filteredColumns.map((column) => {
-            var _a;
-            const accessorKey = String((_a = column.accessor) != null ? _a : "");
-            return /* @__PURE__ */ jsx(
-              "td",
-              {
-                style: getColStyle(column.accessor, column.align),
-                className: `${styles.tableCell} `,
-                children: column.render ? column.render(row) : row[accessorKey]
-              },
-              accessorKey
-            );
-          })
-        ]
-      },
-      `tableRow-${String(row[dataKey])}-${rowIndex} `
-    )) })
-  ] });
-  if (fillViewport) {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-      /* @__PURE__ */ jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }),
-      onPageChange && /* @__PURE__ */ jsx(
-        Pagination,
-        {
-          itemsCount: totalItemsCount,
-          take,
-          skip,
-          onPageChange: handlePageChange
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-    tableEl,
-    " ",
-    onPageChange && /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        itemsCount: totalItemsCount,
-        take,
-        skip,
-        onPageChange: handlePageChange
-      }
-    )
-  ] });
+    const scrollRef = useRef(null);
+    const { style: viewportStyle } = useViewportFill(scrollRef, {
+        bottomOffset: viewportBottomOffset + 60,
+        min: viewportMin,
+        includeMarginTop: viewportIncludeMarginTop,
+    });
+    const tableEl = (_jsxs(_Fragment, { children: [_jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [_jsxs("thead", { children: [_jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.fitContent} ${styles.th}`, children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
+                                        const isActiveSort = sortById === column.id;
+                                        const ariaSort = column.sortable && isActiveSort
+                                            ? sortDirection === 'asc'
+                                                ? 'ascending'
+                                                : 'descending'
+                                            : 'none';
+                                        const toggleSort = () => {
+                                            if (!onSortChange || !column.sortable)
+                                                return;
+                                            const nextDir = !isActiveSort
+                                                ? 'asc'
+                                                : sortDirection === 'asc'
+                                                    ? 'desc'
+                                                    : null;
+                                            onSortChange(column, nextDir);
+                                        };
+                                        return (_jsx("th", { style: getColStyle(column.id, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th} ${column.sortable ? styles.sortable : ''} `, onClick: e => {
+                                                if (!column.sortable)
+                                                    return;
+                                                if (e.target instanceof HTMLElement && e.target.closest('.resizer'))
+                                                    return;
+                                                toggleSort();
+                                            }, role: column.sortable ? 'button' : undefined, tabIndex: column.sortable ? 0 : undefined, onKeyDown: e => {
+                                                if (!column.sortable)
+                                                    return;
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    toggleSort();
+                                                }
+                                            }, children: _jsx("div", { className: styles.thInner, children: _jsxs("span", { children: [_jsx("span", { className: styles.thLabel, children: typeof column.header === 'function' ? column.header() : column.header }), column.sortable && (_jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [isActiveSort && sortDirection === 'asc' && _jsx(ArrowUp, {}), isActiveSort && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !isActiveSort && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })), headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index })] }) }) }, column.id));
+                                    })] }), headerBelowRow ? (_jsx("tr", { className: styles.headerBelowRow, children: _jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) })) : null] }), loading && !data.length ? (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsx("tr", { children: filteredColumns.map((column, colIndex) => (_jsx("td", { style: getColStyle(column.id, column.align, 'middle', column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''}`, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, `${column.id}-${colIndex}`))) }, `loading-row-${rowIndex}`))) })) : (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: data === null || data === void 0 ? void 0 : data.map((row, rowIndex) => {
+                            const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
+                            return (_jsxs("tr", { tabIndex: onRowClick ? 0 : -1, onClick: e => {
+                                    const rowId = row[dataKey];
+                                    const isModifierClick = e.metaKey || e.ctrlKey;
+                                    const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
+                                    if (isModifierClick && canSelect) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        const isSelected = selectedRows.has(rowId);
+                                        if (selectionMode === 'single') {
+                                            // In single mode, treat modifier-click as "select this row"
+                                            // (toggle if already selected)
+                                            onRowSelect(rowId, !isSelected);
+                                        }
+                                        else {
+                                            // multiple mode: toggle selection
+                                            onRowSelect(rowId, !isSelected);
+                                        }
+                                        return;
+                                    }
+                                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+                                }, style: {
+                                    ['--row-severity-color']: rowSeverity
+                                        ? SeverityBgColor[rowSeverity]
+                                        : undefined,
+                                }, className: `${onRowClick ? styles.clickableRow : ''} ${(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: "fitContent", onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(row[dataKey]), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey])) }) })), filteredColumns.map(column => {
+                                        var _a, _b;
+                                        return (_jsx("td", { style: getColStyle(column.id, column.align, column.verticalAlign, column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''} ${column.allowWrap ||
+                                                (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ||
+                                                viewMode === 'comfortable'
+                                                ? styles.allowWrap
+                                                : styles.nowrap} `, children: column.render
+                                                ? column.render(row) || ((_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '')
+                                                : column.accessor
+                                                    ? row[column.accessor] || ((_b = column.emptyPlaceholder) !== null && _b !== void 0 ? _b : '')
+                                                    : null }, column.id));
+                                    })] }, `tableRow-${String(row[dataKey])}-${rowIndex}`));
+                        }) }))] }), !data.length && !loading && _jsx(TableEmptyState, { config: emptyConfig })] }));
+    if (fillViewport) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '20px',
+                flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
+                position: 'relative',
+            }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }), onPageChange && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
+    }
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '20px',
+            flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
+            position: 'relative',
+        }, children: [tableEl, onPageChange && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));
 }
-
-export { Table };