@dbcdk/react-components 0.0.194 → 0.0.196

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

@@ -0,0 +1,208 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var styles = require('./JsonViewer.module.css');
+var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonViewerShell({
+  state,
+  helperText,
+  searchPlaceholder,
+  emptySearchText,
+  className,
+  maxHeight,
+  borderless,
+  deleted = false,
+  children,
+  treePaneRef
+}) {
+  const {
+    queryInput,
+    setQueryInput,
+    setQuery,
+    normalizedQuery,
+    inputId,
+    currentAppearance,
+    handleToggleAppearance,
+    viewMode,
+    setViewMode,
+    matches,
+    hasResults,
+    rawJson,
+    handleCopyAll,
+    handleExpandAll,
+    handleCollapseAll
+  } = state;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      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: [styles__default.default.rawPane, deleted ? styles__default.default.deleted : ""].filter(Boolean).join(" "),
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: rawJson
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: [styles__default.default.treePane, deleted ? styles__default.default.deleted : ""].filter(Boolean).join(" "),
+            role: "tree",
+            "aria-label": "JSON-visning",
+            ref: treePaneRef,
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: hasResults ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.JsonViewerShell = JsonViewerShell;

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

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode, Ref } from 'react';
+import type { JsonViewerState } from './useJsonViewerState';
+export type JsonViewerShellProps = {
+    state: JsonViewerState;
+    helperText?: string;
+    searchPlaceholder: string;
+    emptySearchText: string;
+    className?: string;
+    maxHeight?: number | string;
+    borderless: boolean;
+    /** Displays all JSON content in the theme's error color, for deleted or invalid content. */
+    deleted?: boolean;
+    /** The tree renderer (recursive or virtualized) - only shown when there are results. */
+    children: ReactNode;
+    /** Attached to the scrollable tree pane - lets a virtualized renderer use it as its scroll element. */
+    treePaneRef?: Ref<HTMLDivElement>;
+};
+/**
+ * Toolbar (search, expand-all/collapse-all/appearance/raw-view menu) plus the
+ * raw/tree pane switch, shared by every JsonViewer flavor. The actual tree
+ * rendering strategy (recursive `JsonNode`, or a virtualized flat list) is
+ * passed in as `children` so this stays dependency-free and reusable from an
+ * optional entry point that pulls in extra peer dependencies.
+ */
+export declare function JsonViewerShell({ state, helperText, searchPlaceholder, emptySearchText, className, maxHeight, borderless, deleted, children, treePaneRef, }: JsonViewerShellProps): JSX.Element;

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

@@ -0,0 +1,202 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import styles from './JsonViewer.module.css';
+import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
+
+function JsonViewerShell({
+  state,
+  helperText,
+  searchPlaceholder,
+  emptySearchText,
+  className,
+  maxHeight,
+  borderless,
+  deleted = false,
+  children,
+  treePaneRef
+}) {
+  const {
+    queryInput,
+    setQueryInput,
+    setQuery,
+    normalizedQuery,
+    inputId,
+    currentAppearance,
+    handleToggleAppearance,
+    viewMode,
+    setViewMode,
+    matches,
+    hasResults,
+    rawJson,
+    handleCopyAll,
+    handleExpandAll,
+    handleCollapseAll
+  } = state;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      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: [styles.rawPane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: rawJson
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [styles.treePane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
+            role: "tree",
+            "aria-label": "JSON-visning",
+            ref: treePaneRef,
+            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            children: hasResults ? children : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { JsonViewerShell };

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

@@ -0,0 +1,127 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactVirtual = require('@tanstack/react-virtual');
+var react = require('react');
+var JsonRow = require('./JsonRow');
+var styles = require('./JsonViewer.module.css');
+var JsonViewerShell = require('./JsonViewerShell');
+var useJsonViewerState = require('./useJsonViewerState');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const ESTIMATED_ROW_HEIGHT = 32;
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  defaultViewMode = "tree",
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  emptySearchText = "Ingen matchende noder fundet.",
+  className,
+  maxHeight,
+  appearance = "dark",
+  deleted = false,
+  storageKey,
+  borderless = false
+}) {
+  const state = useJsonViewerState.useJsonViewerState({
+    value,
+    defaultExpandedDepth,
+    expandAll,
+    defaultViewMode,
+    searchDebounceMs,
+    appearance,
+    storageKey
+  });
+  const treePaneRef = react.useRef(null);
+  const measuredHeightsRef = react.useRef(/* @__PURE__ */ new Map());
+  const measuredHeightSumRef = react.useRef(0);
+  const rows = utils.flattenVisibleTree(
+    state.safeValue,
+    state.expandedNodeIds,
+    state.matches,
+    state.normalizedQuery
+  );
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => treePaneRef.current,
+    estimateSize: () => {
+      const measuredCount = measuredHeightsRef.current.size;
+      return measuredCount > 0 ? measuredHeightSumRef.current / measuredCount : ESTIMATED_ROW_HEIGHT;
+    },
+    getItemKey: (index) => rows[index].nodeId,
+    overscan: 12,
+    measureElement: (element, entry, instance) => {
+      var _a, _b;
+      const height = reactVirtual.measureElement(element, entry, instance);
+      const nodeId = (_a = rows[instance.indexFromElement(element)]) == null ? void 0 : _a.nodeId;
+      if (nodeId) {
+        const previous = (_b = measuredHeightsRef.current.get(nodeId)) != null ? _b : 0;
+        measuredHeightSumRef.current += height - previous;
+        measuredHeightsRef.current.set(nodeId, height);
+      }
+      return height;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    JsonViewerShell.JsonViewerShell,
+    {
+      state,
+      helperText,
+      searchPlaceholder,
+      emptySearchText,
+      className,
+      maxHeight,
+      borderless,
+      deleted,
+      treePaneRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: virtualizer.getTotalSize(), position: "relative", width: "100%" }, children: virtualizer.getVirtualItems().map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            className: styles__default.default.node,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              // Matches the 1px `gap` the non-virtualized `.node`/`.children`
+              // rules put between rows - flex gap doesn't apply here since
+              // rows are absolutely positioned rather than flex siblings.
+              paddingBottom: "1px",
+              transform: `translateY(${virtualRow.start}px)`,
+              ["--json-indent"]: row.depth
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              JsonRow.JsonRow,
+              {
+                nodeId: row.nodeId,
+                keyName: row.keyName,
+                value: row.value,
+                query: state.normalizedQuery,
+                match: row.match,
+                isExpanded: row.isExpanded,
+                copied: state.copiedId === row.nodeId,
+                onToggleNode: state.handleToggleNode,
+                onCopy: state.handleCopy
+              }
+            )
+          },
+          row.nodeId
+        );
+      }) })
+    }
+  );
+}
+
+exports.JsonViewer = JsonViewer;

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

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+import type { JsonViewerProps } from './types';
+export type { JsonViewerProps, JsonViewerViewMode } from './types';
+/**
+ * Same props and visual output as the default `JsonViewer`, but the tree body
+ * is rendered through `@tanstack/react-virtual` instead of a fully recursive
+ * component tree - only the rows currently scrolled into view are mounted.
+ * Worthwhile for very large payloads (thousands of visible rows); for
+ * everything else, prefer the default `JsonViewer` to avoid the extra
+ * dependency.
+ *
+ * Virtualization only has something to virtualize when the tree pane is
+ * actually a bounded scroll container, so pass `maxHeight` (or otherwise
+ * constrain height via CSS) - without it the pane grows to fit all content
+ * and every row ends up mounted anyway.
+ */
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, defaultViewMode, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, deleted, storageKey, borderless, }: JsonViewerProps): JSX.Element;