@dbcdk/react-components 0.0.128 → 0.0.130

package/dist/components/page-layout/PageLayout.cjs

@@ -99,7 +99,7 @@ const PageLayoutBase = ({
     slots.Banner || envBanner ? styles__default.default.hasBanner : ""
   ].filter(Boolean).join(" ");
   const banner = (_b = slots.Banner) != null ? _b : envBanner;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, "data-contain-scrolling": containScrolling || void 0, children: [
     banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: banner }) : null,
     slots.Sidebar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sidebar, children: slots.Sidebar }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainColumn, children: [

package/dist/components/page-layout/PageLayout.js

@@ -93,7 +93,7 @@ const PageLayoutBase = ({
     slots.Banner || envBanner ? styles.hasBanner : ""
   ].filter(Boolean).join(" ");
   const banner = (_b = slots.Banner) != null ? _b : envBanner;
-  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, "data-contain-scrolling": containScrolling || void 0, children: [
     banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: banner }) : null,
     slots.Sidebar ? /* @__PURE__ */ jsx("div", { className: styles.sidebar, children: slots.Sidebar }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles.mainColumn, children: [

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

@@ -1,3 +1,9 @@
+/* When PageLayout owns scrolling, the body shouldn't reserve scrollbar gutter space.
+   This prevents the right-side gap that body { overflow-y: scroll } would otherwise create. */
+:global(body):has([data-contain-scrolling]) {
+  overflow: hidden;
+}
+
 /* Root shell */
 .root {
   width: 100%;
@@ -149,7 +155,7 @@
 }
 
 .vertical .content {
-  padding: var(--spacing-lg) var(--spacing-md);
+  padding: var(--spacing-md);
 }
 
 .footer {

package/dist/components/table/TanstackTable.cjs

@@ -177,7 +177,7 @@ function TanstackTable(props) {
       dataKey,
       data: visibleData,
       columns: columnItems,
-      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      tableWidth: (distributedLayout == null ? void 0 : distributedLayout.shouldOverflow) ? distributedLayout.totalWidth : void 0,
       measuringLayout: !initialLayoutReady,
       sortById,
       sortDirection,

package/dist/components/table/TanstackTable.js

@@ -152,7 +152,7 @@ function TanstackTable(props) {
       dataKey,
       data: visibleData,
       columns: columnItems,
-      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      tableWidth: (distributedLayout == null ? void 0 : distributedLayout.shouldOverflow) ? distributedLayout.totalWidth : void 0,
       measuringLayout: !initialLayoutReady,
       sortById,
       sortDirection,

package/dist/components/table/tanstackTable.utils.cjs

@@ -93,7 +93,14 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
+  const {
+    table,
+    hasSelection,
+    hasContextMenu = false,
+    defaultMinPx,
+    columnSizing,
+    availableWidth
+  } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
   const contextMenuWidth = hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : 0;
@@ -155,15 +162,14 @@ function buildDistributedColumnWidths(args) {
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = Math.min(
-    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
-    availableWidth
-  );
+  const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
     contextMenuWidth: hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
-    totalWidth
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
   };
 }
 

package/dist/components/table/tanstackTable.utils.d.ts

@@ -14,7 +14,7 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
 export declare function buildDistributedColumnWidths(args: {
     table: any;
     hasSelection: boolean;
-    hasContextMenu: boolean;
+    hasContextMenu?: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
@@ -23,5 +23,7 @@ export declare function buildDistributedColumnWidths(args: {
     contextMenuWidth?: number;
     widths: Record<string, number>;
     totalWidth: number;
+    availableWidth: number;
+    shouldOverflow: boolean;
 };
 export {};

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

@@ -91,7 +91,14 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
+  const {
+    table,
+    hasSelection,
+    hasContextMenu = false,
+    defaultMinPx,
+    columnSizing,
+    availableWidth
+  } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
   const contextMenuWidth = hasContextMenu ? CONTEXT_MENU_COLUMN_PX : 0;
@@ -153,15 +160,14 @@ function buildDistributedColumnWidths(args) {
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = Math.min(
-    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
-    availableWidth
-  );
+  const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
     contextMenuWidth: hasContextMenu ? CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
-    totalWidth
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
   };
 }
 

package/dist/styles/themes/dbc/colors.css

@@ -29,7 +29,7 @@ html {
   --dbc-neutral-900: light-dark(#1a1a1a, #f9fafb);
   --dbc-neutral-700: light-dark(#374151, #d1d5db);
   --dbc-neutral-600: light-dark(#5f6368, #9ca3af);
-  --dbc-neutral-200: light-dark(#e5e7eb, #374151);
+  --dbc-neutral-200: light-dark(#e8eaee, #374151);
   --dbc-neutral-100: light-dark(#f3f4f6, #1f2937);
 
   /* Added fixed surface neutrals */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.128",
+  "version": "0.0.130",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",