@dbcdk/react-components 0.0.192 → 0.0.194

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

@@ -23,6 +23,7 @@ function JsonViewer({
   value,
   defaultExpandedDepth = 2,
   expandAll = false,
+  defaultViewMode = "tree",
   searchDebounceMs = 800,
   helperText,
   searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
@@ -30,6 +31,7 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -44,7 +46,7 @@ function JsonViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
-    initialValue: "tree",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "tree" || stored === "raw"
   });
@@ -76,6 +78,10 @@ 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);
@@ -242,14 +248,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 } from './types';
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, borderless, }: JsonViewerProps): JSX.Element;
+export type { JsonViewerProps, JsonViewerViewMode } from './types';
+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

@@ -17,6 +17,7 @@ function JsonViewer({
   value,
   defaultExpandedDepth = 2,
   expandAll = false,
+  defaultViewMode = "tree",
   searchDebounceMs = 800,
   helperText,
   searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
@@ -24,6 +25,7 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -38,7 +40,7 @@ function JsonViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState({
-    initialValue: "tree",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "tree" || stored === "raw"
   });
@@ -70,6 +72,10 @@ 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);
@@ -236,14 +242,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

@@ -8,10 +8,12 @@ export type SearchMatch = {
     descendant: boolean;
 };
 export type JsonViewerAppearance = 'dark' | 'light';
+export type JsonViewerViewMode = 'tree' | 'raw';
 export interface JsonViewerProps {
     value: unknown;
     defaultExpandedDepth?: number;
     expandAll?: boolean;
+    defaultViewMode?: JsonViewerViewMode;
     searchDebounceMs?: number;
     helperText?: string;
     searchPlaceholder?: string;
@@ -20,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

@@ -30,6 +30,8 @@ function LineViewer({
   lines,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -41,7 +43,7 @@ function LineViewer({
     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"
   });
@@ -158,7 +160,12 @@ function LineViewer({
         /* @__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" ? lines : tokens.map((token, index) => {

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

@@ -1,10 +1,15 @@
 import type { JSX } from 'react';
 export type LineViewerAppearance = 'dark' | 'light';
+export type LineViewerViewMode = 'highlighted' | 'raw';
 export interface LineViewerProps {
     lines: string;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
     appearance?: LineViewerAppearance;
+    /** Initial view mode. The user can toggle it via the kebab menu; defaults to 'highlighted'. */
+    defaultViewMode?: LineViewerViewMode;
+    /** Displays all line 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,4 @@ export interface LineViewerProps {
      */
     borderless?: boolean;
 }
-export declare function LineViewer({ lines, size, appearance, storageKey, borderless, }: LineViewerProps): JSX.Element;
+export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: LineViewerProps): JSX.Element;

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

@@ -24,6 +24,8 @@ function LineViewer({
   lines,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -35,7 +37,7 @@ function LineViewer({
     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"
   });
@@ -152,7 +154,12 @@ function LineViewer({
         /* @__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" ? lines : tokens.map((token, index) => {

package/dist/components/line-viewer/LineViewer.module.css

@@ -5,9 +5,17 @@
 
   --line-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --line-indicator: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
-  --line-subfield-code: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-number) 70%);
+  --line-subfield-code: color-mix(
+    in oklab,
+    var(--color-fg-inverse) 30%,
+    var(--color-syntax-number) 70%
+  );
   --line-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
-  --line-terminator: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-boolean) 70%);
+  --line-terminator: color-mix(
+    in oklab,
+    var(--color-fg-inverse) 30%,
+    var(--color-syntax-boolean) 70%
+  );
   --line-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
   --line-continuation: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
 
@@ -57,6 +65,11 @@
   line-height: 1.35;
 }
 
+.deleted code,
+.deleted code * {
+  color: var(--color-status-error);
+}
+
 .wrap {
   white-space: pre-wrap;
   overflow-wrap: break-word;

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

@@ -31,6 +31,8 @@ function XmlViewer({
   xml,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -42,7 +44,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"
   });
@@ -159,7 +161,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

@@ -25,6 +25,8 @@ function XmlViewer({
   xml,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -36,7 +38,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"
   });
@@ -153,7 +155,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.192",
+  "version": "0.0.194",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",