@dbcdk/react-components 0.0.185 → 0.0.187

package/dist/components/print-friendly/PrintFriendlyTable.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { AccumulationFooter } from './components/AccumulationFooter';
+import { isValueEmpty, EMPTY_VALUE_PLACEHOLDER } from './emptyValue';
+
+function PrintFriendlyTable({
+  rows = [],
+  cols = [],
+  tableCy,
+  id
+}) {
+  const safeRows = useMemo(
+    () => rows.filter((row) => row.renderEmpty !== false || !isValueEmpty(row.value)),
+    [rows]
+  );
+  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("table", { "data-cy": tableCy, id, children: [
+    cols.length ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((col) => /* @__PURE__ */ jsx("th", { style: { width: col.width, textAlign: col.alignment }, children: col.label }, col.key)) }) }) : /* @__PURE__ */ jsxs("colgroup", { children: [
+      /* @__PURE__ */ jsx("col", {}),
+      /* @__PURE__ */ jsx("col", {})
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: safeRows.map((row) => {
+      var _a;
+      return /* @__PURE__ */ jsx("tr", { "data-cy": row.dataCy, children: cols.length ? cols.map((col) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            style: {
+              textAlign: col.alignment,
+              whiteSpace: col.fitContent ? "nowrap" : void 0
+            },
+            children: (_a2 = row[col.key]) != null ? _a2 : EMPTY_VALUE_PLACEHOLDER
+          },
+          col.key
+        );
+      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("th", { style: { whiteSpace: "nowrap" }, scope: "row", children: [
+          row.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx("td", { children: (_a = row.value) != null ? _a : EMPTY_VALUE_PLACEHOLDER })
+      ] }) }, row.key);
+    }) }),
+    /* @__PURE__ */ jsx(AccumulationFooter, { rows: safeRows, cols })
+  ] }) }) });
+}
+
+export { PrintFriendlyTable };

package/dist/components/print-friendly/components/AccumulationFooter.cjs

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function AccumulationFooter({
+  rows = [],
+  cols = []
+}) {
+  const accumulateKeys = react.useMemo(() => cols.filter((c) => c.accumulate).map((c) => c.key), [cols]);
+  const colTotals = react.useMemo(() => {
+    if (accumulateKeys.length === 0 || rows.length === 0) return {};
+    const totals = Object.fromEntries(accumulateKeys.map((k) => [k, 0]));
+    for (const row of rows) {
+      for (const key of accumulateKeys) {
+        const parsedNumber = Number(row[key]);
+        if (!Number.isNaN(parsedNumber)) totals[key] += parsedNumber;
+      }
+    }
+    return totals;
+  }, [rows, accumulateKeys]);
+  const displayFooter = accumulateKeys.length > 0;
+  if (!displayFooter) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((col, index) => {
+    const isTotal = !!col.accumulate;
+    const style = {
+      textAlign: col.alignment || void 0,
+      whiteSpace: col.fitContent ? "nowrap" : void 0,
+      fontWeight: isTotal ? 700 : void 0
+    };
+    function getCellContent() {
+      var _a;
+      if (index === 0 && !isTotal) return "I alt";
+      if (isTotal) return (_a = colTotals[col.key]) != null ? _a : null;
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("td", { style, children: getCellContent() }, `${col.key}-footer`);
+  }) }) });
+}
+
+exports.AccumulationFooter = AccumulationFooter;

package/dist/components/print-friendly/components/AccumulationFooter.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'react';
+import type { PrintFriendlyTableCol, PrintFriendlyTableRow } from '../PrintFriendlyTable';
+interface AccumulationFooterProps {
+    rows?: PrintFriendlyTableRow[];
+    cols?: PrintFriendlyTableCol[];
+}
+/** Renders a totals row under a PrintFriendlyTable's body, one cell per column flagged `accumulate`. */
+export declare function AccumulationFooter({ rows, cols, }: AccumulationFooterProps): JSX.Element | null;
+export {};

package/dist/components/print-friendly/components/AccumulationFooter.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+
+function AccumulationFooter({
+  rows = [],
+  cols = []
+}) {
+  const accumulateKeys = useMemo(() => cols.filter((c) => c.accumulate).map((c) => c.key), [cols]);
+  const colTotals = useMemo(() => {
+    if (accumulateKeys.length === 0 || rows.length === 0) return {};
+    const totals = Object.fromEntries(accumulateKeys.map((k) => [k, 0]));
+    for (const row of rows) {
+      for (const key of accumulateKeys) {
+        const parsedNumber = Number(row[key]);
+        if (!Number.isNaN(parsedNumber)) totals[key] += parsedNumber;
+      }
+    }
+    return totals;
+  }, [rows, accumulateKeys]);
+  const displayFooter = accumulateKeys.length > 0;
+  if (!displayFooter) return null;
+  return /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, index) => {
+    const isTotal = !!col.accumulate;
+    const style = {
+      textAlign: col.alignment || void 0,
+      whiteSpace: col.fitContent ? "nowrap" : void 0,
+      fontWeight: isTotal ? 700 : void 0
+    };
+    function getCellContent() {
+      var _a;
+      if (index === 0 && !isTotal) return "I alt";
+      if (isTotal) return (_a = colTotals[col.key]) != null ? _a : null;
+      return null;
+    }
+    return /* @__PURE__ */ jsx("td", { style, children: getCellContent() }, `${col.key}-footer`);
+  }) }) });
+}
+
+export { AccumulationFooter };

package/dist/components/print-friendly/emptyValue.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const EMPTY_VALUE_PLACEHOLDER = "(tom)";
+function isValueEmpty(value) {
+  return value === null || value === void 0 || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.filter(Boolean).length === 0;
+}
+
+exports.EMPTY_VALUE_PLACEHOLDER = EMPTY_VALUE_PLACEHOLDER;
+exports.isValueEmpty = isValueEmpty;

package/dist/components/print-friendly/emptyValue.d.ts

@@ -0,0 +1,2 @@
+export declare const EMPTY_VALUE_PLACEHOLDER = "(tom)";
+export declare function isValueEmpty(value: unknown): boolean;

package/dist/components/print-friendly/emptyValue.js

@@ -0,0 +1,6 @@
+const EMPTY_VALUE_PLACEHOLDER = "(tom)";
+function isValueEmpty(value) {
+  return value === null || value === void 0 || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.filter(Boolean).length === 0;
+}
+
+export { EMPTY_VALUE_PLACEHOLDER, isValueEmpty };

package/dist/components/print-friendly/printSelection.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const NOT_PRINTABLE_ATTRIBUTE_NAME = "data-not-printable";
+const PRINTABLE_ATTRIBUTE = { [NOT_PRINTABLE_ATTRIBUTE_NAME]: false };
+const NOT_PRINTABLE_ATTRIBUTE = { [NOT_PRINTABLE_ATTRIBUTE_NAME]: true };
+function printSelection() {
+  window.document.body.setAttribute(NOT_PRINTABLE_ATTRIBUTE_NAME, "true");
+  window.print();
+  window.document.body.removeAttribute(NOT_PRINTABLE_ATTRIBUTE_NAME);
+}
+
+exports.NOT_PRINTABLE_ATTRIBUTE = NOT_PRINTABLE_ATTRIBUTE;
+exports.PRINTABLE_ATTRIBUTE = PRINTABLE_ATTRIBUTE;
+exports.printSelection = printSelection;

package/dist/components/print-friendly/printSelection.d.ts

@@ -0,0 +1,19 @@
+/** Spread onto an element to explicitly include it in a filtered print, overriding an ancestor's NOT_PRINTABLE_ATTRIBUTE. */
+export declare const PRINTABLE_ATTRIBUTE: {
+    "data-not-printable": boolean;
+};
+/** Spread onto an element to exclude it (and its subtree) from a filtered print. */
+export declare const NOT_PRINTABLE_ATTRIBUTE: {
+    "data-not-printable": boolean;
+};
+/**
+ * Prints only explicitly-opted-in content instead of the whole page: marks
+ * `document.body` as not-printable (hiding everything except elements
+ * carrying PRINTABLE_ATTRIBUTE, plus any `role="dialog"` element - see the
+ * @media print rules this pairs with), triggers the browser print dialog,
+ * then restores normal printing.
+ *
+ * Typical use: a "print this" button on a modal that itself carries
+ * PRINTABLE_ATTRIBUTE, so only that modal's content ends up on the page.
+ */
+export declare function printSelection(): void;

package/dist/components/print-friendly/printSelection.js

@@ -0,0 +1,10 @@
+const NOT_PRINTABLE_ATTRIBUTE_NAME = "data-not-printable";
+const PRINTABLE_ATTRIBUTE = { [NOT_PRINTABLE_ATTRIBUTE_NAME]: false };
+const NOT_PRINTABLE_ATTRIBUTE = { [NOT_PRINTABLE_ATTRIBUTE_NAME]: true };
+function printSelection() {
+  window.document.body.setAttribute(NOT_PRINTABLE_ATTRIBUTE_NAME, "true");
+  window.print();
+  window.document.body.removeAttribute(NOT_PRINTABLE_ATTRIBUTE_NAME);
+}
+
+export { NOT_PRINTABLE_ATTRIBUTE, PRINTABLE_ATTRIBUTE, printSelection };

package/dist/components/stack/Stack.cjs

@@ -28,10 +28,11 @@ const Stack = react.forwardRef(function Stack2({
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
-  const resolvedStyle = maxWidth != null ? {
-    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
-    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
-    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+  const resolvedStyle = maxWidth != null || typeof grow === "number" ? {
+    ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+    ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+    ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...typeof grow === "number" ? { flexGrow: grow, flexBasis: 0 } : {},
     ...style
   } : style;
   const classes = [
@@ -40,7 +41,7 @@ const Stack = react.forwardRef(function Stack2({
     gap ? `dbc-gap-${gap}` : void 0,
     align ? `dbc-items-${align}` : void 0,
     justify ? `dbc-justify-${justify}` : void 0,
-    grow ? "dbc-flex-grow" : void 0,
+    grow === true ? "dbc-flex-grow" : void 0,
     wrap ? "dbc-flex-wrap" : void 0,
     mobileDirection ? styles__default.default[`mobileDirection${mobileDirection.charAt(0).toUpperCase()}${mobileDirection.slice(1)}`] : void 0,
     mobileGap ? styles__default.default[`mobileGap${mobileGap.charAt(0).toUpperCase()}${mobileGap.slice(1)}`] : void 0,

package/dist/components/stack/Stack.d.ts

@@ -9,7 +9,8 @@ type StackOwnProps = {
     gap?: GapSize;
     align?: StackAlign;
     justify?: StackJustify;
-    grow?: boolean;
+    /** true = flex-grow: 1. A number = flex-grow: n with flex-basis: 0, for proportional splits (e.g. grow={2} takes twice the space of grow={1}) */
+    grow?: boolean | number;
     wrap?: boolean;
     mobileDirection?: StackDirection;
     mobileGap?: GapSize;

package/dist/components/stack/Stack.js

@@ -22,10 +22,11 @@ const Stack = forwardRef(function Stack2({
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
-  const resolvedStyle = maxWidth != null ? {
-    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
-    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
-    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+  const resolvedStyle = maxWidth != null || typeof grow === "number" ? {
+    ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+    ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+    ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...typeof grow === "number" ? { flexGrow: grow, flexBasis: 0 } : {},
     ...style
   } : style;
   const classes = [
@@ -34,7 +35,7 @@ const Stack = forwardRef(function Stack2({
     gap ? `dbc-gap-${gap}` : void 0,
     align ? `dbc-items-${align}` : void 0,
     justify ? `dbc-justify-${justify}` : void 0,
-    grow ? "dbc-flex-grow" : void 0,
+    grow === true ? "dbc-flex-grow" : void 0,
     wrap ? "dbc-flex-wrap" : void 0,
     mobileDirection ? styles[`mobileDirection${mobileDirection.charAt(0).toUpperCase()}${mobileDirection.slice(1)}`] : void 0,
     mobileGap ? styles[`mobileGap${mobileGap.charAt(0).toUpperCase()}${mobileGap.slice(1)}`] : void 0,

package/dist/components/table/Table.cjs

@@ -32,7 +32,7 @@ function Table({
   size = "md",
   viewMode,
   fillViewport = false,
-  fillViewportBottomOffset = 16,
+  fillViewportBottomOffset = 0,
   containScrolling = true,
   stickyHeader,
   tableWidth,
@@ -67,6 +67,20 @@ function Table({
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const paginationRef = react.useRef(null);
+  const [paginationHeight, setPaginationHeight] = react.useState(0);
+  react.useEffect(() => {
+    const element = paginationRef.current;
+    if (!element) return;
+    const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
+    const frame = requestAnimationFrame(measure);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+    observer == null ? void 0 : observer.observe(element);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [hasPagination]);
   const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = react.useCallback((rowId) => {
     setExpandedRows((prev) => {
@@ -79,12 +93,12 @@ function Table({
       return next;
     });
   }, []);
-  const paginationOffset = hasPagination ? 72 : 0;
-  const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
+  const paginationOffset = hasPagination && paginationPlacement === "bottom" ? paginationHeight : 0;
+  const { style: viewportFillStyle } = useViewportFill.useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
     min: 0
   });
-  const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
+  const fillViewportActive = fillViewport && containScrolling;
   const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
   const setTableRootRef = react.useCallback((node) => {
     internalTableRootRef.current = node;
@@ -125,6 +139,8 @@ function Table({
   const paginationEl = hasPagination ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: paginationRef,
+      "data-cy": `pagination-toolbar-${paginationPlacement}`,
       className: table_classes.cx(
         styles__default.default.paginationSlot,
         paginationPlacement === "top" && styles__default.default.paginationSlotTop

package/dist/components/table/Table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useId, useRef, useState, useCallback } from 'react';
+import { useMemo, useId, useRef, useState, useEffect, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
@@ -26,7 +26,7 @@ function Table({
   size = "md",
   viewMode,
   fillViewport = false,
-  fillViewportBottomOffset = 16,
+  fillViewportBottomOffset = 0,
   containScrolling = true,
   stickyHeader,
   tableWidth,
@@ -61,6 +61,20 @@ function Table({
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const paginationRef = useRef(null);
+  const [paginationHeight, setPaginationHeight] = useState(0);
+  useEffect(() => {
+    const element = paginationRef.current;
+    if (!element) return;
+    const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
+    const frame = requestAnimationFrame(measure);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+    observer == null ? void 0 : observer.observe(element);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [hasPagination]);
   const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = useCallback((rowId) => {
     setExpandedRows((prev) => {
@@ -73,12 +87,12 @@ function Table({
       return next;
     });
   }, []);
-  const paginationOffset = hasPagination ? 72 : 0;
-  const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
+  const paginationOffset = hasPagination && paginationPlacement === "bottom" ? paginationHeight : 0;
+  const { style: viewportFillStyle } = useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
     min: 0
   });
-  const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
+  const fillViewportActive = fillViewport && containScrolling;
   const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
   const setTableRootRef = useCallback((node) => {
     internalTableRootRef.current = node;
@@ -119,6 +133,8 @@ function Table({
   const paginationEl = hasPagination ? /* @__PURE__ */ jsx(
     "div",
     {
+      ref: paginationRef,
+      "data-cy": `pagination-toolbar-${paginationPlacement}`,
       className: cx(
         styles.paginationSlot,
         paginationPlacement === "top" && styles.paginationSlotTop

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

@@ -120,6 +120,12 @@
   z-index: 10;
 }
 
+/* Sticky embedded headers must cover the rows scrolling underneath. */
+.embedded .header[data-sticky='true'] {
+  --table-component-header-bg: var(--table-row-bg);
+  background-color: var(--table-component-header-bg);
+}
+
 .headerRow,
 .row {
   position: relative;

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

@@ -57,6 +57,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     size?: 'sm' | 'md';
     viewMode?: ViewMode;
     fillViewport?: boolean;
+    /** Extra space below the table, in addition to measured layout/pagination spacing. Defaults to 0. */
     fillViewportBottomOffset?: number;
     containScrolling?: boolean;
     stickyHeader?: StickyHeader;

package/dist/components/table/components/TableHeader.cjs

@@ -25,6 +25,7 @@ function TableHeader({
     "thead",
     {
       className: styles__default.default.header,
+      "data-sticky": Boolean(stickyTop),
       style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.headerRow, children: [
         hasSelection ? /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -19,6 +19,7 @@ function TableHeader({
     "thead",
     {
       className: styles.header,
+      "data-sticky": Boolean(stickyTop),
       style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
       children: /* @__PURE__ */ jsxs("tr", { className: styles.headerRow, children: [
         hasSelection ? /* @__PURE__ */ jsx(

package/dist/components/tabs/Tabs.cjs

@@ -57,6 +57,7 @@ function Tabs({
   onRemoveTab,
   onAddTab,
   addition,
+  tabListAddition,
   loading = false,
   children
 }) {
@@ -149,44 +150,52 @@ function Tabs({
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabButtons, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
-          const selected = index === activeIndex;
-          const tabDomId = `${uid}-tab-${String(tab.id)}`;
-          const panelDomId = `${uid}-panel-${String(tab.id)}`;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                id: tabDomId,
-                type: "button",
-                className: styles__default.default.tabButton,
-                role: "tab",
-                "aria-selected": selected,
-                "aria-controls": panelDomId,
-                tabIndex: selected ? 0 : -1,
-                disabled: tab.disabled,
-                onClick: () => setValue(tab.id),
-                onKeyDown: (e) => onKeyDownTab(e, index),
-                children: [
-                  tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
-                  tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                ]
-              }
-            ),
-            tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: styles__default.default.removeTabButton,
-                "aria-label": `Fjern fane ${tab.header}`,
-                disabled: tab.disabled,
-                onClick: () => onRemoveTab(tab.id, tab, index),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-              }
-            ) : null
-          ] }, tab.id);
-        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
+            role: "tablist",
+            "aria-label": header != null ? header : "Tabs",
+            children: visibleTabs.map((tab, index) => {
+              const selected = index === activeIndex;
+              const tabDomId = `${uid}-tab-${String(tab.id)}`;
+              const panelDomId = `${uid}-panel-${String(tab.id)}`;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    id: tabDomId,
+                    type: "button",
+                    className: styles__default.default.tabButton,
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": panelDomId,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: tab.disabled,
+                    onClick: () => setValue(tab.id),
+                    onKeyDown: (e) => onKeyDownTab(e, index),
+                    children: [
+                      tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+                      tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                    ]
+                  }
+                ),
+                tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles__default.default.removeTabButton,
+                    "aria-label": `Fjern fane ${tab.header}`,
+                    disabled: tab.disabled,
+                    onClick: () => onRemoveTab(tab.id, tab, index),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] }, tab.id);
+            })
+          }
+        ),
         onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -196,7 +205,8 @@ function Tabs({
             "aria-label": "Tilf\xF8j fane",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
           }
-        ) : null
+        ) : null,
+        tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",

package/dist/components/tabs/Tabs.d.ts

@@ -33,6 +33,8 @@ export interface TabsProps {
     /** Shows an add-tab button and notifies the caller. The caller owns creating and selecting the tab. */
     onAddTab?: () => void;
     addition?: ReactNode;
+    /** Extra content rendered in the tab-list row, next to the tab buttons (e.g. filters). */
+    tabListAddition?: ReactNode;
     loading?: boolean;
     /** Composition API */
     children?: ReactNode;
@@ -51,7 +53,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, loading, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, tabListAddition, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }