@dbcdk/react-components 0.0.195 → 0.0.197

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

@@ -2,24 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var react = require('react');
-var Menu = require('../../components/menu/Menu');
-var Popover = require('../../components/popover/Popover');
-var usePersistentState = require('../../hooks/usePersistentState');
 var JsonNode = require('./JsonNode');
-var styles = require('./JsonViewer.module.css');
-var useClipboardStatus = require('./useClipboardStatus');
-var utils = require('./utils');
-var clipboard_utils = require('../../utils/clipboard.utils');
-var Button = require('../button/Button');
-var Icon = require('../icon/Icon');
+var JsonViewerShell = require('./JsonViewerShell');
+var useJsonViewerState = require('./useJsonViewerState');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
   value,
   defaultExpandedDepth = 2,
@@ -36,245 +22,42 @@ function JsonViewer({
   storageKey,
   borderless = false
 }) {
-  const [queryInput, setQueryInput] = react.useState("");
-  const [query, setQuery] = react.useState("");
-  const normalizedQuery = utils.normalizeSearch(query);
-  const inputId = react.useId();
-  const { copiedId, setCopiedId } = useClipboardStatus.useClipboardStatus();
-  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
-    initialValue: appearance,
-    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
-    validate: (stored) => stored === "dark" || stored === "light"
-  });
-  const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
-    initialValue: defaultViewMode,
-    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
-    validate: (stored) => stored === "tree" || stored === "raw"
+  const state = useJsonViewerState.useJsonViewerState({
+    value,
+    defaultExpandedDepth,
+    expandAll,
+    defaultViewMode,
+    searchDebounceMs,
+    appearance,
+    storageKey
   });
-  const handleToggleAppearance = () => {
-    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
-  };
-  react.useEffect(() => {
-    const timeoutId = window.setTimeout(() => {
-      setQuery(queryInput);
-    }, searchDebounceMs);
-    return () => window.clearTimeout(timeoutId);
-  }, [queryInput, searchDebounceMs]);
-  const safeValue = react.useMemo(() => {
-    if (utils.isJsonValue(value)) return value;
-    return {
-      unsupported: {
-        besked: "Den angivne v\xE6rdi kan ikke vises som JSON",
-        modtagetType: typeof value
-      }
-    };
-  }, [value]);
-  const matches = react.useMemo(
-    () => normalizedQuery ? utils.collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
-    [normalizedQuery, safeValue]
-  );
-  const allExpandableNodeIds = react.useMemo(() => utils.collectExpandableNodeIds(safeValue), [safeValue]);
-  const [expandedNodeIds, setExpandedNodeIds] = react.useState(
-    () => new Set(utils.collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
-  );
-  const hasResults = normalizedQuery ? matches.size > 0 : true;
-  const rawJson = react.useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
-  const contentClassName = [
-    viewMode === "raw" ? styles__default.default.rawPane : styles__default.default.treePane,
-    deleted ? styles__default.default.deleted : ""
-  ].filter(Boolean).join(" ");
-  const handleCopy = async (nodeId, rawValue) => {
-    const success = await clipboard_utils.copyToClipboard(rawValue);
-    setCopiedId(success ? nodeId : null);
-  };
-  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
-  const handleExpandAll = () => {
-    setExpandedNodeIds(new Set(allExpandableNodeIds));
-  };
-  const handleCollapseAll = () => {
-    setExpandedNodeIds(/* @__PURE__ */ new Set());
-  };
-  const handleToggleNode = (nodeId) => {
-    setExpandedNodeIds((current) => {
-      const next = new Set(current);
-      if (next.has(nodeId)) next.delete(nodeId);
-      else next.add(nodeId);
-      return next;
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    JsonViewerShell.JsonViewerShell,
     {
-      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : "", className].filter(Boolean).join(" "),
-      "data-appearance": currentAppearance,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: styles__default.default.toolbar,
-            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
-                viewMode === "tree" ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles__default.default.searchField, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: styles__default.default.searchIcon, "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      id: inputId,
-                      type: "search",
-                      value: queryInput,
-                      onChange: (event) => setQueryInput(event.target.value),
-                      placeholder: searchPlaceholder,
-                      className: styles__default.default.searchInput
-                    }
-                  ),
-                  queryInput ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles__default.default.clearButton,
-                      "aria-label": "Ryd s\xF8gning",
-                      onClick: () => {
-                        setQueryInput("");
-                        setQuery("");
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Popover.Popover,
-                  {
-                    matchTriggerWidth: false,
-                    minWidth: "200px",
-                    trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
-                      Button.Button,
-                      {
-                        variant: "inline",
-                        "aria-label": "Flere handlinger",
-                        "aria-haspopup": "menu",
-                        "aria-expanded": isOpen ? true : false,
-                        onClick: toggle,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
-                      }
-                    ),
-                    children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleExpandAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fold alle ud" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleCollapseAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fold alle sammen" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setViewMode((mode) => mode === "raw" ? "tree" : "raw");
-                            close();
-                          },
-                          children: [
-                            viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleToggleAppearance();
-                            close();
-                          },
-                          children: [
-                            currentAppearance === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-                      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleCopyAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardCopy, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Kopi\xE9r JSON" })
-                          ]
-                        }
-                      ) })
-                    ] })
-                  }
-                ) })
-              ] }),
-              helperText || viewMode === "tree" && normalizedQuery ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.metaRow, children: [
-                helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helperText, children: helperText }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
-              ] }) : null
-            ]
-          }
-        ),
-        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "pre",
-          {
-            className: contentClassName,
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-            children: rawJson
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: contentClassName,
-            role: "tree",
-            "aria-label": "JSON-visning",
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-            children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
-              JsonNode.JsonNode,
-              {
-                keyName: void 0,
-                path: [],
-                value: safeValue,
-                depth: 0,
-                defaultExpandedDepth,
-                query: normalizedQuery,
-                matches,
-                expandedNodeIds,
-                onToggleNode: handleToggleNode,
-                copiedId,
-                onCopy: handleCopy
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
-          }
-        )
-      ]
+      state,
+      helperText,
+      searchPlaceholder,
+      emptySearchText,
+      className,
+      maxHeight,
+      borderless,
+      deleted,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        JsonNode.JsonNode,
+        {
+          keyName: void 0,
+          path: [],
+          value: state.safeValue,
+          depth: 0,
+          defaultExpandedDepth,
+          query: state.normalizedQuery,
+          matches: state.matches,
+          expandedNodeIds: state.expandedNodeIds,
+          onToggleNode: state.handleToggleNode,
+          copiedId: state.copiedId,
+          onCopy: state.handleCopy
+        }
+      )
     }
   );
 }

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

@@ -1,19 +1,9 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
-import { useState, useId, useEffect, useMemo } from 'react';
-import { Menu } from '../../components/menu/Menu';
-import { Popover } from '../../components/popover/Popover';
-import { usePersistentState } from '../../hooks/usePersistentState';
+import { jsx } from 'react/jsx-runtime';
 import { JsonNode } from './JsonNode';
-import styles from './JsonViewer.module.css';
-import { useClipboardStatus } from './useClipboardStatus';
-import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
-import { copyToClipboard } from '../../utils/clipboard.utils';
-import { Button } from '../button/Button';
-import { Icon } from '../icon/Icon';
+import { JsonViewerShell } from './JsonViewerShell';
+import { useJsonViewerState } from './useJsonViewerState';
 
-const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
   value,
   defaultExpandedDepth = 2,
@@ -30,245 +20,42 @@ function JsonViewer({
   storageKey,
   borderless = false
 }) {
-  const [queryInput, setQueryInput] = useState("");
-  const [query, setQuery] = useState("");
-  const normalizedQuery = normalizeSearch(query);
-  const inputId = useId();
-  const { copiedId, setCopiedId } = useClipboardStatus();
-  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
-    initialValue: appearance,
-    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
-    validate: (stored) => stored === "dark" || stored === "light"
+  const state = useJsonViewerState({
+    value,
+    defaultExpandedDepth,
+    expandAll,
+    defaultViewMode,
+    searchDebounceMs,
+    appearance,
+    storageKey
   });
-  const { value: viewMode, setValue: setViewMode } = usePersistentState({
-    initialValue: defaultViewMode,
-    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
-    validate: (stored) => stored === "tree" || stored === "raw"
-  });
-  const handleToggleAppearance = () => {
-    setCurrentAppearance((current) => current === "dark" ? "light" : "dark");
-  };
-  useEffect(() => {
-    const timeoutId = window.setTimeout(() => {
-      setQuery(queryInput);
-    }, searchDebounceMs);
-    return () => window.clearTimeout(timeoutId);
-  }, [queryInput, searchDebounceMs]);
-  const safeValue = useMemo(() => {
-    if (isJsonValue(value)) return value;
-    return {
-      unsupported: {
-        besked: "Den angivne v\xE6rdi kan ikke vises som JSON",
-        modtagetType: typeof value
-      }
-    };
-  }, [value]);
-  const matches = useMemo(
-    () => normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
-    [normalizedQuery, safeValue]
-  );
-  const allExpandableNodeIds = useMemo(() => collectExpandableNodeIds(safeValue), [safeValue]);
-  const [expandedNodeIds, setExpandedNodeIds] = useState(
-    () => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
-  );
-  const hasResults = normalizedQuery ? matches.size > 0 : true;
-  const rawJson = useMemo(() => JSON.stringify(safeValue, null, 2), [safeValue]);
-  const contentClassName = [
-    viewMode === "raw" ? styles.rawPane : styles.treePane,
-    deleted ? styles.deleted : ""
-  ].filter(Boolean).join(" ");
-  const handleCopy = async (nodeId, rawValue) => {
-    const success = await copyToClipboard(rawValue);
-    setCopiedId(success ? nodeId : null);
-  };
-  const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
-  const handleExpandAll = () => {
-    setExpandedNodeIds(new Set(allExpandableNodeIds));
-  };
-  const handleCollapseAll = () => {
-    setExpandedNodeIds(/* @__PURE__ */ new Set());
-  };
-  const handleToggleNode = (nodeId) => {
-    setExpandedNodeIds((current) => {
-      const next = new Set(current);
-      if (next.has(nodeId)) next.delete(nodeId);
-      else next.add(nodeId);
-      return next;
-    });
-  };
-  return /* @__PURE__ */ jsxs(
-    "section",
+  return /* @__PURE__ */ jsx(
+    JsonViewerShell,
     {
-      className: [styles.viewer, borderless ? styles.borderless : "", className].filter(Boolean).join(" "),
-      "data-appearance": currentAppearance,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: styles.toolbar,
-            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
-                viewMode === "tree" ? /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
-                  /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      id: inputId,
-                      type: "search",
-                      value: queryInput,
-                      onChange: (event) => setQueryInput(event.target.value),
-                      placeholder: searchPlaceholder,
-                      className: styles.searchInput
-                    }
-                  ),
-                  queryInput ? /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles.clearButton,
-                      "aria-label": "Ryd s\xF8gning",
-                      onClick: () => {
-                        setQueryInput("");
-                        setQuery("");
-                      },
-                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }) : /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("div", { className: styles.actions, 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(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
-                      }
-                    ),
-                    children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
-                      /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleExpandAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Fold alle ud" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleCollapseAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Fold alle sammen" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Separator, {}),
-                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setViewMode((mode) => mode === "raw" ? "tree" : "raw");
-                            close();
-                          },
-                          children: [
-                            viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleToggleAppearance();
-                            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: () => {
-                            handleCopyAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r JSON" })
-                          ]
-                        }
-                      ) })
-                    ] })
-                  }
-                ) })
-              ] }),
-              helperText || viewMode === "tree" && normalizedQuery ? /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
-                helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("span", { className: styles.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
-              ] }) : null
-            ]
-          }
-        ),
-        viewMode === "raw" ? /* @__PURE__ */ jsx(
-          "pre",
-          {
-            className: contentClassName,
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-            children: rawJson
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: contentClassName,
-            role: "tree",
-            "aria-label": "JSON-visning",
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-            children: hasResults ? /* @__PURE__ */ jsx(
-              JsonNode,
-              {
-                keyName: void 0,
-                path: [],
-                value: safeValue,
-                depth: 0,
-                defaultExpandedDepth,
-                query: normalizedQuery,
-                matches,
-                expandedNodeIds,
-                onToggleNode: handleToggleNode,
-                copiedId,
-                onCopy: handleCopy
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
-          }
-        )
-      ]
+      state,
+      helperText,
+      searchPlaceholder,
+      emptySearchText,
+      className,
+      maxHeight,
+      borderless,
+      deleted,
+      children: /* @__PURE__ */ jsx(
+        JsonNode,
+        {
+          keyName: void 0,
+          path: [],
+          value: state.safeValue,
+          depth: 0,
+          defaultExpandedDepth,
+          query: state.normalizedQuery,
+          matches: state.matches,
+          expandedNodeIds: state.expandedNodeIds,
+          onToggleNode: state.handleToggleNode,
+          copiedId: state.copiedId,
+          onCopy: state.handleCopy
+        }
+      )
     }
   );
 }