@dbcdk/react-components 0.0.188 → 0.0.190

package/dist/components/metric-tile/MetricTile.js

@@ -45,6 +45,7 @@ const MetricTileBase = ({
   label,
   icon,
   value,
+  onClick,
   tooltip,
   size = "md",
   variant = "filled",
@@ -63,14 +64,38 @@ const MetricTileBase = ({
   const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
   const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
   const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  const isClickable = onClick != null;
+  const handleKeyDown = (event) => {
+    if (!isClickable) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (!isClickable) return;
+    if (event.key === " ") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+  };
   return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs(
     "span",
     {
       className: styles.tile,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
       "data-severity": severity,
       "data-size": size,
       "data-variant": variant,
+      "data-clickable": isClickable ? "true" : void 0,
       style,
+      onClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       children: [
         /* @__PURE__ */ jsxs("span", { className: styles.labelRow, children: [
           icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }) : null,

package/dist/components/metric-tile/MetricTile.module.css

@@ -19,6 +19,14 @@
   cursor: default;
 }
 
+.tile[data-clickable='true'] {
+  cursor: pointer;
+}
+
+.tile[data-clickable='true']:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
 .tile[data-size='sm'] {
   gap: 1px;
   padding: 6px var(--spacing-sm);

package/dist/components/nav-bar/NavBar.d.ts

@@ -4,6 +4,7 @@ export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem
 type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    badge?: number | string;
     iconWidth?: string | number;
     enabled?: boolean;
     tags?: string[];

package/dist/components/overlay/tooltip/TooltipProvider.cjs

@@ -119,7 +119,7 @@ function TooltipLayer() {
     const triggerRect = trigger.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
     if (bubbleRect.width === 0 || bubbleRect.height === 0) {
-      if (visible) setVisible(false);
+      setVisible((prev) => prev ? false : prev);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(recompute);
       return;
@@ -158,13 +158,17 @@ function TooltipLayer() {
       lastPlacementRef.current = chosen;
       setPlacement(chosen);
     }
-    if (!visible) setVisible(true);
-  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+    setVisible((prev) => prev ? prev : true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset]);
   react.useEffect(() => {
     const nextOpen = !!(active == null ? void 0 : active.open);
     setOpen((prev) => prev === nextOpen ? prev : nextOpen);
-    if (nextOpen) setVisible(false);
-    if (!nextOpen) lastActiveIdRef.current = null;
+    if (nextOpen) {
+      setVisible(false);
+    } else {
+      setVisible(false);
+      lastActiveIdRef.current = null;
+    }
   }, [active == null ? void 0 : active.open]);
   react.useLayoutEffect(() => {
     var _a;

package/dist/components/overlay/tooltip/TooltipProvider.js

@@ -113,7 +113,7 @@ function TooltipLayer() {
     const triggerRect = trigger.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
     if (bubbleRect.width === 0 || bubbleRect.height === 0) {
-      if (visible) setVisible(false);
+      setVisible((prev) => prev ? false : prev);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(recompute);
       return;
@@ -152,13 +152,17 @@ function TooltipLayer() {
       lastPlacementRef.current = chosen;
       setPlacement(chosen);
     }
-    if (!visible) setVisible(true);
-  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+    setVisible((prev) => prev ? prev : true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset]);
   useEffect(() => {
     const nextOpen = !!(active == null ? void 0 : active.open);
     setOpen((prev) => prev === nextOpen ? prev : nextOpen);
-    if (nextOpen) setVisible(false);
-    if (!nextOpen) lastActiveIdRef.current = null;
+    if (nextOpen) {
+      setVisible(false);
+    } else {
+      setVisible(false);
+      lastActiveIdRef.current = null;
+    }
   }, [active == null ? void 0 : active.open]);
   useLayoutEffect(() => {
     var _a;

package/dist/components/page-layout/PageLayout.module.css

@@ -16,6 +16,9 @@
   --page-layout-banner-height: calc(
     var(--spacing-2xs) * 2 + var(--font-size-md) * var(--line-height-normal)
   );
+
+  /* Structural bottom breathing room for all page content. */
+  --page-layout-content-padding-bottom: var(--spacing-2xl);
 }
 
 /* Viewport handling:
@@ -215,7 +218,11 @@
   align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-md);
+  padding-block-start: var(--spacing-md);
+  padding-inline: var(--spacing-md);
+  padding-block-end: calc(
+    var(--page-layout-content-padding-bottom) + env(safe-area-inset-bottom, 0px)
+  );
   overflow: visible;
 }
 

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -7,6 +7,7 @@ function SidebarItem({
   component: Component,
   label,
   icon,
+  badge,
   href,
   iconWidth,
   truncateLabel
@@ -18,6 +19,7 @@ function SidebarItem({
     SidebarItemContent.SidebarItemContent,
     {
       icon,
+      badge,
       iconWidth,
       label,
       href,

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -3,9 +3,10 @@ interface SidebarItemProps {
     component?: React.ElementType;
     label: string;
     icon: React.ReactNode;
+    badge?: number | string;
     href?: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -5,6 +5,7 @@ function SidebarItem({
   component: Component,
   label,
   icon,
+  badge,
   href,
   iconWidth,
   truncateLabel
@@ -16,6 +17,7 @@ function SidebarItem({
     SidebarItemContent,
     {
       icon,
+      badge,
       iconWidth,
       label,
       href,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -21,6 +21,7 @@ function ExpandableSidebarItem({
   items,
   label,
   icon,
+  badge,
   component: Component,
   href,
   iconWidth,
@@ -85,6 +86,7 @@ function ExpandableSidebarItem({
           items: (_b = item.children) != null ? _b : [],
           label: item.label,
           icon: item.icon,
+          badge: item.badge,
           href: item.href,
           iconWidth: item.iconWidth,
           component: item.component
@@ -98,6 +100,7 @@ function ExpandableSidebarItem({
         component: item.component,
         label: item.label,
         icon: item.icon,
+        badge: item.badge,
         href: item.href,
         iconWidth: item.iconWidth,
         truncateLabel: item.truncateLabel
@@ -112,6 +115,7 @@ function ExpandableSidebarItem({
         {
           headerStyle: expanded,
           icon,
+          badge,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -5,9 +5,10 @@ type ExpandableSidebarItemProps = {
     label: string;
     component: React.ElementType;
     icon: React.ReactNode;
+    badge?: number | string;
     href: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, badge, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -15,6 +15,7 @@ function ExpandableSidebarItem({
   items,
   label,
   icon,
+  badge,
   component: Component,
   href,
   iconWidth,
@@ -79,6 +80,7 @@ function ExpandableSidebarItem({
           items: (_b = item.children) != null ? _b : [],
           label: item.label,
           icon: item.icon,
+          badge: item.badge,
           href: item.href,
           iconWidth: item.iconWidth,
           component: item.component
@@ -92,6 +94,7 @@ function ExpandableSidebarItem({
         component: item.component,
         label: item.label,
         icon: item.icon,
+        badge: item.badge,
         href: item.href,
         iconWidth: item.iconWidth,
         truncateLabel: item.truncateLabel
@@ -106,6 +109,7 @@ function ExpandableSidebarItem({
         {
           headerStyle: expanded,
           icon,
+          badge,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var getHighlightedSegments = require('../../../../utils/text/get-highlighted-segments');
 var styles = require('./SidebarItemContent.module.css');
+var Chip = require('../../../chip/Chip');
 var SidebarProvider = require('../../providers/SidebarProvider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,6 +16,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function SidebarItemContent({
   icon,
   label,
+  badge,
   suffixIcon,
   href,
   iconWidth,
@@ -45,7 +47,10 @@ function SidebarItemContent({
             }
           )
         ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
+        !isSidebarCollapsed && (badge != null || suffixIcon) ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.trailing, children: [
+          badge != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: typeof badge === "number" ? badge.toLocaleString("da-DK") : badge }) }) : null,
+          suffixIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon }) : null
+        ] }) : null
       ]
     }
   );

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -3,6 +3,7 @@ import type { JSX } from 'react';
 export interface SidebarItemContentProps {
     icon?: React.ReactNode;
     label: React.ReactNode;
+    badge?: number | string;
     suffixIcon?: React.ReactNode;
     href?: string;
     iconWidth?: string | number;
@@ -10,4 +11,4 @@ export interface SidebarItemContentProps {
     headerStyle?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -3,11 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getHighlightedSegments } from '../../../../utils/text/get-highlighted-segments';
 import styles from './SidebarItemContent.module.css';
+import { Chip } from '../../../chip/Chip';
 import { useSidebar } from '../../providers/SidebarProvider';
 
 function SidebarItemContent({
   icon,
   label,
+  badge,
   suffixIcon,
   href,
   iconWidth,
@@ -38,7 +40,10 @@ function SidebarItemContent({
             }
           )
         ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
+        !isSidebarCollapsed && (badge != null || suffixIcon) ? /* @__PURE__ */ jsxs("span", { className: styles.trailing, children: [
+          badge != null ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: typeof badge === "number" ? badge.toLocaleString("da-DK") : badge }) }) : null,
+          suffixIcon ? /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon }) : null
+        ] }) : null
       ]
     }
   );

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -87,6 +87,20 @@
   color: inherit;
 }
 
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  min-inline-size: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+}
+
 .collapsed svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -26,13 +26,23 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      const {
+        component: Component2,
+        label: label2,
+        icon: icon2,
+        badge: badge2,
+        children,
+        href: href2,
+        iconWidth: iconWidth2,
+        truncateLabel: truncateLabel2
+      } = item;
       return /* @__PURE__ */ jsxRuntime.jsx(
         ExpandableSidebarItem.ExpandableSidebarItem,
         {
           items: children,
           label: label2,
           icon: icon2,
+          badge: badge2,
           href: href2,
           iconWidth: iconWidth2,
           truncateLabel: truncateLabel2,
@@ -41,13 +51,14 @@ function SidebarItems({ activeLink }) {
         key
       );
     }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    const { component: Component, label, icon, badge, href, iconWidth, truncateLabel } = item;
     return /* @__PURE__ */ jsxRuntime.jsx(
       SidebarItem.SidebarItem,
       {
         component: Component,
         label,
         icon,
+        badge,
         href,
         iconWidth,
         truncateLabel

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -20,13 +20,23 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      const {
+        component: Component2,
+        label: label2,
+        icon: icon2,
+        badge: badge2,
+        children,
+        href: href2,
+        iconWidth: iconWidth2,
+        truncateLabel: truncateLabel2
+      } = item;
       return /* @__PURE__ */ jsx(
         ExpandableSidebarItem,
         {
           items: children,
           label: label2,
           icon: icon2,
+          badge: badge2,
           href: href2,
           iconWidth: iconWidth2,
           truncateLabel: truncateLabel2,
@@ -35,13 +45,14 @@ function SidebarItems({ activeLink }) {
         key
       );
     }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    const { component: Component, label, icon, badge, href, iconWidth, truncateLabel } = item;
     return /* @__PURE__ */ jsx(
       SidebarItem,
       {
         component: Component,
         label,
         icon,
+        badge,
         href,
         iconWidth,
         truncateLabel

package/dist/components/table/Table.cjs

@@ -197,6 +197,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
+                hasRowContextMenu: Boolean(getContextMenuItems),
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,

package/dist/components/table/Table.js

@@ -191,6 +191,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
+                hasRowContextMenu: Boolean(getContextMenuItems),
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,

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

@@ -58,6 +58,7 @@
   --table-component-cell-fg: var(--table-cell-fg);
   --table-component-cell-border: var(--table-border-subtle);
   --table-component-divider: var(--table-divider);
+  --table-row-actions-reserve-inline: calc(var(--component-size-md) + 4px + var(--spacing-2xs));
 
   display: flex;
   flex-direction: column;
@@ -184,17 +185,16 @@
   background: var(--table-component-row-bg);
   overflow: hidden;
   line-height: 20px;
-  height: 40px;
 }
 
 .md .headerCell {
   padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
 }
 
 .md .cell {
   padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
 }
 
 .sm .headerCell {
@@ -207,7 +207,6 @@
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   line-height: 20px;
-  height: 32px;
 }
 
 .sm .contextMenuTrigger {
@@ -371,6 +370,10 @@
   justify-content: flex-start;
 }
 
+.thMainWithActionsReserve {
+  padding-inline-end: var(--table-row-actions-reserve-inline);
+}
+
 .thMainRight {
   justify-content: flex-end;
 }
@@ -620,7 +623,7 @@
 }
 
 .cellContentWithActions {
-  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-sm));
+  padding-inline-end: var(--table-row-actions-reserve-inline);
 }
 
 .contextMenuTrigger:hover,

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

@@ -12,6 +12,7 @@ export interface ColumnItem<T> {
     render?: (item: T) => ReactNode;
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
+    muted?: boolean;
     verticalAlign?: 'top' | 'middle' | 'bottom';
     divider?: 'right' | 'left';
     allowWrap?: boolean;

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

@@ -13,6 +13,7 @@ function TableHeader({
   columns,
   hasSelection,
   selectionMode,
+  hasRowContextMenu,
   allRowsSelected,
   onSelectAllRows,
   sortById,
@@ -42,6 +43,7 @@ function TableHeader({
           {
             column,
             index,
+            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
             sortById,
             sortDirection,
             onSortChange,

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

@@ -4,6 +4,7 @@ type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
+    hasRowContextMenu: boolean;
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
     sortById?: string;
@@ -12,5 +13,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

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

@@ -7,6 +7,7 @@ function TableHeader({
   columns,
   hasSelection,
   selectionMode,
+  hasRowContextMenu,
   allRowsSelected,
   onSelectAllRows,
   sortById,
@@ -36,6 +37,7 @@ function TableHeader({
           {
             column,
             index,
+            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
             sortById,
             sortDirection,
             onSortChange,

package/dist/components/table/components/TableHeaderCell.cjs

@@ -13,6 +13,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeaderCell({
   column,
   index,
+  reserveInlineEnd = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -30,14 +31,14 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
-      className: styles__default.default.headerCell,
+      className: table_classes.cx(styles__default.default.headerCell, column.muted && "dbc-muted-text"),
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: table_classes.cx(alignClasses.main, reserveInlineEnd && styles__default.default.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",

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

@@ -3,10 +3,11 @@ import type { ColumnItem, SortDirection } from '../Table.types';
 type Props<T> = {
     column: ColumnItem<T>;
     index: number;
+    reserveInlineEnd?: boolean;
     sortById?: string;
     sortDirection?: SortDirection;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
     extraContent?: ReactNode;
 };
-export declare function TableHeaderCell<T>({ column, index, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
+export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
 export {};

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

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowUp, ArrowDown } from 'lucide-react';
-import { getAlignValue, getHeaderAlignClasses } from '../table.classes';
+import { getAlignValue, getHeaderAlignClasses, cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { isActiveSort, getAriaSort, getHeaderLabel, shouldToggleOnKey, getNextSortDirection } from '../table.utils';
 
 function TableHeaderCell({
   column,
   index,
+  reserveInlineEnd = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -24,14 +25,14 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxs(
     "th",
     {
-      className: styles.headerCell,
+      className: cx(styles.headerCell, column.muted && "dbc-muted-text"),
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: cx(alignClasses.main, reserveInlineEnd && styles.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",