@dbcdk/react-components 0.0.96 → 0.0.97

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}`));
-        }) }));
-}

package/dist/components/table/components/TableHeader.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TableHeaderCell } from './TableHeaderCell';
-import { TableSelectionCell } from './TableSelectionCell';
-import styles from '../Table.module.css';
-export function TableHeader({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, }) {
-    return (_jsx("thead", { className: styles.header, children: _jsxs("tr", { className: styles.headerRow, children: [hasSelection ? (_jsx(TableSelectionCell, { isHeader: true, multiple: selectionMode === 'multiple', checked: allRowsSelected, onToggle: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null, columns.map((column, index) => (_jsx(TableHeaderCell, { column: column, index: index, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, extraContent: headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index }) }, column.id)))] }) }));
-}

package/dist/components/table/components/TableHeaderCell.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp } from 'lucide-react';
-import { cx, getAlignValue, getDividerClass, getHeaderAlignClasses } from '../table.classes';
-import styles from '../Table.module.css';
-import { getAriaSort, getHeaderLabel, getNextSortDirection, isActiveSort, shouldToggleOnKey, } from '../table.utils';
-export function TableHeaderCell({ column, index, sortById, sortDirection, onSortChange, extraContent, }) {
-    const active = isActiveSort(sortById, column.id);
-    const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-    const align = getAlignValue(column);
-    const dividerClass = getDividerClass(column);
-    const alignClasses = getHeaderAlignClasses(align);
-    const handleToggleSort = () => {
-        if (!column.sortable || !onSortChange)
-            return;
-        const nextDirection = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-        onSortChange(column, nextDirection);
-    };
-    return (_jsxs("th", { className: cx(styles.headerCell, dividerClass), scope: "col", "aria-sort": ariaSort, "data-align": align, "data-divider": column.divider, "data-column-index": index, children: [_jsx("div", { className: alignClasses.inner, children: _jsx("div", { className: alignClasses.main, children: column.sortable ? (_jsxs("button", { type: "button", className: alignClasses.button, onClick: handleToggleSort, onKeyDown: e => {
-                            if (!shouldToggleOnKey(e.key))
-                                return;
-                            e.preventDefault();
-                            handleToggleSort();
-                        }, children: [_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && _jsx(ArrowDown, {}), !active && _jsx(ArrowDown, { className: styles.inActiveSort })] })] })) : (_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) })) }) }), extraContent != null ? _jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null] }, column.id));
-}

package/dist/components/table/components/TableLoadingBody.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-function getColumnWidth(column) {
-    // If column.width is defined and less than 150px, use 100%
-    if (typeof column.width === 'number' && column.width < 150) {
-        return '100%';
-    }
-    if (typeof column.width === 'string' && column.width.endsWith('px')) {
-        const px = parseInt(column.width, 10);
-        if (!isNaN(px) && px < 150) {
-            return '100%';
-        }
-    }
-    // Otherwise, random between 50% and 90%
-    const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
-    return `${percent}%`;
-}
-export function TableLoadingBody({ rows, columns, hasSelection }) {
-    const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
-    return (_jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: styles.row, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), children: _jsx("div", { className: styles.cellContent, children: _jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) })) : null, columns.map((column, columnIndex) => {
-                    var _a;
-                    return (_jsx("td", { className: cx(styles.cell, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) }) }, column.id));
-                })] }, `loading-row-${rowIndex}`))) }));
-}

package/dist/components/table/components/TablePagination.js

@@ -1 +0,0 @@
-"use strict";

package/dist/components/table/components/TableRow.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
-import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
-import { SeverityBorderColor } from '../../../constants/severity';
-import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-import { getCellDisplayValue, shouldAllowWrap } from '../table.utils';
-export function TableRow({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
-    var _a;
-    const isSelected = (_a = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId)) !== null && _a !== void 0 ? _a : false;
-    const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
-    const canSelect = Boolean(selectedRows && onRowSelect);
-    const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
-        row,
-        rowId,
-        isSelected,
-        canSelect,
-        onRowClick,
-        onRowSelect,
-    });
-    return (_jsxs("tr", { className: cx(styles.row, onRowClick && styles.clickableRow, isSelected && styles.selectedRow, rowSeverity && styles.severity), style: {
-            ['--row-severity-color']: rowSeverity
-                ? SeverityBorderColor[rowSeverity]
-                : undefined,
-        }, tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), "data-selection-control": "true", children: _jsx("div", { className: styles.selectionHitArea, "data-selection-control": "true", onClick: e => {
-                        if (e.target !== e.currentTarget)
-                            return;
-                        e.stopPropagation();
-                        onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
-                    }, children: _jsx("div", { className: styles.selectionControlWrap, "data-selection-control": "true", onMouseDown: e => {
-                            if (selectionMode !== 'single' || !isSelected)
-                                return;
-                            e.preventDefault();
-                        }, onClick: e => {
-                            e.stopPropagation();
-                            if (selectionMode === 'single' && isSelected) {
-                                e.preventDefault();
-                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, false);
-                            }
-                        }, children: selectionMode === 'single' ? (_jsx(RadioButton, { noContainer: true, name: selectionInputName, value: String(rowId), checked: isSelected, size: "sm", variant: "primary", onChange: (_value, e) => {
-                                e.stopPropagation();
-                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, true);
-                            } })) : (_jsx(Checkbox, { noContainer: true, variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
-                                e.stopPropagation();
-                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
-                            } })) }) }) })) : null, columns.map(column => {
-                var _a, _b, _c, _d;
-                const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-                const allowOverflow = column.allowOverflow;
-                const cellValue = getCellDisplayValue(row, column);
-                return (_jsx("td", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-vertical-align": (_b = column.verticalAlign) !== null && _b !== void 0 ? _b : 'top', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, "data-align": (_c = column.align) !== null && _c !== void 0 ? _c : 'left', "data-vertical-align": (_d = column.verticalAlign) !== null && _d !== void 0 ? _d : 'top', children: allowWrap || allowOverflow ? (cellValue) : (_jsx("div", { className: styles.cellValueEllipsis, children: cellValue })) }) }, column.id));
-            })] }));
-}

package/dist/components/table/components/TableSelectionCell.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-export function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
-    const Tag = isHeader ? 'th' : 'td';
-    return (_jsx(Tag, { className: cx(styles.headerCell, styles.selectionCell), scope: isHeader ? 'col' : undefined, onClick: e => {
-            if (isHeader && !multiple)
-                return;
-            e.stopPropagation();
-            onToggle(!checked, e);
-        }, children: isHeader && !multiple ? null : (_jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { noContainer: true, size: "sm", variant: "primary", checked: checked, onChange: (nextChecked, e) => {
-                    e.stopPropagation();
-                    onToggle(nextChecked, e);
-                } }) })) }));
-}

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

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

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -1,22 +0,0 @@
-.resizer {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 10px;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-  z-index: 20;
-}
-
-.resizer::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  width: 1px; /* visual thickness */
-  height: 60%;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: var(--opac-bg-default);
-}

package/dist/components/table/components/empty-state/EmptyState.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLeft } from 'lucide-react';
-const defaultEmptyConfig = {
-    enabled: true,
-    title: 'Ingen resultater',
-    description: _jsx("span", { children: "Ingen data at vise." }),
-    showBack: false,
-    showRefresh: false,
-    showClearFilters: true,
-    backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, { size: 16 }), "Tilbage"] })),
-    refreshLabel: _jsx(_Fragment, { children: "Indl\u00E6s igen" }),
-    clearFiltersLabel: _jsx(_Fragment, { children: "Nulstil alle filtre" }),
-    className: 'dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg',
-};
-export function TableEmptyState({ config }) {
-    const merged = {
-        ...defaultEmptyConfig,
-        ...(config !== null && config !== void 0 ? config : {}),
-    };
-    if (!merged.enabled)
-        return null;
-    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [_jsx("span", { className: "dbc-text-sm  dbc-muted-text", children: merged.description }), merged.actions ? _jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null] }));
-}

package/dist/components/table/components/empty-state/EmptyState.module.css

@@ -1,4 +0,0 @@
-.container,
-.icon {
-  display: none;
-}

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,63 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ListChevronsDownUp, Settings } from 'lucide-react';
-import { useMemo } from 'react';
-import { Button } from '../../../button/Button';
-import { Menu } from '../../../menu/Menu';
-import { Popover } from '../../../popover/Popover';
-export function TableSettings({ viewMode, handleChangeViewMode, columns = [], visibleColumnIds = [], onVisibleColumnIdsChange, columnsLabel = 'Kolonner', allPresetLabel = 'Alle', standardPresetLabel = 'Standard', buttonSize = 'sm', additionalSettings, }) {
-    const handleViewModeChange = (mode, close) => {
-        handleChangeViewMode(mode === 'wrapped' ? 'compact' : 'wrapped');
-        close === null || close === void 0 ? void 0 : close();
-    };
-    const hideableColumns = useMemo(() => columns.filter(c => c.enableHiding !== false), [columns]);
-    const allPresetIds = useMemo(() => hideableColumns.map(c => c.id), [hideableColumns]);
-    const standardPresetIds = useMemo(() => hideableColumns.filter(c => { var _a; return ((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden) !== true; }).map(c => c.id), [hideableColumns]);
-    const visibleSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
-    const visibleCount = useMemo(() => {
-        return hideableColumns.reduce((acc, c) => { var _a; return acc + (visibleSet.has((_a = c.id) !== null && _a !== void 0 ? _a : '') ? 1 : 0); }, 0);
-    }, [hideableColumns, visibleSet]);
-    const setVisibleIds = (nextIds) => {
-        if (!onVisibleColumnIdsChange)
-            return;
-        const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
-        onVisibleColumnIdsChange(safe.filter((id) => typeof id === 'string' && Boolean(id)));
-    };
-    const toggleColumn = (id, nextVisible) => {
-        const next = new Set(visibleColumnIds);
-        if (nextVisible)
-            next.add(id);
-        else
-            next.delete(id);
-        setVisibleIds(Array.from(next));
-    };
-    const isAllActive = useMemo(() => {
-        if (!hideableColumns.length)
-            return false;
-        return hideableColumns.every(c => c.id && visibleSet.has(c.id));
-    }, [hideableColumns, visibleSet]);
-    const isStandardActive = useMemo(() => {
-        if (!hideableColumns.length)
-            return false;
-        const std = new Set(standardPresetIds);
-        return hideableColumns.every(c => c.id && visibleSet.has(c.id) === std.has(c.id));
-    }, [hideableColumns, visibleSet, standardPresetIds]);
-    // Required by your RadioButton component
-    const presetRadioName = 'table-columns-preset';
-    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { size: buttonSize, onClick: onClick, type: "button", children: [_jsx(Settings, {}), icon] })), children: close => (_jsxs(Menu, { children: [additionalSettings === null || additionalSettings === void 0 ? void 0 : additionalSettings(close), _jsx(Menu.Item, { active: viewMode === 'wrapped', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [_jsx(ListChevronsDownUp, {}), "Ombryd tekst"] }) }), hideableColumns.length > 0 && onVisibleColumnIdsChange ? (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx("div", { style: { padding: '6px 10px', fontSize: 12, opacity: 0.7 }, children: columnsLabel }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "all", checked: isAllActive, label: allPresetLabel, onValueChange: () => {
-                                setVisibleIds(allPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
-                                close === null || close === void 0 ? void 0 : close();
-                            } }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "standard", checked: isStandardActive, label: standardPresetLabel, onValueChange: () => {
-                                setVisibleIds(standardPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
-                                close === null || close === void 0 ? void 0 : close();
-                            } }), _jsx(Menu.Separator, {}), hideableColumns.map(col => {
-                            const isVisible = col.id ? visibleSet.has(col.id) : false;
-                            const disableUncheckingLast = isVisible && visibleCount <= 1;
-                            const label = col.header;
-                            return (_jsx(Menu.CheckItem, { checked: isVisible, disabled: disableUncheckingLast, label: label, onCheckedChange: nextChecked => {
-                                    if (disableUncheckingLast)
-                                        return;
-                                    toggleColumn(col.id, nextChecked);
-                                } }, col.id));
-                        })] })) : null] })) }));
-}

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-import { isModifierClick, shouldToggleOnKey } from '../table.utils';
-export function useTableRowInteractions({ row, rowId, isSelected, canSelect, onRowClick, onRowSelect, }) {
-    const handleRowClick = useCallback((e) => {
-        var _a;
-        const target = e.target;
-        if ((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
-            return;
-        }
-        if (isModifierClick(e) && canSelect) {
-            e.preventDefault();
-            e.stopPropagation();
-            onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
-            return;
-        }
-        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-    }, [canSelect, isSelected, onRowClick, onRowSelect, row, rowId]);
-    const handleRowKeyDown = useCallback((e) => {
-        if (!onRowClick)
-            return;
-        if (!shouldToggleOnKey(e.key))
-            return;
-        e.preventDefault();
-        onRowClick(row);
-    }, [onRowClick, row]);
-    return {
-        handleRowClick,
-        handleRowKeyDown,
-    };
-}

package/dist/components/table/table.classes.js

@@ -1,23 +0,0 @@
-import styles from './Table.module.css';
-export function cx(...values) {
-    return values.filter(Boolean).join(' ');
-}
-export function getDividerClass(column) {
-    if (column.divider === 'left')
-        return styles.dividerLeft;
-    if (column.divider === 'right')
-        return styles.dividerRight;
-    return '';
-}
-export function getAlignValue(column) {
-    var _a;
-    return (_a = column.align) !== null && _a !== void 0 ? _a : 'left';
-}
-export function getHeaderAlignClasses(align) {
-    return {
-        inner: cx(styles.thInner, align === 'right' && styles.thInnerRight, align === 'center' && styles.thInnerCenter),
-        main: cx(styles.thMain, align === 'right' && styles.thMainRight, align === 'center' && styles.thMainCenter),
-        button: cx(styles.thButton, align === 'right' && styles.thButtonRight, align === 'center' && styles.thButtonCenter),
-        label: cx(styles.thLabel, align === 'right' && styles.thLabelRight, align === 'center' && styles.thLabelCenter),
-    };
-}

package/dist/components/table/table.utils.js

@@ -1,47 +0,0 @@
-export const SELECTION_COLUMN_PX = 40;
-export const DEFAULT_COLUMN_PX = 150;
-export function getVisibleColumns(columns) {
-    return columns.filter(column => !column.hidden);
-}
-export function getHeaderLabel(header) {
-    return typeof header === 'function' ? header() : header;
-}
-export function isActiveSort(sortById, columnId) {
-    return sortById === columnId;
-}
-export function getAriaSort(sortable, active, direction) {
-    if (!sortable || !active || !direction)
-        return 'none';
-    return direction === 'asc' ? 'ascending' : 'descending';
-}
-export function getNextSortDirection(sortable, active, currentDirection) {
-    if (!sortable)
-        return null;
-    if (!active)
-        return 'asc';
-    if (currentDirection === 'asc')
-        return 'desc';
-    return null;
-}
-export function shouldToggleOnKey(key) {
-    return key === 'Enter' || key === ' ';
-}
-export function isModifierClick(e) {
-    return Boolean(e.metaKey || e.ctrlKey);
-}
-export function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
-    return Boolean(columnAllowWrap || isRowSelected || viewMode === 'wrapped');
-}
-export function getCellDisplayValue(row, column) {
-    var _a;
-    const empty = (_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '';
-    if (column.render) {
-        const rendered = column.render(row);
-        return rendered !== null && rendered !== void 0 ? rendered : empty;
-    }
-    if (column.accessor) {
-        const value = row[column.accessor];
-        return value !== null && value !== void 0 ? value : empty;
-    }
-    return empty;
-}