@dbcdk/react-components 0.0.185 → 0.0.187

package/dist/components/timeline/components/TimelineRow.js

@@ -0,0 +1,141 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown, MoreVertical } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/button/Button';
+import { Circle } from '../../../components/circle/Circle';
+import { Menu } from '../../../components/menu/Menu';
+import { Popover } from '../../../components/popover/Popover';
+import { useCollapsibleHeight } from '../../../hooks/useCollapsibleHeight';
+import { formatDate } from '../../../utils/date/formatDate';
+import styles from './TimelineRow.module.css';
+
+function TimelineRow({
+  uid,
+  index,
+  item,
+  isLast,
+  isOpen,
+  onToggle,
+  shouldAnimate = true,
+  variant = "default",
+  renderMode = "lazy",
+  size = "md"
+}) {
+  var _a, _b;
+  const isDisabled = !!item.disabled;
+  const isCollapsible = !!item.collapsible;
+  const hasContextMenu = Boolean((_a = item.contextMenuItems) == null ? void 0 : _a.length);
+  const buttonId = `${uid}-tl-btn-${index}`;
+  const panelId = `${uid}-tl-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(
+    isCollapsible ? isOpen : true,
+    shouldAnimate
+  );
+  const [hasBeenOpened, setHasBeenOpened] = useState(isOpen);
+  const shouldRenderContent = !isCollapsible || renderMode === "eager" || isOpen || hasBeenOpened;
+  const contentClassName = [styles.content, variant === "outlined" ? styles.outlined : ""].filter(Boolean).join(" ");
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.row} ${isDisabled ? styles.disabled : ""}`,
+      "data-state": isCollapsible ? isOpen ? "open" : "closed" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.markerColumn, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.markerSlot, children: item.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.icon }) : /* @__PURE__ */ jsx(Circle, { severity: (_b = item.severity) != null ? _b : "neutral", size }) }),
+          !isLast ? /* @__PURE__ */ jsx("span", { className: styles.connector, "aria-hidden": "true" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${styles.headerRow} ${hasContextMenu ? styles.headerRowWithActions : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.label, children: item.label }),
+            item.date !== void 0 ? /* @__PURE__ */ jsx("span", { className: styles.date, children: formatDate(item.date, { userFriendlyLabel: true, ...item.dateOptions }) }) : null,
+            isCollapsible ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                id: buttonId,
+                className: styles.trigger,
+                "aria-expanded": isOpen,
+                "aria-controls": panelId,
+                "aria-label": isOpen ? "Collapse" : "Expand",
+                onClick: handleToggle,
+                disabled: isDisabled,
+                children: /* @__PURE__ */ jsx("span", { className: `${styles.chevron} ${isOpen ? styles.open : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+              }
+            ) : null,
+            hasContextMenu ? /* @__PURE__ */ jsx(TimelineRowActions, { items: item.contextMenuItems }) : null
+          ] }),
+          isCollapsible ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": buttonId,
+              className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
+              style: { height },
+              onTransitionEnd,
+              children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: contentClassName, children: shouldRenderContent ? item.content : null })
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: contentClassName, children: item.content })
+        ] })
+      ]
+    }
+  );
+}
+function TimelineRowActions({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.contextMenuOverlay, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          className: styles.contextMenuTrigger,
+          "aria-label": "Flere handlinger",
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          icon: /* @__PURE__ */ jsx(MoreVertical, { size: 16 }),
+          onClick: toggle
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map(
+        (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
+          Menu.Item,
+          {
+            active: item.active,
+            selected: item.selected,
+            disabled: item.disabled,
+            variant: item.variant,
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  item.onClick();
+                  close();
+                },
+                children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
+                  item.icon,
+                  /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
+                ] })
+              }
+            )
+          },
+          index
+        )
+      ) })
+    }
+  ) });
+}
+
+export { TimelineRow };

package/dist/components/timeline/components/TimelineRow.module.css

@@ -0,0 +1,195 @@
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--tl-gap);
+  /* Scopes the marker column and the body to the same font-size, so their
+     em-based min-heights (see .markerSlot and .headerRow) agree and the
+     marker dot lines up with the header row instead of floating above it. */
+  font-size: var(--tl-font-size);
+}
+
+.markerColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex: 0 0 auto;
+}
+
+.markerSlot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.5em;
+  flex: 0 0 auto;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.connector {
+  flex: 1 1 auto;
+  width: var(--border-width-thin);
+  min-height: var(--spacing-sm);
+  margin-block-start: var(--spacing-2xs);
+  background-color: var(--color-border-subtle);
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-block-end: var(--tl-row-gap);
+  font-size: var(--tl-font-size);
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: 1.5em;
+  position: relative;
+}
+
+.headerRowWithActions {
+  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-2xs));
+}
+
+.label {
+  font-weight: 600;
+  color: var(--color-fg-subtle);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.date {
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-sm);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+}
+
+.chevron {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.chevron svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+.panel {
+  overflow: hidden;
+  height: 0px;
+}
+
+.animate {
+  transition: height var(--transition-slow) var(--ease-decelerate);
+}
+
+.noAnimate {
+  transition: none;
+}
+
+.content {
+  padding-block-start: var(--spacing-xs);
+}
+
+.content.outlined {
+  margin-block-start: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-bg-surface);
+}
+
+/*
+ * Absolutely positioned (like Table's row actions) so the kebab trigger
+ * never contributes to .headerRow's height - it would otherwise be much
+ * taller than a text line and throw off the marker dot's alignment.
+ */
+.contextMenuOverlay {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * Popover's own wrapper divs (.container/.triggerSlot) default to
+ * align-items: stretch and height: 100%, meant for a trigger that should
+ * fill a fixed-height row. Overridden here (rather than in Popover.module.css)
+ * so the kebab button sizes itself instead of stretching, without affecting
+ * other Popover consumers.
+ */
+.contextMenuOverlay > div,
+.contextMenuOverlay > div > div {
+  align-items: center;
+  height: auto;
+}
+
+.contextMenuTrigger {
+  color: var(--color-fg-subtle);
+  min-inline-size: calc(var(--component-size-md) + 4px);
+  min-block-size: calc(var(--component-size-md) + 4px);
+  border-radius: var(--border-radius-rounded);
+}
+
+.contextMenuItemLabel {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.contextMenuItemText {
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    transition: none;
+  }
+}

package/dist/hooks/useCollapsibleHeight.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var react = require('react');
+
+function useCollapsibleHeight(isOpen, shouldAnimate) {
+  const innerRef = react.useRef(null);
+  const [height, setHeight] = react.useState("0px");
+  const prevIsOpenRef = react.useRef(isOpen);
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    const el = innerRef.current;
+    if (!el) return;
+    const prevIsOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    const isOpenChanged = prevIsOpen !== isOpen;
+    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
+    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
+      setHeight(isOpen ? "auto" : "0px");
+      return;
+    }
+    if (isOpen) {
+      setHeight("0px");
+      requestAnimationFrame(() => {
+        setHeight(`${el.scrollHeight}px`);
+      });
+    } else {
+      setHeight(`${el.scrollHeight}px`);
+      requestAnimationFrame(() => {
+        setHeight("0px");
+      });
+    }
+  }, [isOpen, shouldAnimate]);
+  function onTransitionEnd(e) {
+    if (e.propertyName !== "height") return;
+    if (!innerRef.current) return;
+    if (isOpen) setHeight("auto");
+  }
+  return { innerRef, height, onTransitionEnd };
+}
+
+exports.useCollapsibleHeight = useCollapsibleHeight;

package/dist/hooks/useCollapsibleHeight.d.ts

@@ -0,0 +1,6 @@
+import { type TransitionEvent } from 'react';
+export declare function useCollapsibleHeight(isOpen: boolean, shouldAnimate: boolean): {
+    innerRef: import("react").RefObject<HTMLDivElement | null>;
+    height: string;
+    onTransitionEnd: (e: TransitionEvent<HTMLDivElement>) => void;
+};

package/dist/hooks/useCollapsibleHeight.js

@@ -0,0 +1,39 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+
+function useCollapsibleHeight(isOpen, shouldAnimate) {
+  const innerRef = useRef(null);
+  const [height, setHeight] = useState("0px");
+  const prevIsOpenRef = useRef(isOpen);
+  useLayoutEffect(() => {
+    var _a, _b;
+    const el = innerRef.current;
+    if (!el) return;
+    const prevIsOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    const isOpenChanged = prevIsOpen !== isOpen;
+    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
+    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
+      setHeight(isOpen ? "auto" : "0px");
+      return;
+    }
+    if (isOpen) {
+      setHeight("0px");
+      requestAnimationFrame(() => {
+        setHeight(`${el.scrollHeight}px`);
+      });
+    } else {
+      setHeight(`${el.scrollHeight}px`);
+      requestAnimationFrame(() => {
+        setHeight("0px");
+      });
+    }
+  }, [isOpen, shouldAnimate]);
+  function onTransitionEnd(e) {
+    if (e.propertyName !== "height") return;
+    if (!innerRef.current) return;
+    if (isOpen) setHeight("auto");
+  }
+  return { innerRef, height, onTransitionEnd };
+}
+
+export { useCollapsibleHeight };

package/dist/hooks/useViewportFill.cjs

@@ -16,7 +16,15 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
       const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
       top -= marginTop;
     }
-    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    let ancestorBottomSpacing = 0;
+    for (let ancestor = el.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      const style2 = window.getComputedStyle(ancestor);
+      ancestorBottomSpacing += (parseFloat(style2.paddingBottom) || 0) + (parseFloat(style2.borderBottomWidth) || 0) + (parseFloat(style2.marginBottom) || 0);
+    }
+    const next = Math.max(
+      min,
+      Math.floor(window.innerHeight - bottomOffset - ancestorBottomSpacing - top)
+    );
     setMaxHeight((prev) => prev === next ? prev : next);
   }, [ref, bottomOffset, min, includeMarginTop]);
   const scheduleMeasure = react.useCallback(() => {
@@ -47,8 +55,8 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
     if ("ResizeObserver" in window) {
       resizeObserver = new ResizeObserver(() => scheduleMeasure());
       resizeObserver.observe(target);
-      if (parent && parent !== target) {
-        resizeObserver.observe(parent);
+      for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement) {
+        resizeObserver.observe(ancestor);
       }
       if (extra && extra !== target && extra !== parent) {
         resizeObserver.observe(extra);

package/dist/hooks/useViewportFill.js

@@ -14,7 +14,15 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
       const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
       top -= marginTop;
     }
-    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    let ancestorBottomSpacing = 0;
+    for (let ancestor = el.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      const style2 = window.getComputedStyle(ancestor);
+      ancestorBottomSpacing += (parseFloat(style2.paddingBottom) || 0) + (parseFloat(style2.borderBottomWidth) || 0) + (parseFloat(style2.marginBottom) || 0);
+    }
+    const next = Math.max(
+      min,
+      Math.floor(window.innerHeight - bottomOffset - ancestorBottomSpacing - top)
+    );
     setMaxHeight((prev) => prev === next ? prev : next);
   }, [ref, bottomOffset, min, includeMarginTop]);
   const scheduleMeasure = useCallback(() => {
@@ -45,8 +53,8 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
     if ("ResizeObserver" in window) {
       resizeObserver = new ResizeObserver(() => scheduleMeasure());
       resizeObserver.observe(target);
-      if (parent && parent !== target) {
-        resizeObserver.observe(parent);
+      for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement) {
+        resizeObserver.observe(ancestor);
       }
       if (extra && extra !== target && extra !== parent) {
         resizeObserver.observe(extra);

package/dist/index.cjs

@@ -11,6 +11,7 @@ var SectionLabel = require('./components/section-label/SectionLabel');
 var PageLayout = require('./components/page-layout/PageLayout');
 var Footer = require('./components/page-layout/components/footer/Footer');
 var Card = require('./components/card/Card');
+var printSelection = require('./components/print-friendly/printSelection');
 var CardContainer = require('./components/card-container/CardContainer');
 var SkeletonLoaderItem = require('./components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
 var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
@@ -116,6 +117,12 @@ Object.keys(Card).forEach(function (k) {
 		get: function () { return Card[k]; }
 	});
 });
+Object.keys(printSelection).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return printSelection[k]; }
+	});
+});
 Object.keys(CardContainer).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -72,6 +72,8 @@
 @import './components/table/components/column-resizer/ColumnResizer.module.css';
 @import './components/table/components/empty-state/EmptyState.module.css';
 @import './components/tabs/Tabs.module.css';
+@import './components/timeline/Timeline.module.css';
+@import './components/timeline/components/TimelineRow.module.css';
 @import './components/toast/Toast.module.css';
 @import './components/tree-view/TreeView.module.css';
 @import './components/user-display/UserDisplay.module.css';

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;
+  }
+}