@dbcdk/react-components 0.0.193 → 0.0.195

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

@@ -11,6 +11,7 @@ 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');
 
@@ -31,6 +32,7 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -77,13 +79,13 @@ function JsonViewer({
   );
   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) => {
-    try {
-      await navigator.clipboard.writeText(rawValue);
-      setCopiedId(nodeId);
-    } catch {
-      setCopiedId(null);
-    }
+    const success = await clipboard_utils.copyToClipboard(rawValue);
+    setCopiedId(success ? nodeId : null);
   };
   const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
   const handleExpandAll = () => {
@@ -243,14 +245,14 @@ function JsonViewer({
         viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(
           "pre",
           {
-            className: styles__default.default.rawPane,
+            className: contentClassName,
             style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: rawJson
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: styles__default.default.treePane,
+            className: contentClassName,
             role: "tree",
             "aria-label": "JSON-visning",
             style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { JsonViewerProps } from './types';
 export type { JsonViewerProps, JsonViewerViewMode } from './types';
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, defaultViewMode, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, borderless, }: JsonViewerProps): JSX.Element;
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, defaultViewMode, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, deleted, storageKey, borderless, }: JsonViewerProps): JSX.Element;

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

@@ -9,6 +9,7 @@ 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';
 
@@ -25,6 +26,7 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -71,13 +73,13 @@ function JsonViewer({
   );
   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) => {
-    try {
-      await navigator.clipboard.writeText(rawValue);
-      setCopiedId(nodeId);
-    } catch {
-      setCopiedId(null);
-    }
+    const success = await copyToClipboard(rawValue);
+    setCopiedId(success ? nodeId : null);
   };
   const handleCopyAll = () => handleCopy(COPY_ALL_ID, rawJson);
   const handleExpandAll = () => {
@@ -237,14 +239,14 @@ function JsonViewer({
         viewMode === "raw" ? /* @__PURE__ */ jsx(
           "pre",
           {
-            className: styles.rawPane,
+            className: contentClassName,
             style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: rawJson
           }
         ) : /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles.treePane,
+            className: contentClassName,
             role: "tree",
             "aria-label": "JSON-visning",
             style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,

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

@@ -165,6 +165,11 @@
   font-size: inherit;
 }
 
+.deleted,
+.deleted * {
+  color: var(--color-status-error);
+}
+
 .node {
   display: flex;
   flex-direction: column;

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

@@ -22,6 +22,8 @@ export interface JsonViewerProps {
     maxHeight?: number | string;
     /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
     appearance?: JsonViewerAppearance;
+    /** Displays all JSON content in the theme's error color, for deleted or invalid content. */
+    deleted?: boolean;
     /**
      * When set, the user's appearance choice is persisted to localStorage
      * under `${storageKey}:appearance`.

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

@@ -9,6 +9,7 @@ var Popover = require('../../components/popover/Popover');
 var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./LineViewer.module.css');
 var tokenizeLineFormat = require('./tokenizeLineFormat');
+var clipboard_utils = require('../../utils/clipboard.utils');
 var Button = require('../button/Button');
 var Icon = require('../icon/Icon');
 
@@ -53,9 +54,7 @@ function LineViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(lines).catch(() => {
-    });
+    void clipboard_utils.copyToClipboard(lines);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;

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

@@ -7,6 +7,7 @@ import { Popover } from '../../components/popover/Popover';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './LineViewer.module.css';
 import { tokenizeLineFormat } from './tokenizeLineFormat';
+import { copyToClipboard } from '../../utils/clipboard.utils';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
 
@@ -47,9 +48,7 @@ function LineViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(lines).catch(() => {
-    });
+    void copyToClipboard(lines);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;

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

@@ -1,34 +1,51 @@
 'use strict';
 
-const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const FIELD_LINE_PATTERN = /^(\d{3})(\s+)(?:((?!\*)\S+)(\s+))?(\*[\s\S]*)$/;
 const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeSubfields(text) {
+  const tokens = [];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match;
+  let lastIndex = 0;
+  while (match = SUBFIELD_PATTERN.exec(text)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "text", value: text.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match[1] });
+    tokens.push({ type: "value", value: match[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    tokens.push({ type: "text", value: text.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeContinuationLine(line, continuesValue) {
+  const tokens = tokenizeSubfields(line);
+  if (!continuesValue) return tokens;
+  return tokens.map((token) => token.type === "text" ? { ...token, type: "value" } : token);
+}
 function tokenizeFieldLine(line) {
   const match = FIELD_LINE_PATTERN.exec(line);
-  if (!match) return [{ type: "text", value: line }];
+  if (!match) return tokenizeContinuationLine(line, false);
   const [, tag, gap1, indicator, gap2, rest] = match;
   const tokens = [
     { type: "tag", value: tag },
-    { type: "whitespace", value: gap1 },
-    { type: "indicator", value: indicator },
-    { type: "whitespace", value: gap2 }
+    { type: "whitespace", value: gap1 }
   ];
-  SUBFIELD_PATTERN.lastIndex = 0;
-  let match2;
-  let lastIndex = 0;
-  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
-    tokens.push({ type: "subfieldMarker", value: "*" });
-    tokens.push({ type: "subfieldCode", value: match2[1] });
-    tokens.push({ type: "value", value: match2[2] });
-    lastIndex = SUBFIELD_PATTERN.lastIndex;
-  }
-  if (lastIndex < rest.length) {
-    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  if (indicator !== void 0) {
+    tokens.push({ type: "indicator", value: indicator });
+    tokens.push({ type: "whitespace", value: gap2 });
   }
+  tokens.push(...tokenizeSubfields(rest));
   return tokens;
 }
 function tokenizeLineFormat(source) {
+  var _a;
   const tokens = [];
   const chunks = source.split(/(\n)/);
+  let continuesValue = false;
   for (const chunk of chunks) {
     if (chunk === "") continue;
     if (chunk === "\n") {
@@ -42,9 +59,12 @@ function tokenizeLineFormat(source) {
       if (leading) tokens.push({ type: "text", value: leading });
       tokens.push({ type: "terminator", value: "$" });
       if (trailing) tokens.push({ type: "text", value: trailing });
+      continuesValue = false;
       continue;
     }
-    tokens.push(...tokenizeFieldLine(chunk));
+    const lineTokens = FIELD_LINE_PATTERN.test(chunk) ? tokenizeFieldLine(chunk) : tokenizeContinuationLine(chunk, continuesValue);
+    tokens.push(...lineTokens);
+    continuesValue = ((_a = lineTokens[lineTokens.length - 1]) == null ? void 0 : _a.type) === "value";
   }
   return tokens;
 }

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

@@ -4,11 +4,12 @@ export interface LineToken {
     value: string;
 }
 /**
- * Tokenizes a MARC-style "line format" record (field tag, indicators,
- * `*code value` subfields, terminated by a lone `$`) for syntax
+ * Tokenizes a MARC-style "line format" record (field tag, optional
+ * indicators, `*code value` subfields, terminated by a lone `$`) for syntax
  * highlighting without imposing a strict grammar. Preserves the source
  * exactly - concatenating every token's `value` reproduces the input - so a
- * wrapped continuation line or malformed field still displays as plain
- * text instead of breaking the tokenizer.
+ * wrapped continuation after a subfield value retains value styling, while a
+ * standalone malformed line displays as plain text instead of breaking the
+ * tokenizer.
  */
 export declare function tokenizeLineFormat(source: string): LineToken[];

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

@@ -1,32 +1,49 @@
-const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const FIELD_LINE_PATTERN = /^(\d{3})(\s+)(?:((?!\*)\S+)(\s+))?(\*[\s\S]*)$/;
 const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeSubfields(text) {
+  const tokens = [];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match;
+  let lastIndex = 0;
+  while (match = SUBFIELD_PATTERN.exec(text)) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "text", value: text.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match[1] });
+    tokens.push({ type: "value", value: match[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    tokens.push({ type: "text", value: text.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeContinuationLine(line, continuesValue) {
+  const tokens = tokenizeSubfields(line);
+  if (!continuesValue) return tokens;
+  return tokens.map((token) => token.type === "text" ? { ...token, type: "value" } : token);
+}
 function tokenizeFieldLine(line) {
   const match = FIELD_LINE_PATTERN.exec(line);
-  if (!match) return [{ type: "text", value: line }];
+  if (!match) return tokenizeContinuationLine(line, false);
   const [, tag, gap1, indicator, gap2, rest] = match;
   const tokens = [
     { type: "tag", value: tag },
-    { type: "whitespace", value: gap1 },
-    { type: "indicator", value: indicator },
-    { type: "whitespace", value: gap2 }
+    { type: "whitespace", value: gap1 }
   ];
-  SUBFIELD_PATTERN.lastIndex = 0;
-  let match2;
-  let lastIndex = 0;
-  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
-    tokens.push({ type: "subfieldMarker", value: "*" });
-    tokens.push({ type: "subfieldCode", value: match2[1] });
-    tokens.push({ type: "value", value: match2[2] });
-    lastIndex = SUBFIELD_PATTERN.lastIndex;
-  }
-  if (lastIndex < rest.length) {
-    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  if (indicator !== void 0) {
+    tokens.push({ type: "indicator", value: indicator });
+    tokens.push({ type: "whitespace", value: gap2 });
   }
+  tokens.push(...tokenizeSubfields(rest));
   return tokens;
 }
 function tokenizeLineFormat(source) {
+  var _a;
   const tokens = [];
   const chunks = source.split(/(\n)/);
+  let continuesValue = false;
   for (const chunk of chunks) {
     if (chunk === "") continue;
     if (chunk === "\n") {
@@ -40,9 +57,12 @@ function tokenizeLineFormat(source) {
       if (leading) tokens.push({ type: "text", value: leading });
       tokens.push({ type: "terminator", value: "$" });
       if (trailing) tokens.push({ type: "text", value: trailing });
+      continuesValue = false;
       continue;
     }
-    tokens.push(...tokenizeFieldLine(chunk));
+    const lineTokens = FIELD_LINE_PATTERN.test(chunk) ? tokenizeFieldLine(chunk) : tokenizeContinuationLine(chunk, continuesValue);
+    tokens.push(...lineTokens);
+    continuesValue = ((_a = lineTokens[lineTokens.length - 1]) == null ? void 0 : _a.type) === "value";
   }
   return tokens;
 }

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -9,6 +9,7 @@ var Popover = require('../../components/popover/Popover');
 var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
+var clipboard_utils = require('../../utils/clipboard.utils');
 var Button = require('../button/Button');
 var Icon = require('../icon/Icon');
 
@@ -31,6 +32,8 @@ function XmlViewer({
   xml,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -42,7 +45,7 @@ function XmlViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
-    initialValue: "highlighted",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "highlighted" || stored === "raw"
   });
@@ -52,9 +55,7 @@ function XmlViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
-    });
+    void clipboard_utils.copyToClipboard(xml);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;
@@ -159,7 +160,12 @@ function XmlViewer({
         /* @__PURE__ */ jsxRuntime.jsx(
           "pre",
           {
-            className: [styles__default.default.codePane, styles__default.default[size], wrap ? styles__default.default.wrap : styles__default.default.noWrap].join(" "),
+            className: [
+              styles__default.default.codePane,
+              styles__default.default[size],
+              wrap ? styles__default.default.wrap : styles__default.default.noWrap,
+              deleted ? styles__default.default.deleted : ""
+            ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
             children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {

package/dist/components/xml-viewer/XmlViewer.d.ts

@@ -1,10 +1,15 @@
 import type { JSX } from 'react';
 export type XmlViewerAppearance = 'dark' | 'light';
+type ViewMode = 'highlighted' | 'raw';
 export interface XmlViewerProps {
     xml: string;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
     appearance?: XmlViewerAppearance;
+    /** Initial view mode. The user can toggle it via the kebab menu; defaults to 'highlighted'. */
+    defaultViewMode?: ViewMode;
+    /** Displays all XML text in the theme's error color, for deleted or invalid content. */
+    deleted?: boolean;
     /**
      * When set, the user's appearance/view-mode/wrap choices are persisted to
      * localStorage under `${storageKey}:appearance` etc.
@@ -17,4 +22,5 @@ export interface XmlViewerProps {
      */
     borderless?: boolean;
 }
-export declare function XmlViewer({ xml, size, appearance, storageKey, borderless, }: XmlViewerProps): JSX.Element;
+export declare function XmlViewer({ xml, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: XmlViewerProps): JSX.Element;
+export {};

package/dist/components/xml-viewer/XmlViewer.js

@@ -7,6 +7,7 @@ import { Popover } from '../../components/popover/Popover';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
+import { copyToClipboard } from '../../utils/clipboard.utils';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
 
@@ -25,6 +26,8 @@ function XmlViewer({
   xml,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -36,7 +39,7 @@ function XmlViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState({
-    initialValue: "highlighted",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "highlighted" || stored === "raw"
   });
@@ -46,9 +49,7 @@ function XmlViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
-    });
+    void copyToClipboard(xml);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;
@@ -153,7 +154,12 @@ function XmlViewer({
         /* @__PURE__ */ jsx(
           "pre",
           {
-            className: [styles.codePane, styles[size], wrap ? styles.wrap : styles.noWrap].join(" "),
+            className: [
+              styles.codePane,
+              styles[size],
+              wrap ? styles.wrap : styles.noWrap,
+              deleted ? styles.deleted : ""
+            ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
             children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {

package/dist/components/xml-viewer/XmlViewer.module.css

@@ -5,7 +5,11 @@
 
   --xml-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --xml-attr-name: color-mix(in oklab, var(--color-fg-inverse) 50%, var(--color-syntax-accent) 50%);
-  --xml-attr-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
+  --xml-attr-value: color-mix(
+    in oklab,
+    var(--color-fg-inverse) 20%,
+    var(--color-syntax-string) 80%
+  );
   --xml-comment: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
   --xml-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
 
@@ -53,6 +57,11 @@
   line-height: 1.35;
 }
 
+.deleted code,
+.deleted code * {
+  color: var(--color-status-error);
+}
+
 .wrap {
   white-space: pre-wrap;
   overflow-wrap: break-word;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.193",
+  "version": "0.0.195",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",