@dbcdk/react-components 0.0.33 → 0.0.35

package/dist/components/button/Button.module.css

@@ -27,6 +27,7 @@
 .buttonLink {
   color: inherit;
   text-decoration: none;
+  user-select: default;
 }
 
 .button:hover {

package/dist/components/card/components/CardMeta.js

@@ -15,10 +15,10 @@ export function CardMeta({ columns = 2, className, children, ...rest }) {
     const colsClass = getColsClass(columns);
     return (_jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(' '), children: children }));
 }
-export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue = true, }) {
+export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, boldValue = false, }) {
     return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [
                     styles.value,
-                    !boldValue ? styles.valueRegular : '',
+                    !boldValue ? styles.valueRegular : styles.valueBold,
                     nowrapValue ? styles.nowrap : '',
                 ]
                     .filter(Boolean)

package/dist/components/card/components/CardMeta.module.css

@@ -41,13 +41,13 @@
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-default);
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.valueRegular {
-  font-weight: var(--font-weight-default);
+.valueBold {
+  font-weight: var(--font-weight-medium);
 }
 
 .nowrap {

package/dist/components/datetime-picker/DateTimePicker.d.ts

@@ -22,6 +22,7 @@ type InputProps = React.ComponentProps<typeof Input>;
 type BaseProps = {
     mode?: Mode;
     enableTime?: boolean;
+    showCalendarIcon?: boolean;
     timeStep?: number;
     min?: Date;
     max?: Date;

package/dist/components/datetime-picker/DateTimePicker.js

@@ -52,7 +52,7 @@ function defaultFormatRange(s, e, opts) {
     return '';
 }
 const cx = (...classes) => classes.filter(Boolean).join(' ');
-export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, onOpenChange, }, _ref) {
+export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, showCalendarIcon = true, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, onOpenChange, }, _ref) {
     void formatDate;
     void formatRange;
     const popRef = useRef(null);
@@ -360,7 +360,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
                             e.preventDefault();
                             commitTypedValue();
                         }
-                    }, icon: _jsx(Calendar, { size: 16 }), onClear: formatted || text ? clear : undefined, "aria-haspopup": "dialog", "aria-expanded": ((_b = popRef.current) === null || _b === void 0 ? void 0 : _b.isOpen()) ? true : false, disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, error: inputProps === null || inputProps === void 0 ? void 0 : inputProps.error }) }));
+                    }, icon: showCalendarIcon ? _jsx(Calendar, { size: 16 }) : undefined, onClear: formatted || text ? clear : undefined, "aria-haspopup": "dialog", "aria-expanded": ((_b = popRef.current) === null || _b === void 0 ? void 0 : _b.isOpen()) ? true : false, disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, error: inputProps === null || inputProps === void 0 ? void 0 : inputProps.error }) }));
         }, viewportPadding: 8, children: _jsxs("div", { className: cx(styles.panel, !!(presets === null || presets === void 0 ? void 0 : presets.length) && styles.panelWithPresets), children: [(presets === null || presets === void 0 ? void 0 : presets.length) ? (_jsxs("div", { className: styles.presetsCol, children: [_jsx("div", { className: styles.presetsLabel, children: "Forvalg" }), _jsxs("div", { className: styles.presetsList, children: [presets.map(p => (_jsx(Button, { variant: "outlined", size: "sm", onClick: () => {
                                         var _a;
                                         const r = p.getRange();

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -1,9 +1,9 @@
 .container {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-sm);
   vertical-align: middle;
-  line-height: 0;
+  line-height: var(--line-height-normal);
 }
 
 .checkbox {
@@ -31,6 +31,12 @@
 .label {
   display: block;
   font-size: var(--font-size-sm);
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: var(--line-height-normal);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .checkbox:hover {

package/dist/components/forms/multi-select/MultiSelect.d.ts

@@ -17,6 +17,9 @@ interface MultiSelectProps<T> {
     dataCy?: string;
     fullWidth?: boolean;
     disabled?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
 }
-export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, }: MultiSelectProps<T>): ReactNode;
+export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, searchable, searchPlaceholder, emptyMessage, }: MultiSelectProps<T>): ReactNode;
 export {};

package/dist/components/forms/multi-select/MultiSelect.js

@@ -1,28 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Square } from 'lucide-react';
+import { Check, Search, Square } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '../../../components/button/Button';
 import { Chip } from '../../../components/chip/Chip';
 import { ClearButton } from '../../../components/clear-button/ClearButton';
+import { Input } from '../../../components/forms/input/Input';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
-export function MultiSelect({ options, selectedValues = [], onChange, placeholder = 'Vælg', children, variant = 'outlined', size = 'md', onClear, dataCy, fullWidth = false, disabled = false, }) {
+export function MultiSelect({ options, selectedValues = [], onChange, placeholder = 'Vælg', children, variant = 'outlined', size = 'md', onClear, dataCy, fullWidth = false, disabled = false, searchable = false, searchPlaceholder = 'Søg', emptyMessage = 'Ingen resultater', }) {
     const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
     const popoverRef = useRef(null);
     const optionRefs = useRef([]);
+    const searchInputRef = useRef(null);
     const typeaheadRef = useRef('');
     const typeaheadTimeoutRef = useRef(null);
     const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredOptions = useMemo(() => {
+        const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return options;
+        return options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
+    }, [options, searchQuery]);
     const [activeIndex, setActiveIndex] = useState(() => {
-        const selectedIndex = options.findIndex(option => selectedSet.has(option.value));
+        const selectedIndex = filteredOptions.findIndex(option => selectedSet.has(option.value));
         return selectedIndex >= 0 ? selectedIndex : 0;
     });
     useEffect(() => {
         var _a;
         if (!open)
             return;
+        if (searchable && document.activeElement === searchInputRef.current)
+            return;
         (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, open]);
+    }, [activeIndex, open, searchable]);
     useEffect(() => {
         return () => {
             if (typeaheadTimeoutRef.current)
@@ -30,9 +41,22 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
         };
     }, []);
     const resetActiveIndex = () => {
-        const selectedIndex = options.findIndex(option => selectedSet.has(option.value));
+        const selectedIndex = filteredOptions.findIndex(option => selectedSet.has(option.value));
         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
     };
+    useEffect(() => {
+        setActiveIndex(current => {
+            if (filteredOptions.length === 0)
+                return 0;
+            return Math.min(current, filteredOptions.length - 1);
+        });
+    }, [filteredOptions]);
+    useEffect(() => {
+        var _a;
+        if (!open || !searchable)
+            return;
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [open, searchable]);
     const toggleValue = (value) => {
         if (disabled)
             return;
@@ -52,14 +76,14 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
     };
     const findTypeaheadMatch = (query, startIndex) => {
         var _a, _b;
-        if (!query || options.length === 0)
+        if (!query || filteredOptions.length === 0)
             return -1;
         const normalizedQuery = query.trim().toLocaleLowerCase();
         if (!normalizedQuery)
             return -1;
-        for (let step = 1; step <= options.length; step += 1) {
-            const index = (startIndex + step + options.length) % options.length;
-            const label = (_b = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
+        for (let step = 1; step <= filteredOptions.length; step += 1) {
+            const index = (startIndex + step + filteredOptions.length) % filteredOptions.length;
+            const label = (_b = (_a = filteredOptions[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
             if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
                 return index;
         }
@@ -88,7 +112,21 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
             setOpen(true);
     };
     const handleKeyDown = (e) => {
-        var _a;
+        var _a, _b, _c, _d;
+        if (searchable && e.target === searchInputRef.current) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (filteredOptions.length > 0)
+                        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                    return;
+                case 'Escape':
+                    e.preventDefault();
+                    (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                    return;
+            }
+            return;
+        }
         if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
             e.preventDefault();
             handleTypeahead(e.key);
@@ -101,7 +139,7 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
                     setOpen(true);
                     return;
                 }
-                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                setActiveIndex(i => Math.min(i + 1, filteredOptions.length - 1));
                 break;
             case 'ArrowUp':
                 e.preventDefault();
@@ -109,6 +147,12 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
                     setOpen(true);
                     return;
                 }
+                if (searchable && optionRefs.current[activeIndex] === document.activeElement) {
+                    if (activeIndex === 0) {
+                        (_c = searchInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                        return;
+                    }
+                }
                 setActiveIndex(i => Math.max(i - 1, 0));
                 break;
             case 'Home':
@@ -121,7 +165,7 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
                 if (!open)
                     return;
                 e.preventDefault();
-                setActiveIndex(options.length - 1);
+                setActiveIndex(filteredOptions.length - 1);
                 break;
             case 'Enter':
             case ' ':
@@ -131,14 +175,14 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
                     setOpen(true);
                     return;
                 }
-                if (options[activeIndex])
-                    toggleValue(options[activeIndex].value);
+                if (filteredOptions[activeIndex])
+                    toggleValue(filteredOptions[activeIndex].value);
                 break;
             case 'Escape':
                 if (!open)
                     return;
                 e.preventDefault();
-                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                (_d = popoverRef.current) === null || _d === void 0 ? void 0 : _d.close();
                 break;
         }
     };
@@ -146,12 +190,14 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
             setOpen(next);
             if (next)
                 resetActiveIndex();
-        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", children: `${selectedValues.length}` })) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, children: options.map((option, index) => (_jsx(Menu.Item, { active: index === activeIndex, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", role: "menuitemcheckbox", "aria-checked": selectedSet.has(option.value), tabIndex: index === activeIndex ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => {
-                        toggleValue(option.value);
-                    }, children: [_jsx("span", { style: {
-                                pointerEvents: 'none',
-                                display: 'flex',
-                                alignItems: 'center',
-                                color: !selectedSet.has(option.value) ? 'var(--color-border-strong)' : 'inherit',
-                            }, children: selectedSet.has(option.value) ? _jsx(Check, {}) : _jsx(Square, {}) }), option.label] }) }, option.value))) }) }));
+            else
+                setSearchQuery('');
+        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", children: `${selectedValues.length}` })) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsxs(Menu, { onKeyDown: handleKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => (_jsx(Menu.Item, { active: index === activeIndex, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", role: "menuitemcheckbox", "aria-checked": selectedSet.has(option.value), tabIndex: index === activeIndex ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => {
+                            toggleValue(option.value);
+                        }, children: [_jsx("span", { style: {
+                                    pointerEvents: 'none',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    color: !selectedSet.has(option.value) ? 'var(--color-border-strong)' : 'inherit',
+                                }, children: selectedSet.has(option.value) ? _jsx(Check, {}) : _jsx(Square, {}) }), _jsx("span", { children: option.label })] }) }, option.value))), filteredOptions.length === 0 ? _jsx(Menu.Item, { disabled: true, children: emptyMessage }) : null] }) }));
 }

package/dist/components/menu/Menu.module.css

@@ -21,7 +21,7 @@
 /* Applied to actual interactive elements (button/a/custom that forwards className) */
 .interactive {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   gap: var(--spacing-xs);
   inline-size: 100%;
@@ -37,6 +37,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
   color: var(--color-fg-default);
   cursor: pointer;
 
@@ -47,6 +48,13 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
+.interactive > :last-child {
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 /*
   Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
   so that menu row styling still works for components that render a wrapper.
@@ -60,7 +68,7 @@
 /* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
 .row > .interactiveChild {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   inline-size: 100%;
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);

package/dist/components/pagination/Pagination.js

@@ -7,9 +7,11 @@ import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+const NUMBER_LOCALE = 'da-DK';
 export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
     const popoverRef = useRef(null);
     const pageSizeRef = useRef(null);
+    const formatNumber = useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
     const totalPages = useMemo(() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))), [itemsCount, take]);
     const currentPage = useMemo(() => {
         const p = Math.floor(skip / Math.max(1, take)) + 1;
@@ -38,17 +40,17 @@ export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_
             return '0 af 0';
         const first = skip + 1;
         const last = Math.min(skip + take, itemsCount);
-        return `${first.toLocaleString('da-DK')}\u2013${last.toLocaleString('da-DK')} af ${itemsCount.toLocaleString('da-DK')}`;
-    }, [itemsCount, skip, take]);
+        return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
+    }, [formatNumber, itemsCount, skip, take]);
     const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
     const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
-    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { ref: popoverRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages === null || pages === void 0 ? void 0 : pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { ref: popoverRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", formatNumber(currentPage), "/", formatNumber(totalPages), " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages === null || pages === void 0 ? void 0 : pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => {
                                 var _a;
                                 goToPage(page);
                                 (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                            }, children: page }) }, page))) }) })), _jsx(Popover, { ref: pageSizeRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => {
+                            }, children: formatNumber(page) }) }, page))) }) })), _jsx(Popover, { ref: pageSizeRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", formatNumber(take), " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => {
                                 var _a;
                                 handlePageSizeChange(size);
                                 (_a = pageSizeRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                            }, children: size }) }, size))) }) })] }));
+                            }, children: formatNumber(size) }) }, size))) }) })] }));
 }

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

@@ -1,3 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, gridTemplateColumns, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, tableWidth, tableRootRef, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -8,25 +8,18 @@ import { TableHeader } from './components/TableHeader';
 import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { buildDefaultGridTemplate, getVisibleColumns } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, gridTemplateColumns, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
+import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, tableWidth, tableRootRef, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
     const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const selectionInputName = useId();
     const hasSelection = Boolean(selectedRows && onRowSelect);
-    const template = useMemo(() => {
-        return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({
-            hasSelection,
-            colCount: visibleColumns.length,
-        }));
-    }, [gridTemplateColumns, hasSelection, visibleColumns.length]);
-    const gridStyle = useMemo(() => ({ ['--grid-template']: template }), [template]);
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
-    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection, gridStyle: gridStyle })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, gridStyle: gridStyle, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
+    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
     const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], getRowSeverity && styles.severityTable);
-    const tableShell = (_jsx("div", { ...rest, className: tableClassName, role: "table", "aria-rowcount": data.length, children: _jsxs("div", { className: styles.tableContent, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: _jsx(TableHeader, { columns: visibleColumns, gridStyle: gridStyle, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }) }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));
+    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {
                 flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',