@dbcdk/react-components 0.0.196 → 0.0.198

package/dist/components/json-viewer/JsonViewer.module.css

@@ -3,6 +3,7 @@
   --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
   --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 18%, transparent);
   --json-pane-text: var(--color-fg-inverse);
+  --scroll-fade-color: var(--json-pane-bg);
   --json-pane-muted: color-mix(in oklab, var(--color-fg-inverse) 64%, transparent);
   --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
   --json-pane-hover: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
@@ -165,6 +166,57 @@
   font-size: inherit;
 }
 
+.borderless .rawPane {
+  padding: 0;
+}
+
+/* Raw view: zero-height sticky row so the settings button takes no vertical space. */
+.floatingToolbar {
+  position: sticky;
+  top: var(--spacing-xs);
+  z-index: 1;
+  display: flex;
+  justify-content: flex-end;
+  flex: none;
+  height: 0;
+  /* Cancel the viewer's flex gap so this row adds no spacing. */
+  margin-block-end: calc(-1 * var(--spacing-xs));
+}
+
+.floatingButton {
+  display: block;
+  border-radius: var(--border-radius-default);
+  /* Opaque so scrolled text doesn't show through once it's stuck. */
+  background: var(--json-pane-bg);
+}
+
+.floatingSpacer {
+  float: right;
+  visibility: hidden;
+  margin-block-start: calc(-1 * var(--spacing-xs));
+  margin-inline: var(--spacing-xs) calc(-1 * var(--spacing-xs));
+  line-height: normal;
+  white-space: normal;
+}
+
+.borderless .floatingSpacer {
+  margin: 0 0 0 var(--spacing-xs);
+}
+
+/* While the pane scrolls vertically, keep the button clear of its scrollbar
+   (overlay scrollbars take no space, so nothing else moves it). */
+.viewer:has([data-scrollable-y='true']) .floatingButton {
+  margin-inline-end: var(--spacing-md);
+}
+
+.viewer:has([data-scrollable-y='true']) .floatingSpacer {
+  margin-inline-end: calc(var(--spacing-md) - var(--spacing-xs));
+}
+
+.viewer.borderless:has([data-scrollable-y='true']) .floatingSpacer {
+  margin-inline-end: var(--spacing-md);
+}
+
 .deleted,
 .deleted * {
   color: var(--color-status-error);

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

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var Menu = require('../../components/menu/Menu');
 var Popover = require('../../components/popover/Popover');
+var ScrollFade = require('../../components/scroll-fade/ScrollFade');
 var styles = require('./JsonViewer.module.css');
 var Button = require('../button/Button');
 var Icon = require('../icon/Icon');
@@ -42,164 +43,167 @@ function JsonViewerShell({
     handleExpandAll,
     handleCollapseAll
   } = state;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+  const surface = currentAppearance === "dark" ? "inverse" : void 0;
+  const showMetaRow = Boolean(helperText) || viewMode === "tree" && Boolean(normalizedQuery);
+  const settingsMenu = /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
     {
-      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : "", className].filter(Boolean).join(" "),
-      "data-appearance": currentAppearance,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      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",
           {
-            className: styles__default.default.toolbar,
-            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            type: "button",
+            onClick: () => {
+              handleExpandAll();
+              close();
+            },
             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
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fold alle ud" })
             ]
           }
-        ),
-        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "pre",
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            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
+            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(
+        ) }),
+        /* @__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" })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : "", className].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        viewMode === "tree" || showMetaRow ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, "data-surface": surface, children: [
+          viewMode === "tree" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
+            /* @__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("div", { className: styles__default.default.actions, children: settingsMenu })
+          ] }) : null,
+          showMetaRow ? /* @__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
+        ] }) : null,
+        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.floatingToolbar, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.floatingButton, "data-surface": surface, children: settingsMenu }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollFade.ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "pre",
+            {
+              ref: scrollRef,
+              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: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.floatingSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
+                rawJson
+              ]
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollFade.ScrollFade, { scrollRef: treePaneRef, children: (scrollRef) => /* @__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,
+            ref: scrollRef,
             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 })
           }
-        )
+        ) })
       ]
     }
   );