@dbcdk/react-components 0.0.96 → 0.0.98

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -1,38 +0,0 @@
-.countAdornment {
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-right: var(--spacing-xxs);
-}
-
-.chipRow {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.chevronButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.selectedValues {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.inputWithoutStartPadding {
-  padding-inline-start: 0;
-}
-
-.typeaheadInput {
-  cursor: pointer;
-}

package/dist/components/grid/Grid.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './Grid.module.css';
-const GAP_TOKEN = {
-    none: '0',
-    xs: 'var(--spacing-xs)',
-    sm: 'var(--spacing-sm)',
-    md: 'var(--spacing-md)',
-    lg: 'var(--spacing-lg)',
-    xl: 'var(--spacing-xl)',
-};
-export function Grid({ children, gap = 'md', equalHeight = false, className, style }) {
-    return (_jsx("div", { className: [styles.grid, equalHeight && styles.equalHeight, className]
-            .filter(Boolean)
-            .join(' '), style: { gap: GAP_TOKEN[gap], ...style }, children: children }));
-}
-export function GridItem({ children, base = 12, md, lg, className, style }) {
-    return (_jsx("div", { className: [styles.item, className].filter(Boolean).join(' '), style: {
-            '--span-base': base,
-            ...(md != null ? { '--span-md': md } : {}),
-            ...(lg != null ? { '--span-lg': lg } : {}),
-            ...style,
-        }, children: children }));
-}

package/dist/components/grid/Grid.module.css

@@ -1,35 +0,0 @@
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  align-items: start;
-}
-
-.equalHeight {
-  align-items: stretch;
-}
-
-.item {
-  grid-column: span var(--span-base, 12);
-  min-inline-size: 0;
-}
-
-.equalHeight .item {
-  display: flex;
-}
-
-.equalHeight .item > * {
-  flex: 1;
-  min-inline-size: 0;
-}
-
-@media (min-width: 768px) {
-  .item {
-    grid-column: span var(--span-md, var(--span-base, 12));
-  }
-}
-
-@media (min-width: 1200px) {
-  .item {
-    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
-  }
-}

package/dist/components/headline/CollapsibleHeadline.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from 'lucide-react';
-import { useId, useState } from 'react';
-import { Headline } from './Headline';
-import styles from './Headline.module.css';
-import { Button } from '../button/Button';
-export function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size = 2, variant = 'muted', weight = 400, ...headlineProps }) {
-    const generatedId = useId();
-    const panelId = controls !== null && controls !== void 0 ? controls : generatedId;
-    const [internalExpanded, setInternalExpanded] = useState(() => {
-        if (!storageKey || typeof window === 'undefined')
-            return expanded !== null && expanded !== void 0 ? expanded : true;
-        const stored = localStorage.getItem(storageKey);
-        return stored !== null ? stored === 'true' : (expanded !== null && expanded !== void 0 ? expanded : true);
-    });
-    const isExpanded = storageKey ? internalExpanded : (expanded !== null && expanded !== void 0 ? expanded : false);
-    const handleToggle = () => {
-        if (storageKey) {
-            const next = !internalExpanded;
-            setInternalExpanded(next);
-            localStorage.setItem(storageKey, String(next));
-        }
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle();
-    };
-    return (_jsxs("div", { className: styles.collapsibleRoot, children: [_jsxs(Headline, { ...headlineProps, variant: variant, weight: weight, size: size, addition: addition, children: [header, _jsx(Button, { shape: "round", type: "button", variant: "inline", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: handleToggle, children: _jsx(ChevronDown, { "aria-hidden": true, className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : '']
-                                .filter(Boolean)
-                                .join(' ') }) })] }), isExpanded && (_jsx("div", { id: panelId, className: styles.collapsiblePanel, children: children }))] }));
-}

package/dist/components/headline/Headline.js

@@ -1,26 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Headline.module.css';
-import { SeverityBgColor } from '../../constants/severity';
-import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subheader, addition, icon, tone, variant, allowWrap = true, }) {
-    const Tag = `h${size}`;
-    const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
-        .filter(Boolean)
-        .join(' ');
-    const headlineClassName = [
-        styles.headline,
-        disableMargin ? styles.noMargin : '',
-        marker ? styles.marker : '',
-        variant === 'muted' ? styles['variant-muted'] : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx("div", { className: containerClassName, children: _jsxs("div", { className: styles.headlineBlock, children: [_jsxs("div", { className: styles.headlineRow, children: [_jsxs(Tag, { style: {
-                                '--font-weight': weight,
-                                '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                            }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition ? _jsx("div", { className: styles.addition, children: addition }) : null] }), subheader ? _jsx("div", { className: styles.subheader, children: subheader }) : null] }) }));
-}

package/dist/components/headline/Headline.module.css

@@ -1,185 +0,0 @@
-.headlineContainer {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-lg);
-  max-width: 100%;
-  min-width: 0;
-}
-
-.headlineBlock {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-width: 0;
-  gap: var(--spacing-xxs);
-}
-
-.headlineRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-lg);
-  min-width: 0;
-}
-
-/* Base headline */
-.headline {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  margin-block: var(--spacing-xs);
-
-  /* Typography */
-  font-weight: var(--font-weight, 600);
-  letter-spacing: var(--letter-spacing-tight);
-  line-height: var(--line-height-tight);
-  color: inherit;
-
-  /* Behaviour */
-  transition: color var(--transition-fast) var(--ease-standard);
-  min-width: 0; /* required for truncation inside flex */
-}
-
-/* CollapsibleHeadline wrapper */
-.collapsibleRoot {
-  display: flex;
-  flex-direction: column;
-}
-
-.collapsiblePanel {
-  display: contents;
-}
-
-/* CollapsibleHeadline toggle button */
-.toggleButton {
-  all: unset;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding: var(--spacing-2xs);
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  color: var(--color-fg-subtle);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.toggleButton:hover {
-  color: var(--color-fg-default);
-}
-
-.toggleButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.toggleChevron {
-  display: block;
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-  transition: transform var(--transition-normal) var(--ease-standard);
-}
-
-.toggleChevronExpanded {
-  transform: rotate(180deg);
-}
-
-/* Variant overrides */
-.variant-muted {
-  color: var(--color-fg-subtle);
-}
-
-/* Tone overrides */
-.tone-dark .headline {
-  color: var(--color-fg-default);
-}
-
-.tone-light .headline {
-  color: var(--color-fg-on-strong);
-}
-
-.noMargin {
-  margin: 0;
-}
-
-/* Marker variant */
-.headline.marker {
-  padding-inline-start: calc(var(--border-width-medium) + var(--spacing-sm));
-}
-
-.headline.marker::before {
-  content: '';
-  position: absolute;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  block-size: 0.75em;
-  inset-inline-start: 0;
-  inline-size: var(--border-width-medium);
-  background-color: var(--marker-color, var(--color-brand));
-  border-radius: var(--border-radius-sm);
-  pointer-events: none;
-}
-
-/* Subheader */
-.subheader {
-  font-size: var(--font-size-sm);
-  margin-block-start: calc(var(--spacing-2xs) * -1);
-  color: var(--color-fg-subtle);
-  line-height: var(--line-height-normal);
-}
-
-.addition {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  align-items: center;
-}
-
-/* Icon */
-.icon {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Text wrapper (allows shrinking inside flex layouts) */
-.text {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-/* Text behaviour */
-.truncate {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.wrap {
-  white-space: normal;
-  overflow: visible;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-}
-
-@media (max-width: 767px) {
-  .headlineRow {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-md);
-  }
-
-  .headlineContainer h1.headline {
-    font-size: var(--font-size-xl);
-  }
-
-  .headlineContainer h2.headline {
-    font-size: var(--font-size-lg);
-  }
-
-  .addition {
-    inline-size: 100%;
-  }
-}

package/dist/components/hyperlink/Hyperlink.js

@@ -1,40 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import styles from './Hyperlink.module.css';
-function cx(...parts) {
-    return parts.filter(Boolean).join(' ');
-}
-function renderInner(children, icon) {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
-}
-export function Hyperlink(props) {
-    var _a;
-    const { children, icon, className, asChild, as = 'a', variant = 'primary', inline = true, ...rest } = props;
-    const linkClassName = cx(styles.link, className, variant === 'secondary' ? styles.secondary : styles.primary, inline ? '' : styles.block);
-    if (asChild) {
-        const child = React.Children.only(children);
-        if (!React.isValidElement(child)) {
-            throw new Error('Hyperlink with asChild expects a single valid React element as its child.');
-        }
-        const childProps = (_a = child.props) !== null && _a !== void 0 ? _a : {};
-        return React.cloneElement(child, {
-            ...childProps,
-            ...rest,
-            className: cx(childProps.className, linkClassName),
-            children: renderInner(childProps.children, icon),
-            onClick: (e) => {
-                e.stopPropagation();
-                if (childProps.onClick) {
-                    childProps.onClick(e);
-                }
-            },
-        });
-    }
-    if (as === 'button') {
-        // (Optional) guardrail: avoid accidentally passing href to a button
-        // const { href, ...buttonRest } = rest as any
-        return (_jsx("button", { type: "button", className: linkClassName, ...rest, children: renderInner(children, icon) }));
-    }
-    return (_jsx("a", { onClick: e => e.stopPropagation(), className: linkClassName, ...rest, children: renderInner(children, icon) }));
-}

package/dist/components/hyperlink/Hyperlink.module.css

@@ -1,107 +0,0 @@
-.link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  position: relative;
-  background: none;
-  border: none;
-  padding: 0;
-  text-decoration: none;
-  font-size: inherit;
-  font-family: inherit;
-  cursor: pointer;
-  color: var(--color-brand);
-  line-height: inherit;
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    transform 60ms ease,
-    opacity 60ms ease,
-    background-color var(--transition-fast) var(--ease-standard);
-}
-
-.link.secondary {
-  color: var(--color-fg-default);
-}
-
-.link:hover {
-  color: var(--color-brand);
-}
-
-.link.primary {
-  position: relative;
-  color: var(--color-brand);
-  text-decoration: none;
-}
-
-.link.block {
-  background: var(--color-bg-contextual-subtle);
-  display: inline-block;
-  padding: var(--spacing-xs);
-  &:hover {
-    background-color: var(--color-bg-contextual);
-  }
-}
-
-.link {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-}
-
-.link {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-}
-
-.content {
-  display: inline-flex;
-  align-items: center;
-}
-
-.link::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 1px;
-  height: 1px;
-  background-color: currentColor;
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 100ms ease;
-}
-
-.link:hover::after {
-  transform: scaleX(1);
-}
-
-.link:active {
-  color: var(--color-link-hover);
-}
-
-.link:active::after {
-  transform: scaleX(1);
-}
-
-.link.block:active {
-  background-color: var(--color-bg-contextual);
-}
-
-.link:focus-visible {
-  outline: 2px solid var(--color-brand);
-  outline-offset: 2px;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-brand);
-}
-
-.link svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}

package/dist/components/icon/Icon.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Building2, CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
-import styles from './Icon.module.css';
-export const SeverityIcon = {
-    neutral: _jsx(CircleCheck, {}),
-    success: _jsx(CircleCheck, {}),
-    error: _jsx(CircleX, {}),
-    info: _jsx(Info, {}),
-    warning: _jsx(CircleAlert, {}),
-    brand: _jsx(Building2, {}),
-};
-export function Icon({ severity, label, customIcon }) {
-    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ''} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }), label && _jsx("span", { children: label })] }));
-}

package/dist/components/icon/Icon.module.css

@@ -1,36 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: var(--spacing-xxs);
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-sm);
-}
-
-.icon {
-  display: flex;
-}
-
-.icon svg {
-  height: var(--icon-size-md);
-}
-
-.success {
-  color: var(--color-status-success);
-}
-
-.error {
-  color: var(--color-status-error);
-}
-
-.warning {
-  color: var(--color-status-warning);
-}
-
-.info {
-  color: var(--color-status-info);
-}
-
-.brand {
-  color: var(--color-fg-on-brand);
-}

package/dist/components/interval-select/IntervalSelect.js

@@ -1,99 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Button } from '../../components/button/Button';
-import { ClearButton } from '../../components/clear-button/ClearButton';
-import { InputContainer } from '../../components/forms/input-container/InputContainer';
-import { Menu } from '../../components/menu/Menu';
-import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
-import { Popover } from '../../components/popover/Popover';
-import { isoFromLocalDate } from '../datetime-picker/dateTimeHelpers';
-export function IntervalSelect({ 
-// InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
-// tooltip
-tooltip, tooltipPlacement = 'right', 
-// IntervalSelect props
-id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, disabled, }) {
-    const generatedId = useId();
-    const controlId = id !== null && id !== void 0 ? id : `interval-select-${generatedId}`;
-    const describedById = `${controlId}-desc`;
-    const listboxId = `${controlId}-listbox`;
-    const popoverRef = useRef(null);
-    const optionRefs = useRef([]);
-    const selectedIndex = useMemo(() => options.findIndex(o => o.minutesAgo === selectedValue), [options, selectedValue]);
-    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
-    // Focus active option when opened (simple version: always focus when index changes)
-    useEffect(() => {
-        var _a;
-        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex]);
-    const selected = useMemo(() => { var _a; return (_a = options.find(o => o.minutesAgo === selectedValue)) !== null && _a !== void 0 ? _a : null; }, [options, selectedValue]);
-    const tooltipEnabled = Boolean(tooltip);
-    const { triggerProps, id: tooltipId } = useTooltipTrigger({
-        content: tooltipEnabled ? tooltip : null,
-        placement: tooltipPlacement,
-        offset: 8,
-    });
-    const describedBy = (() => {
-        const ids = [];
-        if (error || helpText)
-            ids.push(describedById);
-        if (tooltipEnabled)
-            ids.push(tooltipId);
-        return ids.length ? ids.join(' ') : undefined;
-    })();
-    const handleCommit = (opt) => {
-        var _a;
-        const base = baseDate !== null && baseDate !== void 0 ? baseDate : new Date();
-        const dateLocal = new Date(base.getTime() - opt.minutesAgo * 60000);
-        const isoUtc = isoFromLocalDate(dateLocal);
-        onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
-        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-    };
-    const handleKeyDown = (e) => {
-        var _a;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                setActiveIndex(i => Math.min(i + 1, options.length - 1));
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setActiveIndex(i => Math.max(i - 1, 0));
-                break;
-            case 'Home':
-                e.preventDefault();
-                setActiveIndex(0);
-                break;
-            case 'End':
-                e.preventDefault();
-                setActiveIndex(options.length - 1);
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (options[activeIndex])
-                    handleCommit(options[activeIndex]);
-                break;
-            case 'Escape':
-                e.preventDefault();
-                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                break;
-        }
-    };
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, contentId: listboxId, trigger: (onClick, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
-                        // Reset active to selected when opening
-                        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-                        onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-                        const isSelected = opt.minutesAgo === selectedValue;
-                        const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, selected: isSelected, 
-                            // IMPORTANT: listbox uses role="option"
-                            itemRole: "option", children: _jsxs("button", { ref: el => {
-                                    optionRefs.current[index] = el;
-                                }, type: "button", tabIndex: isActive ? 0 : -1, "aria-selected": isSelected, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
-                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
-}

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

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { getHighlightedSegments } from '../../utils/text/get-highlighted-segments';
-export function HighlightedText({ text, query }) {
-    return getHighlightedSegments(text, query).map((segment, index) => segment.matched ? (_jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`)) : (_jsx(Fragment, { children: segment.text }, `${segment.text}-${index}`)));
-}

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

@@ -1,30 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, ChevronDown, ChevronRight, Copy } from 'lucide-react';
-import { capitalize, formatPrimitive, getNodeId, getPathLabel, getPrimitiveRawValue, getSummary, getValueType, isJsonArray, isJsonObject, } from './utils';
-import { HighlightedText } from './HighlightedText';
-import styles from './JsonViewer.module.css';
-export function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, copiedId, onCopy, }) {
-    const nodeId = getNodeId(path);
-    const nodeType = getValueType(value);
-    const match = matches.get(nodeId);
-    const shouldRender = query ? Boolean(match) : true;
-    const forceOpen = query ? Boolean(match === null || match === void 0 ? void 0 : match.descendant) : false;
-    if (!shouldRender)
-        return null;
-    if (nodeType !== 'array' && nodeType !== 'object') {
-        const primitive = value;
-        const valueLabel = formatPrimitive(primitive);
-        const rawValue = getPrimitiveRawValue(primitive);
-        const copied = copiedId === nodeId;
-        return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.valueButton, onClick: () => onCopy(nodeId, rawValue), title: copied ? 'Kopieret' : 'Kopiér værdi', children: [_jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightedText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: [styles.value, styles[`value${capitalize(nodeType)}`]].join(' '), children: _jsx(HighlightedText, { text: valueLabel, query: query }) })] }), _jsxs("span", { className: styles.copyState, "aria-live": "polite", children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), _jsx("span", { children: copied ? 'Kopieret' : 'Kopiér' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightedText, { text: getPathLabel(path), query: query }) })) : null] }));
-    }
-    const entries = isJsonArray(value)
-        ? value.map((item, index) => [String(index), item])
-        : isJsonObject(value)
-            ? Object.entries(value)
-            : [];
-    const summary = getSummary(value);
-    const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
-    return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.toggle, onClick: () => onToggleNode(nodeId), "aria-expanded": expanded, children: [expanded ? _jsx(ChevronDown, { "aria-hidden": "true" }) : _jsx(ChevronRight, { "aria-hidden": "true" }), _jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightedText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? '[' : '{' }), _jsx("span", { className: styles.summary, children: _jsx(HighlightedText, { text: summary, query: query }) }), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? ']' : '}' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightedText, { text: getPathLabel(path), query: query }) })) : null, expanded ? (_jsx("div", { className: styles.children, role: depth === 0 ? 'group' : undefined, children: entries.map(([childKey, childValue]) => (_jsx(JsonNode, { keyName: isJsonArray(value) ? `[${childKey}]` : childKey, path: [...path, childKey], value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, query: query, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: onToggleNode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
-}