@dbcdk/react-components 0.0.184 → 0.0.186

package/dist/components/tabs/Tabs.js

@@ -51,6 +51,7 @@ function Tabs({
   onRemoveTab,
   onAddTab,
   addition,
+  tabListAddition,
   loading = false,
   children
 }) {
@@ -143,44 +144,52 @@ function Tabs({
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.tabButtons, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
-          const selected = index === activeIndex;
-          const tabDomId = `${uid}-tab-${String(tab.id)}`;
-          const panelDomId = `${uid}-panel-${String(tab.id)}`;
-          return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                id: tabDomId,
-                type: "button",
-                className: styles.tabButton,
-                role: "tab",
-                "aria-selected": selected,
-                "aria-controls": panelDomId,
-                tabIndex: selected ? 0 : -1,
-                disabled: tab.disabled,
-                onClick: () => setValue(tab.id),
-                onKeyDown: (e) => onKeyDownTab(e, index),
-                children: [
-                  tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
-                  /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
-                  tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                ]
-              }
-            ),
-            tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: styles.removeTabButton,
-                "aria-label": `Fjern fane ${tab.header}`,
-                disabled: tab.disabled,
-                onClick: () => onRemoveTab(tab.id, tab, index),
-                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-              }
-            ) : null
-          ] }, tab.id);
-        }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
+            role: "tablist",
+            "aria-label": header != null ? header : "Tabs",
+            children: visibleTabs.map((tab, index) => {
+              const selected = index === activeIndex;
+              const tabDomId = `${uid}-tab-${String(tab.id)}`;
+              const panelDomId = `${uid}-panel-${String(tab.id)}`;
+              return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: tabDomId,
+                    type: "button",
+                    className: styles.tabButton,
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": panelDomId,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: tab.disabled,
+                    onClick: () => setValue(tab.id),
+                    onKeyDown: (e) => onKeyDownTab(e, index),
+                    children: [
+                      tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
+                      /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
+                      tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                    ]
+                  }
+                ),
+                tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles.removeTabButton,
+                    "aria-label": `Fjern fane ${tab.header}`,
+                    disabled: tab.disabled,
+                    onClick: () => onRemoveTab(tab.id, tab, index),
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] }, tab.id);
+            })
+          }
+        ),
         onAddTab ? /* @__PURE__ */ jsx(
           "button",
           {
@@ -190,7 +199,8 @@ function Tabs({
             "aria-label": "Tilf\xF8j fane",
             children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
           }
-        ) : null
+        ) : null,
+        tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
       ] }),
       /* @__PURE__ */ jsx(
         "div",

package/dist/components/tabs/Tabs.module.css

@@ -36,6 +36,15 @@
   min-width: 0;
 }
 
+/* Extra content next to the tab buttons, pushed into the free space on the right */
+.tabListAddition {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-inline-start: auto;
+  padding-inline-start: var(--spacing-md);
+}
+
 /* Individual tab wrapper */
 .tab {
   display: flex;
@@ -199,26 +208,35 @@
   overflow: hidden;
 }
 
-.filled .tabList {
+.filled > .tabList {
   border-block-end: 1px solid var(--color-border-subtle);
-  background: var(--color-bg-toolbar);
-  inline-size: 100%;
 }
 
-.filled .tabButtons {
+/* One continuous backdrop behind the whole button row, so the curved gap
+   next to the active tab's rounded corners shows toolbar gray, not the
+   surface color behind the row. */
+.filled > .tabList > .tabButtons {
   display: flex;
+  background: var(--color-bg-toolbar);
+  border-start-start-radius: var(--border-radius-md);
 }
 
-.filled .addTabButton {
+.filled > .tabList > .tabButtons.tabButtonsEnd {
+  border-start-end-radius: var(--border-radius-md);
+}
+
+.filled > .tabList > .addTabButton {
+  background: var(--color-bg-toolbar);
   border: 1px solid transparent;
   border-block-end: 0;
+  border-start-end-radius: var(--border-radius-md);
 }
 
-.filled .addTabButton:hover {
+.filled > .tabList > .addTabButton:hover {
   background: var(--color-bg-toolbar-hover);
 }
 
-.filled .tab {
+.filled > .tabList > .tabButtons > .tab {
   border: 1px solid transparent;
   border-block-end: 0;
   color: var(--color-fg-muted);
@@ -229,14 +247,14 @@
     border-color var(--transition-fast) var(--ease-standard);
 }
 
-.filled .tab:not(.active):hover {
+.filled > .tabList > .tabButtons > .tab:not(.active):hover {
   background: var(--color-bg-toolbar-hover);
   color: var(--color-fg-default);
 }
 
 /* Active tab physically overlaps the tabList separator by 1px so its
    erased bottom border seamlessly merges with the panel below. */
-.filled .tab.active {
+.filled > .tabList > .tabButtons > .tab.active {
   background: var(--color-bg-surface);
   border-color: var(--color-border-subtle);
   border-block-end-color: var(--color-bg-surface);
@@ -247,13 +265,13 @@
   color: var(--color-fg-default);
 }
 
-.filled .tabContent {
+.filled > .tabContent {
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);
   border-block-start: none;
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   box-shadow: var(--shadow-xs);
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
 }
 
 /* =========================
@@ -268,22 +286,22 @@
   padding-block-end: var(--spacing-xs);
 }
 
-.outlined .tab {
+.outlined > .tabList > .tabButtons > .tab {
   color: var(--color-fg-muted);
   border-block-end: 2px solid var(--color-border-default);
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-.outlined .tab:not(.active):hover {
+.outlined > .tabList > .tabButtons > .tab:not(.active):hover {
   color: var(--color-brand);
 }
 
-.outlined .tab.active {
+.outlined > .tabList > .tabButtons > .tab.active {
   color: var(--color-brand);
   border-block-end-color: var(--color-brand);
 }
 
-.outlined .tabContent {
+.outlined > .tabContent {
   background: transparent;
   padding: 0;
 }
@@ -292,22 +310,22 @@
    Panel style modifier
    ========================= */
 
-.panelStyle .tabList {
+.panelStyle > .tabList {
   border: var(--border-width-thin) solid var(--color-border-default);
   border-block-end: 0;
 }
 
 /* When panelStyle is on, tabs look “embedded” (no bottom border indicators) */
-.panelStyle .tab {
+.panelStyle > .tabList > .tabButtons > .tab {
   border-block-end: 0;
 }
 
 /* In filled mode, keep the filled content panel visuals (already handled above).
    In outlined mode with panelStyle, give the content a panel container too. */
-.panelStyle.outlined .tabContent {
+.panelStyle.outlined > .tabContent {
   border: var(--border-width-thin) solid var(--color-border-default);
   background: var(--color-bg-surface);
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
 }
 
 @media (max-width: 767px) {
@@ -327,17 +345,17 @@
     box-shadow: none;
   }
 
-  .filled .tabList {
+  .filled > .tabList {
     inline-size: 100%;
   }
 
-  .filled .tabContent,
-  .panelStyle.outlined .tabContent {
-    padding-block: var(--spacing-md);
-    padding-inline: var(--spacing-md);
+  .filled > .tabContent,
+  .panelStyle.outlined > .tabContent {
+    padding-block: var(--spacing-sm);
+    padding-inline: var(--spacing-sm);
   }
 
-  .panelStyle .tabList {
+  .panelStyle > .tabList {
     border: 0;
   }
 }

package/dist/components/timeline/Timeline.cjs

@@ -0,0 +1,102 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TimelineRow = require('./components/TimelineRow');
+var styles = require('./Timeline.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function collapsibleIndexesOf(items) {
+  return items.reduce((acc, item, i) => {
+    if (item.collapsible) acc.push(i);
+    return acc;
+  }, []);
+}
+function normalizeOpenIndexes(indexes, items) {
+  const collapsible = collapsibleIndexesOf(items);
+  if (indexes === "all") {
+    return collapsible;
+  }
+  const collapsibleSet = new Set(collapsible);
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => collapsibleSet.has(n)));
+}
+function Timeline({
+  items,
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndexes = [],
+  openIndexes,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  const uid = react.useId();
+  const isControlled = openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = react.useState(false);
+  react.useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalOpenIndexes, setInternalOpenIndexes] = react.useState(
+    () => normalizeOpenIndexes(defaultOpenIndexes, items)
+  );
+  const currentOpenIndexes = react.useMemo(
+    () => normalizeOpenIndexes(isControlled ? openIndexes : internalOpenIndexes, items),
+    [isControlled, openIndexes, internalOpenIndexes, items]
+  );
+  const openSet = react.useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    const normalized = normalizeOpenIndexes(nextIndexes, items);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
+      setInternalOpenIndexes(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || !item.collapsible || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className: [styles__default.default.container, styles__default.default[size], className].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineRow.TimelineRow,
+          {
+            uid,
+            index: i,
+            item,
+            isLast: i === items.length - 1,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            size,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
+    }
+  );
+}
+
+exports.Timeline = Timeline;

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+import type { FormatDateOptions } from '../../utils/date/formatDate';
+export type TimelineContextMenuActionItem = {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export type TimelineContextMenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+};
+export type TimelineContextMenuItem = TimelineContextMenuActionItem | TimelineContextMenuHeaderItem;
+export interface TimelineItem {
+    id?: string;
+    label: ReactNode;
+    content: ReactNode;
+    collapsible?: boolean;
+    severity?: Severity;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /**
+     * When set, renders a muted timestamp next to the label using the
+     * component's own date formatting (see `dateOptions`) instead of the
+     * consumer building one into `label`/`content` by hand.
+     */
+    date?: Date | string | number;
+    /** Passed through to the internal `formatDate` call for `date`. */
+    dateOptions?: FormatDateOptions;
+    /**
+     * Renders a kebab menu next to the label (same pattern as `Table`'s row
+     * actions), instead of the consumer putting action buttons directly in
+     * `label` — those inflate the header's height and throw off its
+     * alignment with the marker dot.
+     */
+    contextMenuItems?: TimelineContextMenuItem[];
+}
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'default' | 'outlined';
+type OpenIndexes = number[] | 'all';
+type RenderMode = 'lazy' | 'eager';
+export interface TimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: TimelineItem[];
+    size?: Size;
+    variant?: Variant;
+    renderMode?: RenderMode;
+    /** Uncontrolled default */
+    defaultOpenIndexes?: OpenIndexes;
+    /** Controlled state */
+    openIndexes?: OpenIndexes;
+    /** Change callback */
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Timeline({ items, size, variant, renderMode, defaultOpenIndexes, openIndexes, onOpenIndexesChange, className, ...rest }: TimelineProps): JSX.Element;
+export {};

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useEffect, useMemo } from 'react';
+import { TimelineRow } from './components/TimelineRow';
+import styles from './Timeline.module.css';
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function collapsibleIndexesOf(items) {
+  return items.reduce((acc, item, i) => {
+    if (item.collapsible) acc.push(i);
+    return acc;
+  }, []);
+}
+function normalizeOpenIndexes(indexes, items) {
+  const collapsible = collapsibleIndexesOf(items);
+  if (indexes === "all") {
+    return collapsible;
+  }
+  const collapsibleSet = new Set(collapsible);
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => collapsibleSet.has(n)));
+}
+function Timeline({
+  items,
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndexes = [],
+  openIndexes,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  const uid = useId();
+  const isControlled = openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalOpenIndexes, setInternalOpenIndexes] = useState(
+    () => normalizeOpenIndexes(defaultOpenIndexes, items)
+  );
+  const currentOpenIndexes = useMemo(
+    () => normalizeOpenIndexes(isControlled ? openIndexes : internalOpenIndexes, items),
+    [isControlled, openIndexes, internalOpenIndexes, items]
+  );
+  const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    const normalized = normalizeOpenIndexes(nextIndexes, items);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
+      setInternalOpenIndexes(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || !item.collapsible || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: [styles.container, styles[size], className].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          TimelineRow,
+          {
+            uid,
+            index: i,
+            item,
+            isLast: i === items.length - 1,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            size,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
+    }
+  );
+}
+
+export { Timeline };

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

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.sm {
+  --tl-gap: var(--spacing-xs);
+  --tl-row-gap: var(--spacing-sm);
+  --tl-font-size: var(--font-size-sm);
+}
+
+.md {
+  --tl-gap: var(--spacing-sm);
+  --tl-row-gap: var(--spacing-md);
+  --tl-font-size: var(--font-size-md);
+}
+
+.lg {
+  --tl-gap: var(--spacing-sm);
+  --tl-row-gap: var(--spacing-lg);
+  --tl-font-size: var(--font-size-md);
+}