@dbcdk/react-components 0.0.127 → 0.0.129

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

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var EnvironmentBanner = require('../../components/environment-banner/EnvironmentBanner');
 var styles = require('./PageLayout.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -13,6 +14,17 @@ function getMaxWidthClass(value, styles2) {
   if (value === "sm") return styles2.maxWidthSm;
   return styles2.maxWidthMd;
 }
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: normalised });
+  }
+  return null;
+}
 function getSlotName(el) {
   var _a;
   const t = el.type;
@@ -71,19 +83,24 @@ PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
 const PageLayoutBase = ({
   children,
   containScrolling = false,
-  orientation = "vertical"
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
 }) => {
-  var _a;
+  var _a, _b;
   const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
   const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsxRuntime.jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
   const rootClass = [
     styles__default.default.root,
     orientation === "vertical" ? styles__default.default.vertical : styles__default.default.horizontal,
     containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling,
-    slots.Banner ? styles__default.default.hasBanner : ""
+    slots.Banner || envBanner ? styles__default.default.hasBanner : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, children: [
-    slots.Banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: slots.Banner }) : null,
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
+  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: [
       slots.Header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: slots.Header }) : null,

package/dist/components/page-layout/PageLayout.d.ts

@@ -1,4 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
 type Orientation = 'vertical' | 'horizontal';
 export type PageLayoutMaxWidth = boolean | 'sm' | 'md';
 export interface PageLayoutProps extends PropsWithChildren {
@@ -9,6 +10,13 @@ export interface PageLayoutProps extends PropsWithChildren {
      */
     containScrolling?: boolean;
     orientation?: Orientation;
+    /** Pass a deployment environment string (e.g. process.env.DEPLOYMENT_ENV).
+     *  Renders a banner for 'production', 'staging', or 'test'. Ignored for unknown values or undefined. */
+    environment?: string;
+    /** Custom banner label — requires customEnvSeverity. */
+    customEnv?: string;
+    /** Severity for the custom banner. */
+    customEnvSeverity?: Severity;
 }
 export interface PageLayoutHeaderProps {
     maxWidth?: PageLayoutMaxWidth;

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

@@ -1,5 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Children, isValidElement } from 'react';
+import { EnvironmentBanner } from '../../components/environment-banner/EnvironmentBanner';
 import styles from './PageLayout.module.css';
 
 function getMaxWidthClass(value, styles2) {
@@ -7,6 +8,17 @@ function getMaxWidthClass(value, styles2) {
   if (value === "sm") return styles2.maxWidthSm;
   return styles2.maxWidthMd;
 }
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: normalised });
+  }
+  return null;
+}
 function getSlotName(el) {
   var _a;
   const t = el.type;
@@ -65,19 +77,24 @@ PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
 const PageLayoutBase = ({
   children,
   containScrolling = false,
-  orientation = "vertical"
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
 }) => {
-  var _a;
+  var _a, _b;
   const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
   const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
   const rootClass = [
     styles.root,
     orientation === "vertical" ? styles.vertical : styles.horizontal,
     containScrolling ? styles.containScrolling : styles.documentScrolling,
-    slots.Banner ? styles.hasBanner : ""
+    slots.Banner || envBanner ? styles.hasBanner : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    slots.Banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: slots.Banner }) : null,
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
+  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: [
       slots.Header ? /* @__PURE__ */ jsx("div", { className: styles.header, children: slots.Header }) : null,

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%;

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.127",
+  "version": "0.0.129",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",