@dbcdk/react-components 0.0.181 → 0.0.183

package/dist/components/line-viewer/LineViewer.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import styles from './LineViewer.module.css';
+import { tokenizeLineFormat } from './tokenizeLineFormat';
+import { Button } from '../button/Button';
+
+const TOKEN_CLASS = {
+  tag: styles.tag,
+  indicator: styles.indicator,
+  subfieldMarker: styles.subfieldMarker,
+  subfieldCode: styles.subfieldCode,
+  value: styles.value,
+  terminator: styles.terminator,
+  text: styles.text,
+  whitespace: void 0
+};
+function LineViewer({
+  lines,
+  size = "md",
+  appearance = "dark",
+  storageKey,
+  borderless = false
+}) {
+  const tokens = useMemo(() => tokenizeLineFormat(lines), [lines]);
+  const codeRef = useRef(null);
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState({
+    initialValue: "highlighted",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "highlighted" || stored === "raw"
+  });
+  const { value: wrap, setValue: setWrap } = usePersistentState({
+    initialValue: true,
+    storageKey: storageKey ? `${storageKey}:wrap` : void 0,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const handleCopy = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(lines).catch(() => {
+    });
+  };
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: [styles.viewer, borderless ? styles.borderless : ""].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: /* @__PURE__ */ jsx(
+              Popover,
+              {
+                matchTriggerWidth: false,
+                minWidth: "200px",
+                trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "inline",
+                    "aria-label": "Flere handlinger",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen ? true : false,
+                    onClick: toggle,
+                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                  }
+                ),
+                children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setWrap((value) => !value);
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(TextWrap, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: wrap ? "Ombryd ikke tekst" : "Ombryd tekst" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode((mode) => mode === "raw" ? "highlighted" : "raw");
+                        close();
+                      },
+                      children: [
+                        viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Code2, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis med farver" : "Vis raw" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentAppearance((value) => value === "dark" ? "light" : "dark");
+                        close();
+                      },
+                      children: [
+                        currentAppearance === "dark" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Menu.Separator, {}),
+                  /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleCopy();
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r" })
+                      ]
+                    }
+                  ) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: [styles.codePane, styles[size], wrap ? styles.wrap : styles.noWrap].join(" "),
+            tabIndex: 0,
+            onDoubleClick: handleDoubleClick,
+            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {
+              const tokenClassName = TOKEN_CLASS[token.type];
+              return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { LineViewer };

package/dist/components/line-viewer/LineViewer.module.css

@@ -0,0 +1,112 @@
+.viewer {
+  --line-pane-bg: var(--color-bg-inverse);
+  --line-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
+  --line-pane-text: var(--color-fg-inverse);
+
+  --line-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
+  --line-indicator: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+  --line-subfield-code: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-number) 70%);
+  --line-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
+  --line-terminator: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-boolean) 70%);
+  --line-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
+  --line-continuation: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+
+  position: relative;
+  background: var(--line-pane-bg);
+  border: var(--border-width-thin) solid var(--line-pane-border);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-mono);
+}
+
+.viewer[data-appearance='light'] {
+  --line-pane-bg: var(--color-bg-surface);
+  --line-pane-border: var(--color-border-subtle);
+  --line-pane-text: var(--color-fg-default);
+
+  --line-tag: var(--color-link);
+  --line-indicator: var(--color-fg-subtle);
+  --line-subfield-code: var(--color-status-warning-fg);
+  --line-value: var(--color-status-success-fg);
+  --line-terminator: var(--color-accent-fg);
+  --line-punctuation: var(--color-fg-subtle);
+  --line-continuation: var(--color-fg-muted);
+
+  box-shadow: var(--shadow-xs);
+}
+
+.viewer.borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.toolbar {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 1;
+}
+
+.codePane {
+  margin: 0;
+  padding: var(--spacing-sm);
+  overflow: auto;
+  color: var(--line-pane-text);
+  font-family: inherit;
+  line-height: 1.35;
+}
+
+.wrap {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.noWrap {
+  white-space: pre;
+}
+
+.xs,
+.sm {
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  font-size: var(--font-size-base);
+}
+
+.tag {
+  color: var(--line-tag);
+  font-weight: var(--font-weight-medium);
+}
+
+.indicator {
+  color: var(--line-indicator);
+}
+
+.subfieldMarker {
+  color: var(--line-punctuation);
+}
+
+.subfieldCode {
+  color: var(--line-subfield-code);
+  font-weight: var(--font-weight-medium);
+}
+
+.value {
+  color: var(--line-value);
+}
+
+.terminator {
+  color: var(--line-terminator);
+  font-weight: var(--font-weight-medium);
+}
+
+.text {
+  color: var(--line-continuation);
+  font-style: italic;
+}

package/dist/components/line-viewer/tokenizeLineFormat.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeFieldLine(line) {
+  const match = FIELD_LINE_PATTERN.exec(line);
+  if (!match) return [{ type: "text", value: line }];
+  const [, tag, gap1, indicator, gap2, rest] = match;
+  const tokens = [
+    { type: "tag", value: tag },
+    { type: "whitespace", value: gap1 },
+    { type: "indicator", value: indicator },
+    { type: "whitespace", value: gap2 }
+  ];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match2;
+  let lastIndex = 0;
+  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match2[1] });
+    tokens.push({ type: "value", value: match2[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < rest.length) {
+    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeLineFormat(source) {
+  const tokens = [];
+  const chunks = source.split(/(\n)/);
+  for (const chunk of chunks) {
+    if (chunk === "") continue;
+    if (chunk === "\n") {
+      tokens.push({ type: "whitespace", value: "\n" });
+      continue;
+    }
+    if (chunk.trim() === "$") {
+      const dollarIndex = chunk.indexOf("$");
+      const leading = chunk.slice(0, dollarIndex);
+      const trailing = chunk.slice(dollarIndex + 1);
+      if (leading) tokens.push({ type: "text", value: leading });
+      tokens.push({ type: "terminator", value: "$" });
+      if (trailing) tokens.push({ type: "text", value: trailing });
+      continue;
+    }
+    tokens.push(...tokenizeFieldLine(chunk));
+  }
+  return tokens;
+}
+
+exports.tokenizeLineFormat = tokenizeLineFormat;

package/dist/components/line-viewer/tokenizeLineFormat.d.ts

@@ -0,0 +1,14 @@
+export type LineTokenType = 'tag' | 'indicator' | 'subfieldMarker' | 'subfieldCode' | 'value' | 'terminator' | 'text' | 'whitespace';
+export interface LineToken {
+    type: LineTokenType;
+    value: string;
+}
+/**
+ * Tokenizes a MARC-style "line format" record (field tag, indicators,
+ * `*code value` subfields, terminated by a lone `$`) for syntax
+ * highlighting without imposing a strict grammar. Preserves the source
+ * exactly - concatenating every token's `value` reproduces the input - so a
+ * wrapped continuation line or malformed field still displays as plain
+ * text instead of breaking the tokenizer.
+ */
+export declare function tokenizeLineFormat(source: string): LineToken[];

package/dist/components/line-viewer/tokenizeLineFormat.js

@@ -0,0 +1,50 @@
+const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeFieldLine(line) {
+  const match = FIELD_LINE_PATTERN.exec(line);
+  if (!match) return [{ type: "text", value: line }];
+  const [, tag, gap1, indicator, gap2, rest] = match;
+  const tokens = [
+    { type: "tag", value: tag },
+    { type: "whitespace", value: gap1 },
+    { type: "indicator", value: indicator },
+    { type: "whitespace", value: gap2 }
+  ];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match2;
+  let lastIndex = 0;
+  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match2[1] });
+    tokens.push({ type: "value", value: match2[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < rest.length) {
+    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeLineFormat(source) {
+  const tokens = [];
+  const chunks = source.split(/(\n)/);
+  for (const chunk of chunks) {
+    if (chunk === "") continue;
+    if (chunk === "\n") {
+      tokens.push({ type: "whitespace", value: "\n" });
+      continue;
+    }
+    if (chunk.trim() === "$") {
+      const dollarIndex = chunk.indexOf("$");
+      const leading = chunk.slice(0, dollarIndex);
+      const trailing = chunk.slice(dollarIndex + 1);
+      if (leading) tokens.push({ type: "text", value: leading });
+      tokens.push({ type: "terminator", value: "$" });
+      if (trailing) tokens.push({ type: "text", value: trailing });
+      continue;
+    }
+    tokens.push(...tokenizeFieldLine(chunk));
+  }
+  return tokens;
+}
+
+export { tokenizeLineFormat };

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

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./TreeView.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TreeNodeRow({
+  node,
+  depth,
+  isExpanded,
+  toggle,
+  resolvedChildren,
+  loadingIds,
+  errorIds,
+  requestLoad,
+  loadChildren,
+  selectedId,
+  onSelectNode,
+  renderLabel
+}) {
+  var _a;
+  const children = (_a = node.children) != null ? _a : resolvedChildren[node.id];
+  const isResolved = children !== void 0;
+  const expandable = isResolved ? children.length > 0 : Boolean(loadChildren) && node.hasChildren !== false;
+  const expanded = isExpanded(node.id);
+  const loading = loadingIds.has(node.id);
+  const error = errorIds[node.id];
+  const selected = selectedId !== void 0 && selectedId === node.id;
+  react.useEffect(() => {
+    if (expanded && children === void 0 && !loading && !error && loadChildren) {
+      requestLoad(node);
+    }
+  }, [expanded, children, loading, error]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": selected,
+      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, 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" })
+        ] }) : null,
+        expanded && children && children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", className: styles__default.default.children, children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNodeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            isExpanded,
+            toggle,
+            resolvedChildren,
+            loadingIds,
+            errorIds,
+            requestLoad,
+            loadChildren,
+            selectedId,
+            onSelectNode,
+            renderLabel
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+
+exports.TreeNodeRow = TreeNodeRow;

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

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode } from 'react';
+import type { LoadTreeChildren, TreeNode } from './types';
+type TreeNodeRowProps<T> = {
+    node: TreeNode<T>;
+    depth: number;
+    isExpanded: (id: string) => boolean;
+    toggle: (id: string) => void;
+    resolvedChildren: Record<string, TreeNode<T>[]>;
+    loadingIds: Set<string>;
+    errorIds: Record<string, ReactNode>;
+    requestLoad: (node: TreeNode<T>) => void;
+    loadChildren?: LoadTreeChildren<T>;
+    selectedId?: string;
+    onSelectNode?: (node: TreeNode<T>) => void;
+    renderLabel?: (node: TreeNode<T>) => ReactNode;
+};
+export declare function TreeNodeRow<T>({ node, depth, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LoaderCircle, ChevronDown, ChevronRight } from 'lucide-react';
+import { useEffect } from 'react';
+import styles from './TreeView.module.css';
+
+function TreeNodeRow({
+  node,
+  depth,
+  isExpanded,
+  toggle,
+  resolvedChildren,
+  loadingIds,
+  errorIds,
+  requestLoad,
+  loadChildren,
+  selectedId,
+  onSelectNode,
+  renderLabel
+}) {
+  var _a;
+  const children = (_a = node.children) != null ? _a : resolvedChildren[node.id];
+  const isResolved = children !== void 0;
+  const expandable = isResolved ? children.length > 0 : Boolean(loadChildren) && node.hasChildren !== false;
+  const expanded = isExpanded(node.id);
+  const loading = loadingIds.has(node.id);
+  const error = errorIds[node.id];
+  const selected = selectedId !== void 0 && selectedId === node.id;
+  useEffect(() => {
+    if (expanded && children === void 0 && !loading && !error && loadChildren) {
+      requestLoad(node);
+    }
+  }, [expanded, children, loading, error]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": selected,
+      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, 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" })
+        ] }) : null,
+        expanded && children && children.length > 0 ? /* @__PURE__ */ jsx("div", { role: "group", className: styles.children, children: children.map((child) => /* @__PURE__ */ jsx(
+          TreeNodeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            isExpanded,
+            toggle,
+            resolvedChildren,
+            loadingIds,
+            errorIds,
+            requestLoad,
+            loadChildren,
+            selectedId,
+            onSelectNode,
+            renderLabel
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+
+export { TreeNodeRow };