@dbcdk/react-components 0.0.184 → 0.0.186

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/section-label/SectionLabel';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/card/Card';
+export * from './components/print-friendly/printSelection';
 export * from './components/card-container/CardContainer';
 export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 export * from './components/skeleton-loader/SkeletonLoader';

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './components/section-label/SectionLabel';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/card/Card';
+export * from './components/print-friendly/printSelection';
 export * from './components/card-container/CardContainer';
 export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 export * from './components/skeleton-loader/SkeletonLoader';

package/dist/styles/styles.css

@@ -99,11 +99,14 @@ body.dbc-app {
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-table-header);
   line-height: var(--line-height-table-header);
   color: var(--table-header-fg);
   letter-spacing: var(--letter-spacing-wide);
   font-weight: normal;
+  /* A bit more breathing room between the label and its value than the
+     shared th/td padding-inline gives on its own. */
+  padding-right: var(--spacing-xs);
 }
 
 .dbc-table td {
@@ -233,7 +236,7 @@ tr.dbc-table--hover:hover td:last-child {
 }
 
 .dbc-sm-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
 }
 
 .dbc-md-text {
@@ -379,3 +382,72 @@ tr.dbc-table--hover:hover td:last-child {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+
+/* ==========================================================================
+   Print
+   ========================================================================== */
+
+@media print {
+  /* --- What to print (only content explicitly opted in via
+     printSelection()'s NOT_PRINTABLE_ATTRIBUTE gate, or a Modal) --- */
+  body[data-not-printable='true'] > *:not([data-not-printable='false']):not([role='dialog']) {
+    display: none !important;
+  }
+  body [data-not-printable='true'] {
+    display: none !important;
+  }
+
+  /* --- Page setup --- */
+  @page {
+    size: A4;
+    margin: 12mm;
+  }
+
+  html,
+  body {
+    height: auto !important; /* avoid 100vh/100% truncation */
+    overflow: visible !important; /* allow pagination */
+  }
+  * {
+    overflow: visible !important;
+    transform: none !important;
+  }
+
+  /* Modal (components/overlay/modal/Modal) portals a position:fixed,
+     scroll-clipped overlay directly onto body, wrapping the actual
+     `role="dialog"` element. It has no class or attribute of its own to
+     target, but it's always body's direct child that contains the dialog,
+     so :has() reaches it. */
+  body > div:has([role='dialog']) {
+    position: static !important;
+    inset: auto !important;
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  [role='dialog'] {
+    position: static !important;
+    width: 100% !important;
+    max-width: none !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    transform: none !important;
+    contain: none !important;
+    box-shadow: none !important;
+  }
+
+  /* --- Page breaks --- */
+  /* Use this class on any element that should start on a new page. */
+  .dbc-page-break-before:not(:first-of-type) {
+    margin-top: 0 !important;
+    break-before: page !important;
+    page-break-before: always !important; /* legacy */
+  }
+  /* Utility to discourage breaking inside certain blocks. */
+  .dbc-avoid-break,
+  [role='dialog'] {
+    break-inside: auto !important;
+    page-break-inside: auto !important;
+  }
+}

package/dist/styles.css

@@ -99,11 +99,14 @@ body.dbc-app {
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-table-header);
   line-height: var(--line-height-table-header);
   color: var(--table-header-fg);
   letter-spacing: var(--letter-spacing-wide);
   font-weight: normal;
+  /* A bit more breathing room between the label and its value than the
+     shared th/td padding-inline gives on its own. */
+  padding-right: var(--spacing-xs);
 }
 
 .dbc-table td {
@@ -233,7 +236,7 @@ tr.dbc-table--hover:hover td:last-child {
 }
 
 .dbc-sm-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
 }
 
 .dbc-md-text {
@@ -379,3 +382,72 @@ tr.dbc-table--hover:hover td:last-child {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+
+/* ==========================================================================
+   Print
+   ========================================================================== */
+
+@media print {
+  /* --- What to print (only content explicitly opted in via
+     printSelection()'s NOT_PRINTABLE_ATTRIBUTE gate, or a Modal) --- */
+  body[data-not-printable='true'] > *:not([data-not-printable='false']):not([role='dialog']) {
+    display: none !important;
+  }
+  body [data-not-printable='true'] {
+    display: none !important;
+  }
+
+  /* --- Page setup --- */
+  @page {
+    size: A4;
+    margin: 12mm;
+  }
+
+  html,
+  body {
+    height: auto !important; /* avoid 100vh/100% truncation */
+    overflow: visible !important; /* allow pagination */
+  }
+  * {
+    overflow: visible !important;
+    transform: none !important;
+  }
+
+  /* Modal (components/overlay/modal/Modal) portals a position:fixed,
+     scroll-clipped overlay directly onto body, wrapping the actual
+     `role="dialog"` element. It has no class or attribute of its own to
+     target, but it's always body's direct child that contains the dialog,
+     so :has() reaches it. */
+  body > div:has([role='dialog']) {
+    position: static !important;
+    inset: auto !important;
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  [role='dialog'] {
+    position: static !important;
+    width: 100% !important;
+    max-width: none !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    transform: none !important;
+    contain: none !important;
+    box-shadow: none !important;
+  }
+
+  /* --- Page breaks --- */
+  /* Use this class on any element that should start on a new page. */
+  .dbc-page-break-before:not(:first-of-type) {
+    margin-top: 0 !important;
+    break-before: page !important;
+    page-break-before: always !important; /* legacy */
+  }
+  /* Utility to discourage breaking inside certain blocks. */
+  .dbc-avoid-break,
+  [role='dialog'] {
+    break-inside: auto !important;
+    page-break-inside: auto !important;
+  }
+}

package/dist/utils/date/formatDate.d.ts

@@ -24,7 +24,7 @@
  *   local "today", since that part is genuinely about the viewer's current day.
  * @returns A formatted string
  */
-export declare function formatDate(date: Date | string | number, options?: {
+export interface FormatDateOptions {
     showTime?: boolean;
     showSeconds?: boolean;
     userFriendlyLabel?: boolean;
@@ -32,4 +32,5 @@ export declare function formatDate(date: Date | string | number, options?: {
     ignoreDate?: boolean;
     ignoreDateIfSame?: boolean;
     ignoreTimezone?: boolean;
-}): string;
+}
+export declare function formatDate(date: Date | string | number, options?: FormatDateOptions): string;

package/package.json

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