@dbcdk/react-components 0.0.208 → 0.0.210

package/dist/components/tabs/Tabs.js

@@ -43,6 +43,8 @@ function Tabs({
   subheader,
   variant,
   panelStyle = false,
+  flushContent = false,
+  stackTabListAdditionOnMobile = false,
   tabs,
   value,
   defaultValue,
@@ -142,79 +144,91 @@ function Tabs({
         children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
-    /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.tabStrip, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          styles.tabs,
+          styles[variant],
+          panelStyle && styles.panelStyle,
+          flushContent && styles.flushContent,
+          stackTabListAdditionOnMobile && styles.stackTabListAdditionOnMobile
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.tabStrip, children: [
+              /* @__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",
+                {
+                  type: "button",
+                  className: styles.addTabButton,
+                  onClick: onAddTab,
+                  "aria-label": "Tilf\xF8j fane",
+                  children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
+                }
+              ) : null
+            ] }),
+            tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
+          ] }),
           /* @__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);
-              })
+              id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+              role: "tabpanel",
+              "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+              className: styles.tabContent,
+              children: loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
             }
-          ),
-          onAddTab ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.addTabButton,
-              onClick: onAddTab,
-              "aria-label": "Tilf\xF8j fane",
-              children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
-          role: "tabpanel",
-          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
-          className: styles.tabContent,
-          children: loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
-        }
-      )
-    ] })
+          )
+        ]
+      }
+    )
   ] });
 }
 Tabs.Item = TabsItem;

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

@@ -337,6 +337,26 @@
   gap: var(--spacing-md);
 }
 
+.flushContent.tabs {
+  gap: 0;
+}
+
+.flushContent > .tabList {
+  grid-template-rows: auto 0;
+}
+
+.flushContent > .tabList > .tabStrip {
+  grid-row: 1;
+  align-self: stretch;
+}
+
+.flushContent.filled > .tabContent {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
 .headerContainerOutlined {
   padding-block-end: var(--spacing-xs);
 }
@@ -413,4 +433,23 @@
   .panelStyle > .tabList {
     border: 0;
   }
+
+  .stackTabListAdditionOnMobile > .tabList {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto;
+  }
+
+  .stackTabListAdditionOnMobile > .tabList > .tabStrip {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .stackTabListAdditionOnMobile > .tabList > .tabListAddition {
+    grid-column: 1;
+    grid-row: 2;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+    padding-block: var(--spacing-xs);
+    padding-inline: 0;
+  }
 }

package/dist/components/tree-view/TreeNodeRow.cjs

@@ -16,12 +16,17 @@ function TreeNodeRow({
   wrapLabels,
   isExpanded,
   toggle,
+  expand,
+  expandOnSelect,
   resolvedChildren,
   loadingIds,
   errorIds,
   requestLoad,
   loadChildren,
   selectedId,
+  currentId,
+  focusedId,
+  onFocusNode,
   onSelectNode,
   renderLabel
 }) {
@@ -33,6 +38,7 @@ function TreeNodeRow({
   const loading = loadingIds.has(node.id);
   const error = errorIds[node.id];
   const selected = selectedId !== void 0 && selectedId === node.id;
+  const current = currentId !== void 0 && currentId === node.id;
   react.useEffect(() => {
     if (expanded && children === void 0 && !loading && !error && loadChildren) {
       requestLoad(node);
@@ -44,38 +50,67 @@ function TreeNodeRow({
       role: "treeitem",
       "aria-expanded": expandable ? expanded : void 0,
       "aria-selected": selected,
+      "aria-current": current ? "page" : void 0,
+      "aria-level": depth + 1,
+      "data-tree-node-id": node.id,
       style: { ["--tree-depth"]: depth },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.row, "data-selected": selected || void 0, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.toggle,
-              onClick: () => expandable && toggle(node.id),
-              disabled: !expandable,
-              "aria-hidden": !expandable,
-              tabIndex: expandable ? 0 : -1,
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `spin ${styles__default.default.spinner}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
-                // A resolved node's chevron means "this has children"; an
-                // unresolved lazy node's dimmer chevron means "might have
-                // children, click to check" - we genuinely don't know yet,
-                // and shouldn't visually assert otherwise.
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: isResolved ? void 0 : styles__default.default.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }) })
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leafSpacer, "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: styles__default.default.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
-            node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: [styles__default.default.label, wrapLabels ? styles__default.default.labelWrap : styles__default.default.labelTruncate].filter(Boolean).join(" "),
-                children: renderLabel ? renderLabel(node) : node.label
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles__default.default.row,
+            "data-tree-row": "true",
+            "data-selected": selected || void 0,
+            "data-current": current || void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.toggle,
+                  "data-tree-toggle": "true",
+                  onClick: () => expandable && toggle(node.id),
+                  disabled: !expandable,
+                  "aria-hidden": !expandable,
+                  tabIndex: -1,
+                  "aria-label": expanded ? "Luk relationer" : "Vis relationer",
+                  children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `spin ${styles__default.default.spinner}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                    // A resolved node's chevron means "this has children"; an
+                    // unresolved lazy node's dimmer chevron means "might have
+                    // children, click to check" - we genuinely don't know yet,
+                    // and shouldn't visually assert otherwise.
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: isResolved ? void 0 : styles__default.default.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leafSpacer, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.labelButton,
+                  "data-tree-focus-target": "true",
+                  "data-tree-focus-node-id": node.id,
+                  tabIndex: focusedId === node.id ? 0 : -1,
+                  onFocus: () => onFocusNode(node.id),
+                  onClick: () => {
+                    if (expandOnSelect && expandable) expand(node.id);
+                    onSelectNode == null ? void 0 : onSelectNode(node);
+                  },
+                  children: [
+                    node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: [styles__default.default.label, wrapLabels ? styles__default.default.labelWrap : styles__default.default.labelTruncate].filter(Boolean).join(" "),
+                        children: renderLabel ? renderLabel(node) : node.label
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.errorRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles__default.default.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
@@ -88,12 +123,17 @@ function TreeNodeRow({
             wrapLabels,
             isExpanded,
             toggle,
+            expand,
+            expandOnSelect,
             resolvedChildren,
             loadingIds,
             errorIds,
             requestLoad,
             loadChildren,
             selectedId,
+            currentId,
+            focusedId,
+            onFocusNode,
             onSelectNode,
             renderLabel
           },

package/dist/components/tree-view/TreeNodeRow.d.ts

@@ -6,14 +6,19 @@ type TreeNodeRowProps<T> = {
     wrapLabels: boolean;
     isExpanded: (id: string) => boolean;
     toggle: (id: string) => void;
+    expand: (id: string) => void;
+    expandOnSelect: boolean;
     resolvedChildren: Record<string, TreeNode<T>[]>;
     loadingIds: Set<string>;
     errorIds: Record<string, ReactNode>;
     requestLoad: (node: TreeNode<T>) => void;
     loadChildren?: LoadTreeChildren<T>;
     selectedId?: string;
+    currentId?: string;
+    focusedId?: string;
+    onFocusNode: (id: string) => void;
     onSelectNode?: (node: TreeNode<T>) => void;
     renderLabel?: (node: TreeNode<T>) => ReactNode;
 };
-export declare function TreeNodeRow<T>({ node, depth, wrapLabels, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
+export declare function TreeNodeRow<T>({ node, depth, wrapLabels, isExpanded, toggle, expand, expandOnSelect, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, currentId, focusedId, onFocusNode, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
 export {};

package/dist/components/tree-view/TreeNodeRow.js

@@ -10,12 +10,17 @@ function TreeNodeRow({
   wrapLabels,
   isExpanded,
   toggle,
+  expand,
+  expandOnSelect,
   resolvedChildren,
   loadingIds,
   errorIds,
   requestLoad,
   loadChildren,
   selectedId,
+  currentId,
+  focusedId,
+  onFocusNode,
   onSelectNode,
   renderLabel
 }) {
@@ -27,6 +32,7 @@ function TreeNodeRow({
   const loading = loadingIds.has(node.id);
   const error = errorIds[node.id];
   const selected = selectedId !== void 0 && selectedId === node.id;
+  const current = currentId !== void 0 && currentId === node.id;
   useEffect(() => {
     if (expanded && children === void 0 && !loading && !error && loadChildren) {
       requestLoad(node);
@@ -38,38 +44,67 @@ function TreeNodeRow({
       role: "treeitem",
       "aria-expanded": expandable ? expanded : void 0,
       "aria-selected": selected,
+      "aria-current": current ? "page" : void 0,
+      "aria-level": depth + 1,
+      "data-tree-node-id": node.id,
       style: { ["--tree-depth"]: depth },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.row, "data-selected": selected || void 0, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.toggle,
-              onClick: () => expandable && toggle(node.id),
-              disabled: !expandable,
-              "aria-hidden": !expandable,
-              tabIndex: expandable ? 0 : -1,
-              children: loading ? /* @__PURE__ */ jsx("span", { className: `spin ${styles.spinner}`, children: /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
-                // A resolved node's chevron means "this has children"; an
-                // unresolved lazy node's dimmer chevron means "might have
-                // children, click to check" - we genuinely don't know yet,
-                // and shouldn't visually assert otherwise.
-                /* @__PURE__ */ jsx("span", { className: isResolved ? void 0 : styles.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
-              ) : /* @__PURE__ */ jsx("span", { className: styles.leafSpacer, "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ jsxs("button", { type: "button", className: styles.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
-            node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: [styles.label, wrapLabels ? styles.labelWrap : styles.labelTruncate].filter(Boolean).join(" "),
-                children: renderLabel ? renderLabel(node) : node.label
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.row,
+            "data-tree-row": "true",
+            "data-selected": selected || void 0,
+            "data-current": current || void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles.toggle,
+                  "data-tree-toggle": "true",
+                  onClick: () => expandable && toggle(node.id),
+                  disabled: !expandable,
+                  "aria-hidden": !expandable,
+                  tabIndex: -1,
+                  "aria-label": expanded ? "Luk relationer" : "Vis relationer",
+                  children: loading ? /* @__PURE__ */ jsx("span", { className: `spin ${styles.spinner}`, children: /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                    // A resolved node's chevron means "this has children"; an
+                    // unresolved lazy node's dimmer chevron means "might have
+                    // children, click to check" - we genuinely don't know yet,
+                    // and shouldn't visually assert otherwise.
+                    /* @__PURE__ */ jsx("span", { className: isResolved ? void 0 : styles.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+                  ) : /* @__PURE__ */ jsx("span", { className: styles.leafSpacer, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles.labelButton,
+                  "data-tree-focus-target": "true",
+                  "data-tree-focus-node-id": node.id,
+                  tabIndex: focusedId === node.id ? 0 : -1,
+                  onFocus: () => onFocusNode(node.id),
+                  onClick: () => {
+                    if (expandOnSelect && expandable) expand(node.id);
+                    onSelectNode == null ? void 0 : onSelectNode(node);
+                  },
+                  children: [
+                    node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [styles.label, wrapLabels ? styles.labelWrap : styles.labelTruncate].filter(Boolean).join(" "),
+                        children: renderLabel ? renderLabel(node) : node.label
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         error ? /* @__PURE__ */ jsxs("div", { className: styles.errorRow, children: [
           /* @__PURE__ */ jsx("span", { children: error }),
           /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
@@ -82,12 +117,17 @@ function TreeNodeRow({
             wrapLabels,
             isExpanded,
             toggle,
+            expand,
+            expandOnSelect,
             resolvedChildren,
             loadingIds,
             errorIds,
             requestLoad,
             loadChildren,
             selectedId,
+            currentId,
+            focusedId,
+            onFocusNode,
             onSelectNode,
             renderLabel
           },