@redocly/theme 0.70.0-next.2 → 0.70.0-next.4

package/src/components/Consent/ConsentBanner.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function ConsentBanner(): JSX.Element | null {
+  const { useConsent, useTranslate } = useThemeHooks();
+  const consent = useConsent();
+  const { translate } = useTranslate();
+
+  if (!consent.enabled || consent.mode !== 'opt-in' || consent.decided || consent.isDialogOpen) {
+    return null;
+  }
+
+  const title = translate('consent.title', 'We value your privacy');
+
+  return (
+    <BannerWrapper data-component-name="Consent/ConsentBanner" role="region" aria-label={title}>
+      <Title>{title}</Title>
+      <Message>
+        {translate(
+          'consent.message',
+          'By selecting "Accept all cookies", you agree to the use of cookies to improve site navigation, understand how our site is used, and support our marketing efforts. Select "Customize" to choose which types of cookies you allow.',
+        )}{' '}
+        {consent.config?.privacyPolicyUrl ? (
+          <Link to={consent.config.privacyPolicyUrl} external>
+            {translate('consent.privacyPolicy', 'Privacy policy')}
+          </Link>
+        ) : null}
+      </Message>
+      <Actions>
+        <MainActions>
+          <Button variant="outlined" onClick={consent.reject}>
+            {translate('consent.rejectAll', 'Reject all')}
+          </Button>
+          <Button variant="primary" onClick={consent.accept}>
+            {translate('consent.acceptAllCookies', 'Accept all cookies')}
+          </Button>
+        </MainActions>
+        <Button variant="text" onClick={consent.openDialog}>
+          {translate('consent.customize', 'Customize')}
+        </Button>
+      </Actions>
+    </BannerWrapper>
+  );
+}
+
+const slideUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const BannerWrapper = styled.div`
+  position: fixed;
+  left: var(--consent-banner-offset);
+  bottom: var(--consent-banner-offset);
+  z-index: var(--consent-banner-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--consent-banner-gap);
+  width: var(--consent-banner-width);
+  max-width: calc(100vw - 2 * var(--consent-banner-offset));
+  padding: var(--consent-banner-padding);
+  border: 1px solid var(--consent-banner-border-color);
+  border-radius: var(--consent-banner-border-radius);
+  background: var(--consent-banner-bg-color);
+  color: var(--consent-banner-text-color);
+  box-shadow: var(--consent-banner-box-shadow);
+  font-family: var(--font-family-base);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${slideUp} 240ms ease-out;
+  }
+`;
+
+const Title = styled.h2`
+  margin: 0;
+  font-size: var(--consent-banner-title-font-size);
+  font-weight: var(--font-weight-bold);
+`;
+
+const Message = styled.p`
+  margin: 0;
+  color: var(--text-color-secondary);
+  font-size: var(--consent-banner-font-size);
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const MainActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+`;

package/src/components/Consent/ConsentDialog.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { UseConsentResult } from '@redocly/theme/core/types';
+import type { ConsentDraft } from '@redocly/theme/core/hooks';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { Switch } from '@redocly/theme/components/Switch/Switch';
+import { useConsentDialog, useThemeHooks } from '@redocly/theme/core/hooks';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+
+const noop = () => {};
+
+export function ConsentDialog(): JSX.Element | null {
+  const { useConsent } = useThemeHooks();
+  const consent = useConsent();
+
+  if (!consent.enabled || !consent.isDialogOpen) {
+    return null;
+  }
+
+  return <ConsentDialogContent consent={consent} />;
+}
+
+function ConsentDialogContent({ consent }: { consent: UseConsentResult }): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { draft, setCategory, dialogRef, close, save, categories } = useConsentDialog(consent);
+
+  return (
+    <Portal>
+      <Overlay
+        className="scroll-lock"
+        data-component-name="Consent/ConsentDialog"
+        onMouseDown={(event) => {
+          if (event.target === event.currentTarget) close();
+        }}
+      >
+        <Dialog
+          ref={dialogRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="redocly-consent-dialog-title"
+          tabIndex={-1}
+        >
+          <TitleRow>
+            <Title id="redocly-consent-dialog-title">
+              {translate('consent.dialog.title', 'Cookie preferences')}
+            </Title>
+            <Button
+              variant="ghost"
+              size="small"
+              icon={<CloseIcon />}
+              aria-label={translate('consent.dialog.close', 'Close')}
+              onClick={close}
+            />
+          </TitleRow>
+          <Description>
+            {translate(
+              'consent.dialog.description',
+              'Choose which cookies this site may use. You can change your choice at any time.',
+            )}{' '}
+            {consent.config?.privacyPolicyUrl ? (
+              <Link to={consent.config.privacyPolicyUrl} external>
+                {translate('consent.privacyPolicy', 'Privacy policy')}
+              </Link>
+            ) : null}
+          </Description>
+          {categories.map((category) => {
+            const gpcLocked = category.id === 'marketing' && consent.gpc;
+            return (
+              <Row key={category.id}>
+                <RowText>
+                  <RowTitle>
+                    {translate(category.titleTranslationKey, category.titleDefault)}
+                  </RowTitle>
+                  <RowDescription>
+                    {translate(category.descriptionTranslationKey, category.descriptionDefault)}
+                  </RowDescription>
+                  {gpcLocked ? (
+                    <GpcNotice>
+                      {translate(
+                        'consent.gpcNotice',
+                        'Your browser asked us not to share your data, so this stays off.',
+                      )}
+                    </GpcNotice>
+                  ) : null}
+                </RowText>
+                {category.locked ? (
+                  <SwitchGroup role="group" aria-label={translate('consent.alwaysOn', 'Always on')}>
+                    <Switch value={true} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : gpcLocked ? (
+                  <SwitchGroup
+                    role="group"
+                    aria-label={translate('consent.alwaysOff', 'Always off')}
+                  >
+                    <Switch value={false} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : (
+                  <Switch
+                    value={draft[category.id as keyof ConsentDraft]}
+                    onChange={(value) => setCategory(category.id as keyof ConsentDraft, value)}
+                  />
+                )}
+              </Row>
+            );
+          })}
+          <Actions>
+            <Button variant="outlined" onClick={consent.reject}>
+              {translate('consent.rejectAll', 'Reject all')}
+            </Button>
+            <Spacer />
+            <Button variant="outlined" onClick={consent.accept}>
+              {translate('consent.acceptAll', 'Accept all')}
+            </Button>
+            <Button variant="primary" onClick={save}>
+              {translate('consent.savePreferences', 'Save preferences')}
+            </Button>
+          </Actions>
+        </Dialog>
+      </Overlay>
+    </Portal>
+  );
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color-modal-overlay);
+  font-family: var(--font-family-base);
+`;
+
+const Dialog = styled.div`
+  width: var(--consent-dialog-width);
+  max-width: var(--consent-dialog-max-width);
+  padding: var(--consent-dialog-padding);
+  border-radius: var(--consent-dialog-border-radius);
+  background: var(--consent-dialog-bg-color);
+  box-shadow: var(--consent-dialog-box-shadow);
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const Title = styled.h2`
+  margin: 0 0 var(--spacing-xs);
+  font-size: var(--font-size-lg);
+`;
+
+const Description = styled.p`
+  margin: 0 0 var(--spacing-base);
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const Row = styled.div`
+  display: flex;
+  gap: var(--spacing-base);
+  align-items: flex-start;
+  padding: var(--spacing-sm) 0;
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const RowText = styled.div`
+  flex: 1;
+`;
+
+const RowTitle = styled.div`
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+`;
+
+const RowDescription = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const GpcNotice = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const SwitchGroup = styled.div`
+  flex: none;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-base);
+  padding-top: var(--spacing-base);
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const Spacer = styled.span`
+  flex: 1;
+`;

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

@@ -156,13 +156,16 @@ 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 = (

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/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,9 +74,9 @@ 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}
@@ -78,8 +88,8 @@ 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}
@@ -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,8 +174,8 @@ 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}
     </>

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,7 +5,8 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import { collectFoldables, JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import type { JsonFold } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
@@ -33,25 +34,20 @@ function JsonComponent({
   controls = {},
   maxStringLength,
 }: JsonProps): JSX.Element {
-  const showFoldingButtons =
-    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+  const defaultExpandLevel = Math.max(1, expandLevel);
+  const foldables = React.useMemo(() => collectFoldables(data), [data]);
+  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, boolean>>({});
 
-  const [expandAllSignal, setExpandAllSignal] = React.useState<boolean | undefined>(undefined);
-
-  const expandAll = () => {
-    setExpandAllSignal(true);
-    onPanelToggle?.(true);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const fold: JsonFold = {
+    isExpanded: (path, level) => expandedPaths[path] ?? level < defaultExpandLevel,
+    setExpanded: (path, expanded) => setExpandedPaths((prev) => ({ ...prev, [path]: expanded })),
   };
+  const hasFoldables = foldables.length > 0;
+  const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
 
-  const collapseAll = () => {
-    setExpandAllSignal(false);
-    onPanelToggle?.(false);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const toggleAll = () => {
+    onPanelToggle?.(!allExpanded);
+    setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
   };
 
   const source = JSON.stringify(data, null, 2);
@@ -73,12 +69,14 @@ function JsonComponent({
                 controls: controls && {
                   ...controls,
                   copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons
-                    ? { ...controls.expand, onClick: expandAll }
-                    : undefined,
-                  collapse: showFoldingButtons
-                    ? { ...controls.collapse, onClick: collapseAll }
-                    : undefined,
+                  expand:
+                    hasFoldables && !allExpanded
+                      ? { ...controls.expand, onClick: toggleAll }
+                      : undefined,
+                  collapse:
+                    hasFoldables && allExpanded
+                      ? { ...controls.collapse, onClick: toggleAll }
+                      : undefined,
                 },
               }
             : undefined
@@ -89,9 +87,9 @@ function JsonComponent({
           <JsonValue
             value={data}
             level={0}
+            path=""
             standalone={true}
-            expandAllSignal={expandAllSignal}
-            defaultExpandLevel={Math.max(1, expandLevel)}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
         </FoldingWrap>