@dbcdk/react-components 0.0.192 → 0.0.193

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",
@@ -44,7 +45,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"
   });

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, 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",
@@ -38,7 +39,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"
   });

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;

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/package.json

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