@dbcdk/react-components 0.0.195 → 0.0.197

package/dist/components/forms/text-area/Textarea.d.ts

@@ -9,6 +9,7 @@ export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
     showCount?: boolean;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    tooltipOpenOnFocus?: boolean;
     showTooltip?: boolean;
     adjustHeight?: boolean;
     placeholder?: string;

package/dist/components/forms/text-area/Textarea.js

@@ -13,6 +13,7 @@ const Textarea = function Textarea2({
   showCount,
   tooltip,
   tooltipPlacement = "right",
+  tooltipOpenOnFocus = true,
   showTooltip,
   placeholder,
   adjustHeight,
@@ -81,7 +82,7 @@ const Textarea = function Textarea2({
     placement: tooltipPlacement,
     offset: 8,
     delayOpenMs: 0,
-    focusOpenMode: "any",
+    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
     closeOnPointerDown: false
   });
   return /* @__PURE__ */ jsx(

package/dist/components/highlighted-text/HighlightedText.cjs

@@ -8,11 +8,14 @@ function escapeRegExp(value) {
 }
 function HighlightedText({ text, query, className }) {
   const trimmedQuery = query == null ? void 0 : query.trim();
-  if (!trimmedQuery) {
+  const parts = react.useMemo(() => {
+    if (!trimmedQuery) return null;
+    const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+    return text.split(pattern);
+  }, [text, trimmedQuery]);
+  if (!parts) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
   }
-  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
-  const parts = text.split(pattern);
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: parts.map(
     (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: part }, index)
   ) });

package/dist/components/highlighted-text/HighlightedText.js

@@ -1,16 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import { Fragment } from 'react';
+import { useMemo, Fragment } from 'react';
 
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function HighlightedText({ text, query, className }) {
   const trimmedQuery = query == null ? void 0 : query.trim();
-  if (!trimmedQuery) {
+  const parts = useMemo(() => {
+    if (!trimmedQuery) return null;
+    const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
+    return text.split(pattern);
+  }, [text, trimmedQuery]);
+  if (!parts) {
     return /* @__PURE__ */ jsx("span", { className, children: text });
   }
-  const pattern = new RegExp(`(${escapeRegExp(trimmedQuery)})`, "gi");
-  const parts = text.split(pattern);
   return /* @__PURE__ */ jsx("span", { className, children: parts.map(
     (part, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: part }, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)
   ) });

package/dist/components/json-viewer/JsonNode.cjs

@@ -2,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var HighlightedText = require('../../components/highlighted-text/HighlightedText');
+var react = require('react');
+var JsonRow = require('./JsonRow');
 var styles = require('./JsonViewer.module.css');
 var utils = require('./utils');
 
@@ -25,81 +25,41 @@ function JsonNode({
   onCopy
 }) {
   const nodeId = utils.getNodeId(path);
-  const nodeType = utils.getValueType(value);
   const match = matches.get(nodeId);
-  const shouldRender = query ? Boolean(match) : true;
-  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  const { isContainer, shouldRender, isExpanded } = utils.resolveNodeVisibility(
+    nodeId,
+    value,
+    query,
+    match,
+    expandedNodeIds
+  );
+  const entries = react.useMemo(() => {
+    if (utils.isJsonArray(value)) return value.map((item, index) => [String(index), item]);
+    if (utils.isJsonObject(value)) return Object.entries(value);
+    return [];
+  }, [value]);
   if (!shouldRender) return null;
-  if (nodeType !== "array" && nodeType !== "object") {
-    const primitive = value;
-    const valueLabel = utils.formatPrimitive(primitive);
-    const rawValue = utils.getPrimitiveRawValue(primitive);
-    const copied = copiedId === nodeId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: styles__default.default.node,
-        style: { ["--json-indent"]: depth },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.valueButton,
-              onClick: () => onCopy(nodeId, rawValue),
-              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
-                  keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: [styles__default.default.value, styles__default.default[`value${utils.capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: valueLabel, query }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.copyState, "aria-live": "polite", children: [
-                  copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
-                ] })
-              ]
-            }
-          ) }),
-          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null
-        ]
-      }
-    );
-  }
-  const entries = utils.isJsonArray(value) ? value.map((item, index) => [String(index), item]) : utils.isJsonObject(value) ? Object.entries(value) : [];
-  const summary = utils.getSummary(value);
-  const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: styles__default.default.node,
       style: { ["--json-indent"]: depth },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          JsonRow.JsonRow,
           {
-            type: "button",
-            className: styles__default.default.toggle,
-            onClick: () => onToggleNode(nodeId),
-            "aria-expanded": expanded,
-            children: [
-              expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
-                keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "[" : "{" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.summary, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: summary, query }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "]" : "}" })
-              ] })
-            ]
+            nodeId,
+            keyName,
+            value,
+            query,
+            match,
+            isExpanded,
+            copied: copiedId === nodeId,
+            onToggleNode,
+            onCopy
           }
-        ) }),
-        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: utils.getPathLabel(path), query }) }) : null,
-        expanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsxRuntime.jsx(
+        ),
+        isContainer && isExpanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsxRuntime.jsx(
           JsonNode,
           {
             keyName: utils.isJsonArray(value) ? `[${childKey}]` : childKey,

package/dist/components/json-viewer/JsonNode.d.ts

@@ -1,3 +1,13 @@
 import type { JSX } from 'react';
 import type { JsonNodeProps } from './types';
+/**
+ * Recursive tree orchestrator: resolves this node's own expanded/match state
+ * from the shared `expandedNodeIds`/`matches`, renders it via the memoized
+ * `JsonRow`, and recurses into children when expanded. Deliberately left
+ * unmemoized - it's cheap (a handful of derived values plus delegating to
+ * JsonRow), and it must always re-run so a toggle/search/copy anywhere in the
+ * tree keeps propagating the current shared state down to every descendant.
+ * The actual re-render savings come from JsonRow's memoization, not from
+ * skipping this function.
+ */
 export declare function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, copiedId, onCopy, }: JsonNodeProps): JSX.Element | null;

package/dist/components/json-viewer/JsonNode.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Check, Copy, ChevronDown, ChevronRight } from 'lucide-react';
-import { HighlightedText } from '../../components/highlighted-text/HighlightedText';
+import { useMemo } from 'react';
+import { JsonRow } from './JsonRow';
 import styles from './JsonViewer.module.css';
-import { getNodeId, getValueType, formatPrimitive, getPrimitiveRawValue, capitalize, getPathLabel, isJsonArray, isJsonObject, getSummary } from './utils';
+import { getNodeId, resolveNodeVisibility, isJsonArray, isJsonObject } from './utils';
 
 function JsonNode({
   keyName,
@@ -19,81 +19,41 @@ function JsonNode({
   onCopy
 }) {
   const nodeId = getNodeId(path);
-  const nodeType = getValueType(value);
   const match = matches.get(nodeId);
-  const shouldRender = query ? Boolean(match) : true;
-  const forceOpen = query ? Boolean(match == null ? void 0 : match.descendant) : false;
+  const { isContainer, shouldRender, isExpanded } = resolveNodeVisibility(
+    nodeId,
+    value,
+    query,
+    match,
+    expandedNodeIds
+  );
+  const entries = useMemo(() => {
+    if (isJsonArray(value)) return value.map((item, index) => [String(index), item]);
+    if (isJsonObject(value)) return Object.entries(value);
+    return [];
+  }, [value]);
   if (!shouldRender) return null;
-  if (nodeType !== "array" && nodeType !== "object") {
-    const primitive = value;
-    const valueLabel = formatPrimitive(primitive);
-    const rawValue = getPrimitiveRawValue(primitive);
-    const copied = copiedId === nodeId;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: styles.node,
-        style: { ["--json-indent"]: depth },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: styles.valueButton,
-              onClick: () => onCopy(nodeId, rawValue),
-              title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
-                  keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
-                    /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
-                    /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
-                  ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
-                  /* @__PURE__ */ jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsx(HighlightedText, { text: valueLabel, query }) })
-                ] }),
-                /* @__PURE__ */ jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [
-                  copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
-                ] })
-              ]
-            }
-          ) }),
-          query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), query }) }) : null
-        ]
-      }
-    );
-  }
-  const entries = isJsonArray(value) ? value.map((item, index) => [String(index), item]) : isJsonObject(value) ? Object.entries(value) : [];
-  const summary = getSummary(value);
-  const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: styles.node,
       style: { ["--json-indent"]: depth },
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          JsonRow,
           {
-            type: "button",
-            className: styles.toggle,
-            onClick: () => onToggleNode(nodeId),
-            "aria-expanded": expanded,
-            children: [
-              expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
-                keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
-                  /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
-                ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
-                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "[" : "{" }),
-                /* @__PURE__ */ jsx("span", { className: styles.summary, children: /* @__PURE__ */ jsx(HighlightedText, { text: summary, query }) }),
-                /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "]" : "}" })
-              ] })
-            ]
+            nodeId,
+            keyName,
+            value,
+            query,
+            match,
+            isExpanded,
+            copied: copiedId === nodeId,
+            onToggleNode,
+            onCopy
           }
-        ) }),
-        query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: getPathLabel(path), query }) }) : null,
-        expanded ? /* @__PURE__ */ jsx("div", { className: styles.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsx(
+        ),
+        isContainer && isExpanded ? /* @__PURE__ */ jsx("div", { className: styles.children, role: depth === 0 ? "group" : void 0, children: entries.map(([childKey, childValue]) => /* @__PURE__ */ jsx(
           JsonNode,
           {
             keyName: isJsonArray(value) ? `[${childKey}]` : childKey,

package/dist/components/json-viewer/JsonRow.cjs

@@ -0,0 +1,85 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var HighlightedText = require('../../components/highlighted-text/HighlightedText');
+var styles = require('./JsonViewer.module.css');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonRowComponent({
+  nodeId,
+  keyName,
+  value,
+  query,
+  match,
+  isExpanded,
+  copied,
+  onToggleNode,
+  onCopy
+}) {
+  const nodeType = utils.getValueType(value);
+  if (nodeType !== "array" && nodeType !== "object") {
+    const primitive = value;
+    const valueLabel = utils.formatPrimitive(primitive);
+    const rawValue = utils.getPrimitiveRawValue(primitive);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles__default.default.valueButton,
+          onClick: () => onCopy(nodeId, rawValue),
+          title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+              keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: [styles__default.default.value, styles__default.default[`value${utils.capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: valueLabel, query }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.copyState, "aria-live": "polite", children: [
+              copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+            ] })
+          ]
+        }
+      ) }),
+      query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: nodeId, query }) }) : null
+    ] });
+  }
+  const summary = utils.getSummary(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: styles__default.default.toggle,
+        onClick: () => onToggleNode(nodeId),
+        "aria-expanded": isExpanded,
+        children: [
+          isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.rowLabel, children: [
+            keyName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.keyChunk, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.key, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: keyName, query }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.punctuation, children: ":" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.rootLabel, children: "$" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "[" : "{" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.summary, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: summary, query }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bracket, children: utils.isJsonArray(value) ? "]" : "}" })
+          ] })
+        ]
+      }
+    ) }),
+    query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.pathHint, children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedText.HighlightedText, { text: nodeId, query }) }) : null
+  ] });
+}
+const JsonRow = react.memo(JsonRowComponent);
+
+exports.JsonRow = JsonRow;

package/dist/components/json-viewer/JsonRow.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import type { JsonRowProps } from './types';
+declare function JsonRowComponent({ nodeId, keyName, value, query, match, isExpanded, copied, onToggleNode, onCopy, }: JsonRowProps): JSX.Element;
+export declare const JsonRow: import("react").MemoExoticComponent<typeof JsonRowComponent>;
+export {};

package/dist/components/json-viewer/JsonRow.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Check, Copy, ChevronDown, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { HighlightedText } from '../../components/highlighted-text/HighlightedText';
+import styles from './JsonViewer.module.css';
+import { getValueType, formatPrimitive, getPrimitiveRawValue, capitalize, getSummary, isJsonArray } from './utils';
+
+function JsonRowComponent({
+  nodeId,
+  keyName,
+  value,
+  query,
+  match,
+  isExpanded,
+  copied,
+  onToggleNode,
+  onCopy
+}) {
+  const nodeType = getValueType(value);
+  if (nodeType !== "array" && nodeType !== "object") {
+    const primitive = value;
+    const valueLabel = formatPrimitive(primitive);
+    const rawValue = getPrimitiveRawValue(primitive);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.valueButton,
+          onClick: () => onCopy(nodeId, rawValue),
+          title: copied ? "Kopieret" : "Kopi\xE9r v\xE6rdi",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+              keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+              ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(" "), children: /* @__PURE__ */ jsx(HighlightedText, { text: valueLabel, query }) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [
+              copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: copied ? "Kopieret" : "Kopi\xE9r" })
+            ] })
+          ]
+        }
+      ) }),
+      query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: nodeId, query }) }) : null
+    ] });
+  }
+  const summary = getSummary(value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: styles.row, "data-match": (match == null ? void 0 : match.self) || void 0, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: styles.toggle,
+        onClick: () => onToggleNode(nodeId),
+        "aria-expanded": isExpanded,
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { className: styles.rowLabel, children: [
+            keyName !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.keyChunk, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.key, children: /* @__PURE__ */ jsx(HighlightedText, { text: keyName, query }) }),
+              /* @__PURE__ */ jsx("span", { className: styles.punctuation, children: ":" })
+            ] }) : /* @__PURE__ */ jsx("span", { className: styles.rootLabel, children: "$" }),
+            /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "[" : "{" }),
+            /* @__PURE__ */ jsx("span", { className: styles.summary, children: /* @__PURE__ */ jsx(HighlightedText, { text: summary, query }) }),
+            /* @__PURE__ */ jsx("span", { className: styles.bracket, children: isJsonArray(value) ? "]" : "}" })
+          ] })
+        ]
+      }
+    ) }),
+    query && !(match == null ? void 0 : match.self) ? /* @__PURE__ */ jsx("div", { className: styles.pathHint, children: /* @__PURE__ */ jsx(HighlightedText, { text: nodeId, query }) }) : null
+  ] });
+}
+const JsonRow = memo(JsonRowComponent);
+
+export { JsonRow };