@dbcdk/react-components 0.0.5 → 0.0.7

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

@@ -1,79 +1,85 @@
-import { jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect, useMemo } from 'react';
-
-const SplitPaneContext = React.createContext(null);
+'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));
+    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;
-  }
+    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 {
-  }
+    try {
+        localStorage.setItem(key, String(Math.round(value)));
+    }
+    catch {
+        // ignore (private mode, disabled storage, etc.)
+    }
 }
-function useSplitPaneContext() {
-  const ctx = React.useContext(SplitPaneContext);
-  if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
-  return ctx;
+export function useSplitPaneContext() {
+    const ctx = React.useContext(SplitPaneContext);
+    if (!ctx)
+        throw new Error('SplitPane components must be used within <SplitPane />');
+    return ctx;
 }
-function SplitPaneProvider({
-  children,
-  direction,
-  initialPrimarySize,
-  minPrimarySize,
-  minSecondarySize,
-  storageKey
-}) {
-  const containerRef = useRef(null);
-  const [primarySize, setPrimarySize] = useState(initialPrimarySize);
-  useEffect(() => {
-    if (!storageKey) return;
-    const stored = readStoredSize(storageKey);
-    if (stored === null) return;
-    setPrimarySize(stored);
-  }, [storageKey]);
-  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]);
-  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 /* @__PURE__ */ jsx(SplitPaneContext.Provider, { value, children });
+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 });
 }
-
-export { SplitPaneContext, SplitPaneProvider, useSplitPaneContext };

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

@@ -1,22 +1,24 @@
 import React from 'react';
-import { PageChangeEvent } from '../pagination/Pagination';
+import type { JSX, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
-import { ViewMode } from '@/hooks/useTableSettings';
+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> {
     id: string;
-    header: string | (() => React.ReactNode);
+    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?: React.ReactNode;
+    emptyPlaceholder?: ReactNode;
+    width?: number | string;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
@@ -37,9 +39,9 @@ export interface TableProps<T extends Record<string, any>> {
     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;

package/dist/components/table/Table.js

@@ -1,243 +1,120 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useMemo, useCallback, useRef } from 'react';
-import { ArrowUp, ArrowDown } from 'lucide-react';
-import { Checkbox } from '../checkbox/Checkbox';
-import styles from './Table.module.css';
-import { useViewportFill } from '../../hooks/useViewportFill';
-import { Pagination } from '../pagination/Pagination';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+'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 { 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';
-
-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 ? void 0 : onPageChange(e);
-    },
-    [onPageChange]
-  );
-  const getColStyle = (columnId, alignment, verticalAlignment) => {
-    const baseStyle = columnStyles == null ? void 0 : columnStyles[columnId];
-    return {
-      ...baseStyle != null ? baseStyle : {},
-      ...alignment === "right" && { fontVariantNumeric: "tabular-nums" },
-      verticalAlign: verticalAlignment != null ? verticalAlignment : "top",
-      textAlign: alignment != null ? alignment : "left"
+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(Fragment, { children: [
-    /* @__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: `${styles.fitContent} ${styles.th}`, children: selectionMode === "multiple" ? /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              size: "sm",
-              variant: "primary",
-              checked: allRowsSelected,
-              onChange: (checked) => onSelectAllRows == null ? 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 /* @__PURE__ */ 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" : 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: typeof column.header === "function" ? column.header() : 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} ${styles.inActiveSort}` })
-                  ] }),
-                  headerExtras == null ? void 0 : headerExtras({ column, index })
-                ] }) })
-              },
-              column.id
-            );
-          })
-        ] }),
-        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.id, column.align),
-          className: `${styles.tableCell} ${column.fitContent ? "fitContent" : ""}`,
-          children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" })
-        },
-        `${column.id}-${colIndex}`
-      )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => {
-        const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
-        return /* @__PURE__ */ 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") {
-                  onRowSelect(rowId, !isSelected);
-                } else {
-                  onRowSelect(rowId, !isSelected);
-                }
-                return;
-              }
-              onRowClick == null ? void 0 : onRowClick(row);
-            },
-            style: {
-              ["--row-severity-color"]: rowSeverity ? SeverityBgColor[rowSeverity] : void 0
-            },
-            className: `${onRowClick ? styles.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ""} ${rowSeverity ? styles.severity : ""}`,
-            children: [
-              selectedRows && dataKey && /* @__PURE__ */ jsx("td", { className: "fitContent", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  variant: "primary",
-                  checked: selectedRows.has(row[dataKey]),
-                  size: "sm",
-                  onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
-                }
-              ) }),
-              filteredColumns.map((column) => {
-                var _a, _b;
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    style: getColStyle(column.id, column.align, column.verticalAlign),
-                    className: `${styles.tableCell} ${column.fitContent ? "fitContent" : ""} ${column.allowWrap || (selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) || viewMode === "comfortable" ? "" : styles.nowrap} `,
-                    children: column.render ? column.render(row) || ((_a = column.emptyPlaceholder) != null ? _a : "") : column.accessor ? row[column.accessor] || ((_b = column.emptyPlaceholder) != null ? _b : "") : null
-                  },
-                  column.id
-                );
-              })
-            ]
-          },
-          `tableRow-${String(row[dataKey])}-${rowIndex}`
-        );
-      }) })
-    ] }),
-    !data.length && /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig })
-  ] });
-  if (fillViewport) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "20px",
-          flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }),
-          onPageChange && /* @__PURE__ */ jsx(
-            Pagination,
-            {
-              itemsCount: totalItemsCount,
-              take,
-              skip,
-              onPageChange: handlePageChange,
-              showFirstLast
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "20px",
-        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
-        position: "relative"
-      },
-      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 };

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

@@ -34,6 +34,11 @@
   cursor: pointer;
 }
 
+.allowWrap {
+  word-break: break-all !important;
+  overflow-wrap: anywhere !important;
+}
+
 .clickableRow:hover {
   background-color: var(--color-bg-contextual);
 }
@@ -63,7 +68,6 @@
   white-space: nowrap;
   min-width: unset;
   max-width: unset;
-  width: 1%;
   vertical-align: middle;
 }
 

package/dist/components/table/components/column-resizer/ColumnResizer.js

@@ -1,16 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './ColumnResizer.module.css';
-
-const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    className: styles.resizer,
-    onMouseDown: handler,
-    onTouchStart: handler,
-    role: "separator",
-    "aria-label": `Resize ${id}`
-  }
-);
-var ColumnResizer_default = ColumnResizer;
-
-export { ColumnResizer_default as default };
+const ColumnResizer = ({ id, handler }) => (_jsx("span", { className: styles.resizer, onMouseDown: handler, onTouchStart: handler, role: "separator", "aria-label": `Resize ${id}` }));
+export default ColumnResizer;