@dbcdk/react-components 0.0.10 → 0.0.12

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
 const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
 const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
@@ -32,6 +32,9 @@ const SidebarContext = createContext({
     resetExpandAll: () => { },
     activeLink: '',
     setActiveLink: () => { },
+    expandItem: () => { },
+    collapseItem: () => { },
+    isExpanded: () => false,
     isSidebarCollapsed: false,
     handleSidebarCollapseChange: () => { },
 });
@@ -43,24 +46,60 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     const [activeQuery, setActiveQuery] = useState('');
     const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
     const [activeHref, setActiveHref] = useState('');
+    // expandedItems is now the single source of truth for "open groups"
+    // (it includes both auto-expanded parents and user-expanded groups)
     const [expandedItems, setExpandedItems] = useState(new Set());
+    // Track items in a ref to avoid effect loops if parent recreates the items array every render
+    const itemsRef = useRef(items);
+    useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
     const [isSidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false);
     const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== undefined;
     const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);
+    const expandItem = useCallback((href) => {
+        setExpandedItems(prev => {
+            if (prev.has(href))
+                return prev;
+            const next = new Set(prev);
+            next.add(href);
+            return next;
+        });
+    }, []);
+    const collapseItem = useCallback((href) => {
+        setExpandedItems(prev => {
+            if (!prev.has(href))
+                return prev;
+            const next = new Set(prev);
+            next.delete(href);
+            return next;
+        });
+    }, []);
+    const isExpanded = useCallback((href) => expandedItems.has(href), [expandedItems]);
+    // Auto-expand: when active link changes, ensure its parent chain is expanded.
+    // IMPORTANT: guard so we only set state when we actually add something.
     useEffect(() => {
         if (!activeHref)
             return;
-        const path = findParentItem(activeHref, items);
+        const currentItems = itemsRef.current;
+        const path = findParentItem(activeHref, currentItems);
         const parents = path.split('.').filter(Boolean);
+        if (parents.length === 0)
+            return;
         setExpandedItems(prev => {
+            let changed = false;
             const next = new Set(prev);
-            for (const p of parents)
-                next.add(p);
-            return next;
+            for (const p of parents) {
+                if (!next.has(p)) {
+                    next.add(p);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
         });
-    }, [activeHref, items]);
+    }, [activeHref]);
     const filteredItems = useMemo(() => {
         return activeQuery
             ? nestedFiltering(items, {
@@ -71,11 +110,13 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             })
             : items;
     }, [items, activeQuery]);
+    // Searching should expand all, but do not fight the user forever.
+    // We just set defaultExpanded=true, and individual components can honor it.
     useEffect(() => {
-        if (activeQuery) {
+        if (activeQuery)
             triggerExpandAll();
-        }
     }, [activeQuery, triggerExpandAll]);
+    // Initial collapsed state: explicit prop > localStorage > responsive default.
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
@@ -102,9 +143,8 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         catch {
             console.error('Failed to parse sidebar collapsed state from storage');
         }
-        // No explicit prop and nothing stored → use responsive default
-        const defaultCollapsed = currentBreakpoint === 'small';
-        setSidebarCollapsed(defaultCollapsed);
+        // Nothing stored → responsive default (but we do NOT persist this automatic choice)
+        setSidebarCollapsed(currentBreakpoint === 'small');
     }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
     const persistCollapsed = useCallback((collapsed) => {
         if (typeof window === 'undefined')
@@ -116,26 +156,28 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             console.error('Failed to persist sidebar collapsed state');
         }
     }, []);
+    // Only persist user-triggered changes
     const handleSidebarCollapseChange = useCallback((collapsed) => {
         setSidebarCollapsed(collapsed);
         persistCollapsed(collapsed);
     }, [persistCollapsed]);
     // Resize behavior:
-    // - Track current breakpoint.
-    // - Only when the breakpoint actually changes (small <-> large)
-    //   do we auto-apply the "responsive default" for that breakpoint.
+    // - only apply auto-collapse when breakpoint changes
+    // - do NOT persist the automatic change (only user actions persist)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
+        let lastBreakpoint = getBreakpoint(window.innerWidth);
         const onResize = () => {
             const nextBreakpoint = getBreakpoint(window.innerWidth);
-            const autoCollapsed = nextBreakpoint === 'small';
-            setSidebarCollapsed(autoCollapsed);
-            persistCollapsed(autoCollapsed);
+            if (nextBreakpoint === lastBreakpoint)
+                return;
+            lastBreakpoint = nextBreakpoint;
+            setSidebarCollapsed(nextBreakpoint === 'small');
         };
         window.addEventListener('resize', onResize);
         return () => window.removeEventListener('resize', onResize);
-    }, [persistCollapsed]);
+    }, []);
     const value = useMemo(() => ({
         defaultExpanded,
         expandedItems,
@@ -148,6 +190,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         setItemsCollapsed,
         activeLink: activeHref,
         setActiveLink,
+        expandItem,
+        collapseItem,
+        isExpanded,
         isSidebarCollapsed,
         handleSidebarCollapseChange,
     }), [
@@ -162,6 +207,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         setItemsCollapsed,
         activeHref,
         setActiveLink,
+        expandItem,
+        collapseItem,
+        isExpanded,
         isSidebarCollapsed,
         handleSidebarCollapseChange,
     ]);

package/dist/components/split-button/SplitButton.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 import { Button } from '../button/Button';
 interface SplitButtonItem {
     label?: string;
-    onClick: () => void;
+    onClick: (close?: () => void) => void;
     icon?: ReactNode;
     active?: boolean;
 }

package/dist/components/split-button/SplitButton.js

@@ -4,5 +4,7 @@ import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 export function SplitButton({ children, options, onClick, icon, ...rest }) {
-    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: _jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: option.onClick, children: [option.icon, option.label] }) }, option.label))) }) })] }));
+    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: close => (_jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: e => {
+                                option.onClick(close);
+                            }, children: [option.icon, option.label] }) }, option.label))) })) })] }));
 }

package/dist/components/split-button/SplitButton.module.css

@@ -3,15 +3,15 @@
 }
 
 .container > button:first-child {
-  border-start-start-radius: var(--border-radius-md);
-  border-end-start-radius: var(--border-radius-md);
+  border-start-start-radius: var(--border-radius-default);
+  border-end-start-radius: var(--border-radius-default);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
 .triggerContainer button {
-  border-start-end-radius: var(--border-radius-md);
-  border-end-end-radius: var(--border-radius-md);
+  border-start-end-radius: var(--border-radius-default);
+  border-end-end-radius: var(--border-radius-default);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
   padding-block: 0;

package/dist/components/state-page/StatePage.module.css

@@ -4,6 +4,6 @@
 }
 
 .illustration svg {
-  width: 500px;
+  width: 300px;
   height: auto;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX, ReactNode } from 'react';
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
 import { ViewMode } from '../../hooks/useTableSettings';
@@ -19,13 +19,14 @@ export interface ColumnItem<T> {
     allowWrap?: boolean;
     emptyPlaceholder?: ReactNode;
     width?: number | string;
+    canHide?: boolean;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
 export type TableVariant = 'primary' | 'embedded';
-export interface TableProps<T extends Record<string, any>> {
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLTableElement>, 'onClick'> & {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
@@ -42,6 +43,10 @@ export interface TableProps<T extends Record<string, any>> {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     columnStyles?: Partial<Record<string, React.CSSProperties>>;
     headerBelowRow?: ReactNode;
+    /**
+     * NEW: optional toolbar area above the table (right now used for column selector)
+     */
+    toolbar?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
     viewportBottomOffset?: number;
@@ -58,6 +63,6 @@ export interface TableProps<T extends Record<string, any>> {
     showFirstLast?: boolean;
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
-}
-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;
+} & Omit<HTMLAttributes<HTMLTableElement>, 'onClick'>;
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -9,7 +9,7 @@ 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, }) {
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, toolbar, 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, ...rest }) {
     const filteredColumns = useMemo(() => columns.filter(c => !c.hidden), [columns]);
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
@@ -31,7 +31,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
         min: viewportMin,
         includeMarginTop: viewportIncludeMarginTop,
     });
-    const tableEl = (_jsxs(_Fragment, { children: [_jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, 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 tableEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("table", { ...rest, className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, 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'
@@ -73,12 +73,9 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                         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;
@@ -92,7 +89,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                         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'
+                                                viewMode === 'wrapped'
                                                 ? styles.allowWrap
                                                 : styles.nowrap} `, children: column.render
                                                 ? column.render(row) || ((_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '')

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

@@ -37,19 +37,32 @@
 
 .table .th {
   position: relative;
+
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
-  text-align: start;
+  padding-right: var(--spacing-lg);
+
+  text-align: left;
   vertical-align: middle;
+
   background: inherit;
 
-  color: var(--color-fg-muted);
+  /* Typography */
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
 
+  color: var(--color-fg-subtle);
+
+  /* Truncation */
   white-space: nowrap;
-  min-width: unset;
-  max-width: unset;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* Width control */
+  min-width: 0;
+  max-width: var(--card-label-width);
 }
 
 /* Small variant: header padding */

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -1,8 +1,18 @@
-import type { JSX } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import type { JSX, ReactNode } from 'react';
 import { ViewMode } from '../../../../hooks/useTableSettings';
-interface TableSettingsProps {
+import { ButtonSize } from '../../../button/Button';
+interface TableSettingsProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
+    columns?: ColumnDef<T>[];
+    visibleColumnIds?: string[];
+    onVisibleColumnIdsChange?: (nextVisibleIds: string[]) => void;
+    columnsLabel?: string;
+    allPresetLabel?: string;
+    standardPresetLabel?: string;
+    buttonSize?: ButtonSize;
+    additionalSettings?: (close?: () => void) => ReactNode;
 }
-export declare function TableSettings({ viewMode, handleChangeViewMode }: TableSettingsProps): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, buttonSize, additionalSettings, }: TableSettingsProps<T>): JSX.Element;
 export {};

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

@@ -1,12 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'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 }) {
+export function TableSettings({ viewMode, handleChangeViewMode, columns = [], visibleColumnIds = [], onVisibleColumnIdsChange, columnsLabel = 'Kolonner', allPresetLabel = 'Alle', standardPresetLabel = 'Standard', buttonSize = 'sm', additionalSettings, }) {
     const handleViewModeChange = (mode, close) => {
-        handleChangeViewMode(mode === 'compact' ? 'compact' : 'comfortable');
+        handleChangeViewMode(mode === 'wrapped' ? 'compact' : 'wrapped');
         close === null || close === void 0 ? void 0 : close();
     };
-    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { onClick: onClick, children: [_jsx(Settings, {}), icon] })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: viewMode === 'compact', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange('compact', close), children: [_jsx(ListChevronsDownUp, {}), "Kompakt"] }) }) })) }));
+    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/tanstack.d.ts

@@ -3,12 +3,23 @@ import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 import { ViewMode } from '../../hooks/useTableSettings';
 type Filterable<T> = Array<keyof T>;
-export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles'> & {
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
     onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
+    initialSortBy?: string;
+    initialSortDirection?: 'asc' | 'desc';
     variant?: TableVariant;
     viewMode?: ViewMode;
+    /**
+     * TanStack-agnostic column visibility input.
+     *
+     * If provided, this list is the single source of truth for which columns are visible.
+     * If not provided (or empty), defaults are derived from ColumnDef meta.hidden.
+     *
+     * NOTE: Passing [] is treated as "unset" and will fall back to defaults.
+     */
+    visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
 export {};

package/dist/components/table/tanstack.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
 import * as React from 'react';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
 function getColumnId(def, index) {
     const d = def;
     if (d.id != null && String(d.id).length)
@@ -12,9 +12,20 @@ function getColumnId(def, index) {
         return String(d.accessorKey);
     return `col_${index}`;
 }
-function mapDefsToColumnItems(defs) {
+function buildDefaultVisibleIdsFromDefs(defs) {
+    const ids = [];
+    defs.forEach((def, idx) => {
+        var _a;
+        const id = getColumnId(def, idx);
+        const hiddenByMeta = Boolean((_a = def.meta) === null || _a === void 0 ? void 0 : _a.hidden);
+        if (!hiddenByMeta)
+            ids.push(id);
+    });
+    return ids;
+}
+function mapDefsToColumnItems(defs, columnVisibility) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -39,41 +50,62 @@ function mapDefsToColumnItems(defs) {
         else {
             render = () => null;
         }
+        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
         return {
             id,
             header: def.header,
             accessor: accessorKey,
-            sortable: (_a = def.enableSorting) !== null && _a !== void 0 ? _a : !!accessorKey,
+            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
             render,
-            hidden: (_c = (_b = def.meta) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c : false,
-            align: (_e = (_d = def.meta) === null || _d === void 0 ? void 0 : _d.align) !== null && _e !== void 0 ? _e : undefined,
-            verticalAlign: (_g = (_f = def.meta) === null || _f === void 0 ? void 0 : _f.verticalAlign) !== null && _g !== void 0 ? _g : undefined,
-            fitContent: (_j = (_h = def.meta) === null || _h === void 0 ? void 0 : _h.fitContent) !== null && _j !== void 0 ? _j : false,
-            emptyPlaceholder: (_l = (_k = def.meta) === null || _k === void 0 ? void 0 : _k.emptyPlaceholder) !== null && _l !== void 0 ? _l : '-',
-            allowWrap: (_o = (_m = def.meta) === null || _m === void 0 ? void 0 : _m.allowWrap) !== null && _o !== void 0 ? _o : false,
-            fillWidth: (_q = (_p = def.meta) === null || _p === void 0 ? void 0 : _p.fillWidth) !== null && _q !== void 0 ? _q : false,
-            severity: (_s = (_r = def.meta) === null || _r === void 0 ? void 0 : _r.severity) !== null && _s !== void 0 ? _s : undefined,
+            hidden: !isVisible,
+            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
+            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
+            fitContent: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.fitContent) !== null && _h !== void 0 ? _h : false,
+            emptyPlaceholder: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.emptyPlaceholder) !== null && _k !== void 0 ? _k : '-',
+            allowWrap: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.allowWrap) !== null && _m !== void 0 ? _m : false,
+            fillWidth: (_p = (_o = def.meta) === null || _o === void 0 ? void 0 : _o.fillWidth) !== null && _p !== void 0 ? _p : false,
+            severity: (_r = (_q = def.meta) === null || _q === void 0 ? void 0 : _q.severity) !== null && _r !== void 0 ? _r : undefined,
         };
     });
 }
 export function TanstackTable(props) {
     var _a, _b;
-    const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
+    const { data, dataKey, columns, filterable = [], onSortingChange, initialSortBy, initialSortDirection, visibleColumnIds, ...tableProps } = props;
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnSizing, setColumnSizing] = React.useState({});
+    // IDs in the same order as defs
+    const allColumnIds = React.useMemo(() => columns.map((def, i) => getColumnId(def, i)), [columns]);
+    // Defaults derived from ColumnDef meta.hidden
+    const defaultVisibleIds = React.useMemo(() => buildDefaultVisibleIdsFromDefs(columns), [columns]);
+    // Treat [] as "unset" and fall back to defaults
+    const effectiveVisibleIds = React.useMemo(() => {
+        if (visibleColumnIds && visibleColumnIds.length > 0)
+            return visibleColumnIds;
+        return defaultVisibleIds;
+    }, [visibleColumnIds, defaultVisibleIds]);
+    // TanStack visibility state
+    const [columnVisibility, setColumnVisibility] = React.useState(() => {
+        const visible = new Set(effectiveVisibleIds);
+        const next = {};
+        for (const id of allColumnIds)
+            next[id] = visible.has(id);
+        return next;
+    });
     const table = useReactTable({
         data,
         columns: columns,
-        state: { sorting, columnFilters, columnSizing },
+        state: { sorting, columnFilters, columnSizing, columnVisibility },
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
         onColumnSizingChange: setColumnSizing,
+        onColumnVisibilityChange: setColumnVisibility,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
+        initialState: {},
         defaultColumn: {
             enableResizing: true,
             minSize: 80,
@@ -81,7 +113,28 @@ export function TanstackTable(props) {
             maxSize: 800,
         },
     });
-    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns), [columns]);
+    // Apply external "visibleColumnIds" -> TanStack column visibility using toggleVisibility,
+    // as requested (no selector UI here).
+    React.useEffect(() => {
+        const desired = new Set(effectiveVisibleIds);
+        for (const id of allColumnIds) {
+            const col = table.getColumn(id);
+            if (!col)
+                continue;
+            const shouldBeVisible = desired.has(id);
+            if (col.getIsVisible() !== shouldBeVisible) {
+                col.toggleVisibility(shouldBeVisible);
+            }
+        }
+    }, [table, allColumnIds, effectiveVisibleIds]);
+    React.useEffect(() => {
+        if (initialSortDirection !== 'asc' && initialSortDirection !== 'desc')
+            return table.setSorting([]);
+        table.setSorting(() => initialSortBy && initialSortDirection
+            ? [{ id: initialSortBy, desc: initialSortDirection === 'desc' }]
+            : []);
+    }, [initialSortBy, initialSortDirection, table]);
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
     const visibleData = table.getRowModel().rows.map(r => r.original);
     const s = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0];
     const sortById = (_b = s === null || s === void 0 ? void 0 : s.id) !== null && _b !== void 0 ? _b : undefined;
@@ -149,14 +202,13 @@ export function TanstackTable(props) {
             }) }));
     }, [columnItems, filterable, table, gridTemplateColumns]);
     return (_jsx(Table, { ...tableProps, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, onSortChange: (col, dir) => {
-            var _a, _b, _c;
-            const id = String(col.id);
-            if (!id)
-                return;
-            if (!dir)
+            var _a;
+            if (dir == null) {
                 table.setSorting([]);
-            else
-                table.setSorting([{ id, desc: dir === 'desc' }]);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_c = (_b = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null, dir);
+                onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(null, null);
+                return;
+            }
+            table.setSorting([{ id: col.id, desc: dir === 'desc' }]);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_a = col.id) !== null && _a !== void 0 ? _a : null, dir);
         }, headerExtras: headerExtras, columnStyles: columnStyles, headerBelowRow: headerBelowRow }));
 }