@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/Consent/ConsentSettingsLink.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { resolveSettingsLinkPlacement } from '@redocly/theme/core/utils';
+
+export function ConsentSettingsLink(): JSX.Element | null {
+  const { useConsent, useTranslate } = useThemeHooks();
+  const { consent: consentConfig, footer } = useThemeConfig() || {};
+  const consent = useConsent();
+  const { translate } = useTranslate();
+
+  if (!consent.enabled || resolveSettingsLinkPlacement(consentConfig, footer) !== 'footer') {
+    return null;
+  }
+
+  return (
+    <SettingsLinkButton
+      variant="link"
+      size="small"
+      data-component-name="Consent/ConsentSettingsLink"
+      onClick={consent.openDialog}
+    >
+      {translate('consent.settingsLink', 'Cookie preferences')}
+    </SettingsLinkButton>
+  );
+}
+
+const SettingsLinkButton = styled(Button)`
+  margin: var(--footer-link-padding-vertical) 0 var(--footer-link-padding-vertical) var(--spacing-sm);
+  padding: 0;
+  color: var(--footer-link-text-color);
+  font: inherit;
+  line-height: inherit;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--footer-link-color-hover);
+    background: none;
+  }
+`;

package/src/components/Consent/variables.ts

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export const consent = css`
+  /**
+  * @tokens Consent
+  */
+  --consent-banner-width: 380px;
+  --consent-banner-offset: var(--spacing-base); // @presenter Spacing
+  --consent-banner-bg-color: var(--bg-color); // @presenter Color
+  --consent-banner-text-color: var(--text-color-primary); // @presenter Color
+  --consent-banner-border-color: var(--border-color-primary); // @presenter Color
+  --consent-banner-border-radius: var(--border-radius-lg);
+  --consent-banner-box-shadow: var(--bg-raised-shadow);
+  --consent-banner-padding: var(--spacing-base); // @presenter Spacing
+  --consent-banner-gap: var(--spacing-sm); // @presenter Spacing
+  --consent-banner-title-font-size: var(--font-size-base);
+  --consent-banner-font-size: var(--font-size-sm);
+  --consent-banner-z-index: var(--z-index-overlay);
+
+  --consent-dialog-width: 560px;
+  --consent-dialog-max-width: calc(100vw - 2 * var(--spacing-base));
+  --consent-dialog-padding: var(--spacing-lg); // @presenter Spacing
+  --consent-dialog-border-radius: var(--border-radius-lg);
+  --consent-dialog-bg-color: var(--modal-bg-color); // @presenter Color
+  --consent-dialog-box-shadow: var(--modal-box-shadow);
+  --consent-dialog-row-border-color: var(--border-color-primary); // @presenter Color
+  --consent-dialog-description-color: var(--text-color-secondary); // @presenter Color
+`;

package/src/components/Dropdown/Dropdown.tsx

@@ -11,9 +11,10 @@ import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 
 import type { CSSProperties, ReactElement } from 'react';
-import type { RenderableChildren } from '@redocly/theme/core/types';
+import type { DropdownAlignment, RenderableChildren } from '@redocly/theme/core/types';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
+import { fitDropdownAlignment } from '@redocly/theme/core/utils';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 
@@ -37,7 +38,7 @@ export type DropdownProps = {
   children: RenderableChildren<DropdownMenuContext>;
   triggerEvent?: 'click' | 'hover';
   placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
+  alignment?: DropdownAlignment;
 
   active?: boolean;
   closeOnClick?: boolean;
@@ -46,6 +47,8 @@ export type DropdownProps = {
   className?: string;
   withArrow?: boolean;
   portalled?: boolean;
+  /** Element the menu lines up with when it is not the dropdown itself, e.g. a whole split button. */
+  alignmentAnchorRef?: React.RefObject<HTMLElement | null>;
 
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
@@ -66,6 +69,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       placement,
       alignment,
       portalled = false,
+      alignmentAnchorRef,
       onClick,
       onClose,
       onOpen,
@@ -76,6 +80,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const menuRef = useRef<HTMLDivElement | null>(null);
     const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
     const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+    const [fittedAlignment, setFittedAlignment] = useState(alignment);
 
     const wrapperRef = (ref as React.RefObject<HTMLDivElement | null>) || dropdownRef;
 
@@ -115,7 +120,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const updateMenuPosition = useCallback(() => {
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
-      const rect = wrapper.getBoundingClientRect();
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
       const menuHeight = menuRef.current?.offsetHeight ?? 0;
       const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
       const fitsAbove = rect.top - menuHeight >= 0;
@@ -126,7 +131,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       } else {
         style.top = rect.bottom;
       }
-      if (alignment === 'end') {
+      if (fitDropdownAlignment(rect, menuRef.current?.offsetWidth ?? 0, alignment) === 'end') {
         style.right = window.innerWidth - rect.right;
       } else {
         style.left = rect.left;
@@ -136,7 +141,24 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         style.zIndex = zIndex;
       }
       setMenuStyle(style);
-    }, [placement, alignment, wrapperRef]);
+    }, [placement, alignment, wrapperRef, alignmentAnchorRef]);
+
+    /* The absolute-positioned menu is placed by CSS, so the side is measured once it is
+       shown and again on resize; a side that runs off the viewport flips to the other one. */
+    const updateFittedAlignment = useCallback(() => {
+      const wrapper = wrapperRef.current;
+      const menu = menuRef.current;
+      if (!wrapper || !menu) return;
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
+      setFittedAlignment(fitDropdownAlignment(rect, menu.offsetWidth, alignment));
+    }, [alignment, wrapperRef, alignmentAnchorRef]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (portalled || !isOpen) return;
+      updateFittedAlignment();
+      window.addEventListener('resize', updateFittedAlignment);
+      return () => window.removeEventListener('resize', updateFittedAlignment);
+    }, [portalled, isOpen, updateFittedAlignment]);
 
     useIsomorphicLayoutEffect(() => {
       if (!portalled || !isOpen) return;
@@ -156,20 +178,23 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
 
+    const isLinkTrigger = Boolean(triggerChild.props?.to || triggerChild.props?.href);
+
     const dropdownTrigger = cloneElement(triggerChild, {
       onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      'aria-haspopup': 'menu',
       'aria-expanded': isOpen,
       icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
       ...(withArrow ? { iconPosition: 'right' } : {}),
       ...triggerChild.props,
-      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+      onKeyDown: triggerEvent === 'click' || !isLinkTrigger ? handleKeyDown : undefined,
     });
 
     const menu = (
       <ChildrenWrapper
         ref={menuRef}
         $placement={placement}
-        $alignment={alignment}
+        $alignment={fittedAlignment}
         $isOpen={isOpen}
         $portalled={portalled}
         style={portalled ? menuStyle : undefined}

package/src/components/Dropdown/DropdownMenu.tsx

@@ -6,7 +6,12 @@ import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/D
 
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
-export type DropdownMenuProps = { className?: string; role?: string; footer?: React.ReactNode } & (
+export type DropdownMenuProps = {
+  id?: string;
+  className?: string;
+  role?: string;
+  footer?: React.ReactNode;
+} & (
   | {
       items: DropdownMenuItemProps[];
     }
@@ -32,6 +37,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <DropdownMenuWrapper
       data-component-name="Dropdown/DropdownMenu"
       data-testid="dropdown-menu"
+      id={props.id}
       className={props.className}
       role={props.role || 'menu'}
     >

package/src/components/Feedback/Reasons.tsx

@@ -18,6 +18,7 @@ export type ReasonsProps = {
 export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.Element | null {
   const { label, component = 'checkbox', items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+  const idPrefix = React.useId();
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -51,6 +52,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
       {items.map((reason, idx) => (
         <OptionWrapper key={reason}>
           <input
+            id={`${idPrefix}-${idx}`}
             type={component}
             value={reason}
             checked={checkedState[idx]}
@@ -59,8 +61,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
           />
           <label
             data-translation-key={`feedback.settings.reasons.items.${idx + 1}`}
-            id={reason}
-            onClick={() => handleOptionChange(idx)}
+            htmlFor={`${idPrefix}-${idx}`}
           >
             {translate(`feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -30,26 +30,24 @@ export function FilterCheckboxes({
       <FilterOptions>
         {(filter.filteredOptions || filter.options).map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
+          const checked =
+            filter.selectedOptions instanceof Set
+              ? filter.selectedOptions.has(value) ||
+                filter.selectedOptions.has(value?.toLowerCase())
+              : false;
           return (
-            <FilterCheckboxOption
-              key={id}
-              role="link"
-              onClick={() => {
-                filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([
-                  getBaseDataAttributes('filterId', 'checkbox'),
-                ]);
-              }}
-            >
-              <CheckboxIcon
-                checked={
-                  filter.selectedOptions instanceof Set
-                    ? filter.selectedOptions.has(value) ||
-                      filter.selectedOptions.has(value?.toLowerCase())
-                    : false
-                }
-              />
+            <FilterCheckboxOption key={id}>
+              <CheckboxIcon checked={checked} />
               <FilterOptionLabel data-translation-key={value}>
+                <FilterCheckboxInput
+                  checked={checked}
+                  onChange={() => {
+                    filter.toggleOption(value);
+                    telemetry.sendFilterCheckboxToggledMessage([
+                      getBaseDataAttributes('filterId', 'checkbox'),
+                    ]);
+                  }}
+                />
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>
               {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -63,6 +61,23 @@ export function FilterCheckboxes({
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterCheckboxesWrapper = styled.div`

package/src/components/Filter/FilterDateRange.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -11,6 +11,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
 
 export function FilterDateRange({ filter }: FilterProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -33,7 +34,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
               monthPlaceholder="MM"
               yearPlaceholder="YYYY"
               value={from}
-              maxDate={new Date()}
+              maxDate={today}
               onChange={(from) => {
                 if (Array.isArray(from)) return;
                 filter.selectOption({

package/src/components/Footer/Footer.tsx

@@ -9,6 +9,7 @@ import { breakpoints, isEmptyArray } from '@redocly/theme/core/utils';
 import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { FooterCopyright } from '@redocly/theme/components/Footer/FooterCopyright';
 import { FooterColumn } from '@redocly/theme/components/Footer/FooterColumn';
+import { ConsentSettingsLink } from '@redocly/theme/components/Consent/ConsentSettingsLink';
 
 export type FooterProps = {
   className?: string;
@@ -43,6 +44,7 @@ export function Footer({ className }: FooterProps): JSX.Element | null {
       )}
       <FooterCopyrightWrapper>
         {copyrightText && <FooterCopyright copyrightText={copyrightText} />}
+        <ConsentSettingsLink />
       </FooterCopyrightWrapper>
     </FooterWrapper>
   );

package/src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { KeyboardEvent, JSX } from 'react';
+import type { KeyboardEvent, JSX, MouseEvent } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
 import { useModalScrollLock } from '@redocly/theme/core/hooks';
@@ -42,6 +42,7 @@ export function Image(props: ImageProps): JSX.Element {
   } = props;
 
   const lightboxContainerRef = useRef<HTMLDivElement>(null);
+  const lightboxTriggerRef = useRef<HTMLElement | null>(null);
   const [lightboxImage, setLightboxImage] = useState<string | undefined>(undefined);
   const parsedSourceSetMap = useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
@@ -55,15 +56,32 @@ export function Image(props: ImageProps): JSX.Element {
   }, []);
 
   const handleImageClick = useCallback(
-    (src: string) => {
+    (src: string, trigger: HTMLElement) => {
       if (!withLightbox || lightboxImage) {
         return;
       }
+      lightboxTriggerRef.current = trigger;
       setLightboxImage(src);
     },
     [withLightbox, lightboxImage],
   );
 
+  const getLightboxTriggerProps = (imageSrc: string) =>
+    withLightbox
+      ? {
+          role: 'button',
+          tabIndex: 0,
+          'aria-label': alt ? undefined : 'Open image',
+          onClick: (e: MouseEvent<HTMLElement>) => handleImageClick(imageSrc, e.currentTarget),
+          onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(imageSrc, e.currentTarget);
+            }
+          },
+        }
+      : {};
+
   const handleCloseLightbox = useCallback(() => {
     setLightboxImage(undefined);
   }, []);
@@ -72,6 +90,9 @@ export function Image(props: ImageProps): JSX.Element {
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();
+    } else {
+      lightboxTriggerRef.current?.focus();
+      lightboxTriggerRef.current = null;
     }
   }, [lightboxImage]);
 
@@ -92,7 +113,7 @@ export function Image(props: ImageProps): JSX.Element {
       width={width}
       height={height}
       style={combinedStyles}
-      onClick={() => handleImageClick(src)}
+      {...getLightboxTriggerProps(src)}
     />
   ) : (
     Array.from(parsedSourceSetMap).map(([key, value]) => (
@@ -106,7 +127,7 @@ export function Image(props: ImageProps): JSX.Element {
         height={height}
         $withLightbox={withLightbox}
         style={combinedStyles}
-        onClick={() => handleImageClick(value)}
+        {...getLightboxTriggerProps(value)}
       />
     ))
   );
@@ -122,7 +143,7 @@ export function Image(props: ImageProps): JSX.Element {
           src={galleryImageSrc}
           alt={alt}
           style={withLightbox ? { cursor: 'pointer' } : undefined}
-          onClick={() => handleImageClick(galleryImageSrc)}
+          {...getLightboxTriggerProps(galleryImageSrc)}
         />
       ))}
     </GalleryRow>

package/src/components/JsonViewer/Helpers.tsx

@@ -7,40 +7,50 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ShowMoreToggleButton } from '@redocly/theme/components/Button/ShowMoreToggleButton';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
+export type JsonFold = {
+  isExpanded: (path: string, level: number) => boolean;
+  setExpanded: (path: string, expanded: boolean) => void;
+};
+
+type Foldable = [path: string, level: number];
+
+export function isFoldable(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    Object.values(value).some((item) => item !== undefined)
+  );
+}
+
+export function collectFoldables(value: unknown, path = '', level = 1): Foldable[] {
+  if (!isFoldable(value)) return [];
+  return Object.entries(value).flatMap(([key, child]): Foldable[] => {
+    const childPath = `${path}/${key}`;
+    return isFoldable(child)
+      ? [[childPath, level], ...collectFoldables(child, childPath, level + 1)]
+      : [];
+  });
+}
+
 export function JsonValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
+  path: string;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
+  const { standalone, fold, level, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-  const [prevLevel, setPrevLevel] = React.useState(level);
-
-  if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
-    setPrevExpandAllSignal(expandAllSignal);
-    setPrevLevel(level);
-    if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const keys: string[] =
     (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
 
   const valueType = typeof value;
-  const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
 
-  if (isPrimitive) {
+  if (!isFoldable(value)) {
     const isOversizedString =
       typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
     return (
@@ -64,12 +74,12 @@ export function JsonValue(props: {
           <JsonValue
             value={item}
             level={level + 1}
+            path={`${path}/${index}`}
             standalone={true}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
-          {index < value.length - 1 ? ',\n' : null}
+          {index < value.length - 1 ? <span>{',\n'}</span> : null}
         </React.Fragment>
       ))
     : keys.map((key, index) => (
@@ -78,11 +88,11 @@ export function JsonValue(props: {
             name={key}
             value={value[key]}
             level={level + 1}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={`${path}/${key}`}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
-          {index < keys.length - 1 ? ',\n' : null}
+          {index < keys.length - 1 ? <span>{',\n'}</span> : null}
         </React.Fragment>
       ));
 
@@ -90,7 +100,7 @@ export function JsonValue(props: {
     <>
       {indent}
       {level > 0 ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
       {openingPunctuation}
       {isExpanded ? '\n' : null}
@@ -119,33 +129,18 @@ function JsonKeyValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  path: string;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
+  const { fold, level, name, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-  const keys: string[] =
-    (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
-
-  const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-
-  if (prevExpandAllSignal !== expandAllSignal) {
-    setPrevExpandAllSignal(expandAllSignal);
-    if (expandAllSignal !== undefined) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const openingPunctuation = Array.isArray(value) ? '[' : '{';
   const closingPunctuation = Array.isArray(value) ? ']' : '}';
 
-  const valueElement = isCollapsible ? (
+  const valueElement = isFoldable(value) ? (
     <>
       {openingPunctuation}
       {isExpanded ? (
@@ -154,8 +149,8 @@ function JsonKeyValue(props: {
           <JsonValue
             value={value}
             level={level}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={path}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {'\n'}
@@ -170,8 +165,8 @@ function JsonKeyValue(props: {
     <JsonValue
       value={value}
       level={level}
-      defaultExpandLevel={defaultExpandLevel}
-      expandAllSignal={expandAllSignal}
+      path={path}
+      fold={fold}
       maxStringLength={maxStringLength}
     />
   );
@@ -179,10 +174,12 @@ function JsonKeyValue(props: {
   return (
     <>
       {indent}
-      {isCollapsible ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+      {isFoldable(value) ? (
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
-      <span className="property token string">{`"${name}"`}</span>: {valueElement}
+      <span className="property token string">{`"${name}"`}</span>
+      <span>{': '}</span>
+      {valueElement}
     </>
   );
 }