docusaurus-plugin-generate-schema-docs 1.6.0 → 1.7.1

package/__tests__/syncGtm.test.js

@@ -0,0 +1,346 @@
+/* eslint-env jest */
+/**
+ * @jest-environment node
+ */
+const fs = require('fs');
+const path = require('path');
+const gtmScript = require('../scripts/sync-gtm');
+const { execSync } = require('child_process');
+const RefParser = require('@apidevtools/json-schema-ref-parser');
+
+jest.mock('fs');
+jest.mock('child_process');
+jest.mock('@apidevtools/json-schema-ref-parser');
+
+describe('parseArgs', () => {
+  it('should parse --quiet, --json, and --skip-array-sub-properties flags', () => {
+    const argv = [
+      'node',
+      'script.js',
+      '--quiet',
+      '--json',
+      '--skip-array-sub-properties',
+    ];
+    const { isQuiet, isJson, skipArraySubProperties } =
+      gtmScript.parseArgs(argv);
+    expect(isQuiet).toBe(true);
+    expect(isJson).toBe(true);
+    expect(skipArraySubProperties).toBe(true);
+  });
+
+  it('should parse --path argument', () => {
+    const argv = ['node', 'script.js', '--path=./my-demo'];
+    const { siteDir } = gtmScript.parseArgs(argv);
+    expect(siteDir).toBe('./my-demo');
+  });
+
+  it('should default siteDir to .', () => {
+    const argv = ['node', 'script.js'];
+    const { siteDir } = gtmScript.parseArgs(argv);
+    expect(siteDir).toBe('.');
+  });
+});
+
+describe('getLatestSchemaPath', () => {
+  const SITE_DIR = '/fake/site';
+  const SCHEMAS_BASE_PATH = path.join(SITE_DIR, 'static', 'schemas');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return path to latest version when versions.json exists', () => {
+    fs.existsSync.mockImplementation(
+      (p) => p === path.join(SITE_DIR, 'versions.json'),
+    );
+    fs.readFileSync.mockReturnValue('["1.2.0", "1.1.1"]');
+    const result = gtmScript.getLatestSchemaPath(SITE_DIR);
+    expect(result).toBe(path.join(SCHEMAS_BASE_PATH, '1.2.0'));
+  });
+
+  it('should return path to "next" when versions.json does not exist', () => {
+    const nextPath = path.join(SCHEMAS_BASE_PATH, 'next');
+    fs.existsSync.mockImplementation((p) => p === nextPath);
+    const result = gtmScript.getLatestSchemaPath(SITE_DIR);
+    expect(result).toBe(nextPath);
+  });
+
+  it('should return base schemas path as fallback', () => {
+    fs.existsSync.mockReturnValue(false);
+    const result = gtmScript.getLatestSchemaPath(SITE_DIR);
+    expect(result).toBe(SCHEMAS_BASE_PATH);
+  });
+});
+
+describe('getVariablesFromSchemas', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  const SCHEMA_PATH = '/fake/schemas';
+  const mockFiles = {
+    [SCHEMA_PATH]: ['complex-event.json', 'components'],
+    [path.join(SCHEMA_PATH, 'components')]: ['address.json'],
+  };
+  const addressSchema = {
+    title: 'Address',
+    type: 'object',
+    properties: {
+      street: { type: 'string', description: 'Street name.' },
+      city: { type: 'string', description: 'City name.' },
+    },
+  };
+  const complexEventSchema = {
+    title: 'Complex Event',
+    type: 'object',
+    properties: {
+      $schema: { type: 'string', description: 'Should now be included.' },
+      event: { type: 'string', const: 'user_update' },
+      user_data: {
+        type: 'object',
+        properties: {
+          user_id: { type: 'string', description: 'The user ID.' },
+          addresses: {
+            type: 'array',
+            description: 'List of addresses.',
+            items: { $ref: './components/address.json' },
+          },
+        },
+      },
+      timestamp: { type: 'number', description: 'Event timestamp.' },
+    },
+  };
+  const mockFileContents = {
+    [path.join(SCHEMA_PATH, 'complex-event.json')]:
+      JSON.stringify(complexEventSchema),
+    [path.join(SCHEMA_PATH, 'components', 'address.json')]:
+      JSON.stringify(addressSchema),
+  };
+
+  beforeEach(() => {
+    fs.readdirSync.mockImplementation((p) => mockFiles[p] || []);
+    fs.statSync.mockImplementation((p) => ({
+      isDirectory: () => !!mockFiles[p],
+    }));
+    fs.readFileSync.mockImplementation((p) => mockFileContents[p] || '');
+    fs.existsSync.mockImplementation(
+      (p) => !!mockFiles[p] || !!mockFileContents[p],
+    );
+    RefParser.bundle.mockClear();
+  });
+
+  it('should find all top-level variables, including $schema', async () => {
+    const bundledSchema = JSON.parse(JSON.stringify(complexEventSchema));
+    bundledSchema.properties.user_data.properties.addresses.items =
+      addressSchema;
+    RefParser.bundle.mockResolvedValue(bundledSchema);
+
+    const result = await gtmScript.getVariablesFromSchemas(SCHEMA_PATH, {});
+
+    const expected = expect.arrayContaining([
+      expect.objectContaining({ name: '$schema' }),
+      expect.objectContaining({ name: 'event' }),
+      expect.objectContaining({ name: 'user_data' }),
+      expect.objectContaining({ name: 'user_data.user_id' }),
+      expect.objectContaining({ name: 'user_data.addresses' }),
+      expect.objectContaining({ name: 'user_data.addresses.0.street' }),
+      expect.objectContaining({ name: 'user_data.addresses.0.city' }),
+      expect.objectContaining({ name: 'timestamp' }),
+    ]);
+
+    expect(result.length).toBe(8);
+    expect(result).toEqual(expected);
+  });
+
+  it('should skip array sub-properties when skipArraySubProperties is true', async () => {
+    const bundledSchema = JSON.parse(JSON.stringify(complexEventSchema));
+    bundledSchema.properties.user_data.properties.addresses.items =
+      addressSchema;
+    RefParser.bundle.mockResolvedValue(bundledSchema);
+
+    const result = await gtmScript.getVariablesFromSchemas(SCHEMA_PATH, {
+      skipArraySubProperties: true,
+    });
+
+    const expected = [
+      '$schema',
+      'event',
+      'user_data',
+      'user_data.user_id',
+      'user_data.addresses',
+      'timestamp',
+    ];
+
+    expect(result.map((r) => r.name)).toEqual(expect.arrayContaining(expected));
+    expect(result.length).toBe(expected.length);
+  });
+});
+
+describe('GTM Synchronization Logic', () => {
+  const schemaVariables = [
+    { name: '$schema', description: 'The schema version.' },
+    { name: 'event', description: 'The event name.' },
+    { name: 'user_id', description: 'The user ID.' },
+  ];
+  const gtmVariables = [
+    {
+      name: 'DLV - event',
+      variableId: '1',
+      type: 'v',
+      parameter: [{ key: 'name', value: 'event' }],
+    },
+    {
+      name: 'DLV - old_variable',
+      variableId: '123',
+      type: 'v',
+      parameter: [{ key: 'name', value: 'old_variable' }],
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('getVariablesToCreate', () => {
+    it('should return variables that are in schema but not in GTM', () => {
+      const toCreate = gtmScript.getVariablesToCreate(
+        schemaVariables,
+        gtmVariables,
+      );
+      expect(toCreate).toEqual([
+        { name: '$schema', description: 'The schema version.' },
+        { name: 'user_id', description: 'The user ID.' },
+      ]);
+    });
+  });
+
+  describe('getVariablesToDelete', () => {
+    it('should return variables that are in GTM but not in schema', () => {
+      const toDelete = gtmScript.getVariablesToDelete(
+        schemaVariables,
+        gtmVariables,
+      );
+      expect(toDelete).toEqual([
+        {
+          name: 'DLV - old_variable',
+          variableId: '123',
+          type: 'v',
+          parameter: [{ key: 'name', value: 'old_variable' }],
+        },
+      ]);
+    });
+  });
+
+  describe('createGtmVariables', () => {
+    it('should call execSync to create variables and return their names', () => {
+      const toCreate = gtmScript.getVariablesToCreate(
+        schemaVariables,
+        gtmVariables,
+      );
+      const created = gtmScript.createGtmVariables(toCreate);
+      expect(execSync).toHaveBeenCalledTimes(2);
+
+      const schemaVarConfig = JSON.stringify({
+        notes: "References the '$schema' property. The schema version.",
+        parameter: [
+          { type: 'INTEGER', key: 'dataLayerVersion', value: '2' },
+          { type: 'BOOLEAN', key: 'setDefaultValue', value: 'false' },
+          { type: 'TEMPLATE', key: 'name', value: '$schema' },
+        ],
+      });
+      expect(execSync).toHaveBeenCalledWith(
+        `gtm variables create --name "DLV - \\$schema" --type v --config '${schemaVarConfig}' --quiet`,
+        { stdio: 'inherit' },
+      );
+
+      const userIdVarConfig = JSON.stringify({
+        notes: 'The user ID.',
+        parameter: [
+          { type: 'INTEGER', key: 'dataLayerVersion', value: '2' },
+          { type: 'BOOLEAN', key: 'setDefaultValue', value: 'false' },
+          { type: 'TEMPLATE', key: 'name', value: 'user_id' },
+        ],
+      });
+      expect(execSync).toHaveBeenCalledWith(
+        `gtm variables create --name "DLV - user_id" --type v --config '${userIdVarConfig}' --quiet`,
+        { stdio: 'inherit' },
+      );
+      expect(created).toEqual(['$schema', 'user_id']);
+    });
+  });
+
+  describe('deleteGtmVariables', () => {
+    it('should call execSync to delete variables and return their names', () => {
+      const toDelete = gtmScript.getVariablesToDelete(
+        schemaVariables,
+        gtmVariables,
+      );
+      const deleted = gtmScript.deleteGtmVariables(toDelete);
+      expect(execSync).toHaveBeenCalledTimes(1);
+      expect(execSync).toHaveBeenCalledWith(
+        'gtm variables delete --variable-id 123 --force --quiet',
+        { stdio: 'inherit' },
+      );
+      expect(deleted).toEqual(['old_variable']);
+    });
+  });
+});
+
+describe('main function', () => {
+  let mockDeps;
+  let logSpy;
+
+  beforeEach(() => {
+    logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    fs.existsSync.mockReturnValue(true);
+    mockDeps = {
+      setupGtmWorkspace: jest.fn().mockResolvedValue({
+        workspaceName: 'test-workspace',
+        workspaceId: '123',
+      }),
+      syncGtmVariables: jest.fn().mockResolvedValue({
+        created: ['var1'],
+        deleted: ['var2'],
+        inSync: ['var3'],
+      }),
+      getVariablesFromSchemas: jest
+        .fn()
+        .mockResolvedValue([{ name: 'event', description: 'Event name' }]),
+      getLatestSchemaPath: jest.fn().mockReturnValue('/fake/schemas'),
+      assertGtmCliAvailable: jest.fn(),
+      logger: gtmScript.logger,
+      parseArgs: gtmScript.parseArgs,
+      process: {
+        exit: jest.fn(),
+      },
+    };
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should run quietly when --quiet is passed', async () => {
+    const argv = ['node', 'script.js', '--quiet'];
+    await gtmScript.main(argv, mockDeps);
+    expect(logSpy).not.toHaveBeenCalled();
+  });
+
+  it('should output JSON when --json is passed', async () => {
+    const argv = ['node', 'script.js', '--json'];
+    await gtmScript.main(argv, mockDeps);
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(JSON.parse(logSpy.mock.calls[0][0])).toEqual({
+      workspace: { workspaceName: 'test-workspace', workspaceId: '123' },
+      created: ['var1'],
+      deleted: ['var2'],
+      inSync: ['var3'],
+    });
+  });
+
+  it('should use the path from --path argument', async () => {
+    const argv = ['node', 'script.js', '--path=./my-demo'];
+    await gtmScript.main(argv, mockDeps);
+    expect(mockDeps.getLatestSchemaPath).toHaveBeenCalledWith('./my-demo');
+  });
+});

package/components/ConditionalRows.js

@@ -0,0 +1,156 @@
+import React, { useState, useId } from 'react';
+import SchemaRows from './SchemaRows';
+import clsx from 'clsx';
+import {
+  getContinuingLinesStyle,
+  getBracketLinesStyle,
+  mergeBackgroundStyles,
+} from '../helpers/continuingLinesStyle';
+
+/**
+ * Renders 'if/then/else' conditionals as a set of `<tr>` elements
+ * that integrate directly into the main table body.
+ *
+ * Structure:
+ * 1. Condition (if) rows: always visible, info-styled
+ * 2. Branch toggles (then/else): radio-style, foldable
+ */
+export default function ConditionalRows({
+  row,
+  bracketEnds: parentBracketEnds,
+}) {
+  const {
+    condition,
+    branches,
+    level = 0,
+    continuingLevels = [],
+    groupBrackets = [],
+  } = row;
+  const [activeBranch, setActiveBranch] = useState(0);
+  const radioGroupId = useId();
+
+  // Compute this group's own bracket and combine with any parent brackets.
+  // bracketIndex = total number of existing brackets, so each group gets a unique position.
+  const ownBracket = {
+    level,
+    bracketIndex: groupBrackets.length,
+  };
+  const allBrackets = [...groupBrackets, ownBracket];
+
+  // colSpan=5 rows need continuing ancestor lines to pass through (for visual
+  // continuity). They don't have ::before/::after connectors, so we draw all
+  // ancestor lines via background gradients. We always include the immediate
+  // parent level (level-1) so the parent-to-child connector passes through.
+  // Only draw ancestor lines where the next level up is also continuing;
+  // this matches PropertyRow's filter to avoid stray lines at a parent's
+  // corner connector when that parent is the last in its group.
+  const ancestorLevels = continuingLevels.filter(
+    (lvl) => lvl < level && continuingLevels.includes(lvl + 1),
+  );
+  // Always include the immediate parent level so the parent-to-child
+  // connector passes through these full-width rows.
+  if (level > 0 && !ancestorLevels.includes(level - 1)) {
+    ancestorLevels.push(level - 1);
+  }
+  const treePassthrough = getContinuingLinesStyle(ancestorLevels, 0);
+  const indent = { paddingLeft: `${level * 1.25 + 0.5}rem` };
+
+  // If header: top cap on ownBracket
+  const headerBracketStyle = getBracketLinesStyle(allBrackets, {
+    starting: [ownBracket],
+  });
+  const headerMerged = mergeBackgroundStyles(
+    treePassthrough,
+    headerBracketStyle,
+  );
+  const headerStyle = { ...headerMerged, ...indent, paddingTop: '0.5rem' };
+
+  // Middle rows (branch toggles): no caps
+  const middleBracketStyle = getBracketLinesStyle(allBrackets);
+  const middleMerged = mergeBackgroundStyles(
+    treePassthrough,
+    middleBracketStyle,
+  );
+  const middleStyle = { ...middleMerged, ...indent };
+
+  // Last branch toggle when content is NOT shown: bottom cap (+ parent ends)
+  const allEndings = [ownBracket, ...(parentBracketEnds || [])];
+  const lastToggleBracketStyle = getBracketLinesStyle(allBrackets, {
+    ending: allEndings,
+  });
+  const lastToggleMerged = mergeBackgroundStyles(
+    treePassthrough,
+    lastToggleBracketStyle,
+  );
+  const lastToggleStyle = {
+    ...lastToggleMerged,
+    ...indent,
+    paddingBottom: '0.5rem',
+  };
+
+  return (
+    <>
+      {/* Condition (if) section - always visible */}
+      <tr className="conditional-condition-header">
+        <td colSpan={5} style={headerStyle}>
+          <span className="conditional-condition-label">
+            <span className="conditional-info-icon-wrapper">
+              <span className="conditional-info-icon">i</span>
+              <span className="conditional-info-tooltip">
+                The properties below define the condition. When the condition is
+                met, the &ldquo;Then&rdquo; branch applies. Otherwise, the
+                &ldquo;Else&rdquo; branch applies.
+              </span>
+            </span>
+            <strong>If</strong>
+          </span>
+          {condition.description && (
+            <p className="conditional-condition-description">
+              {condition.description}
+            </p>
+          )}
+        </td>
+      </tr>
+      <SchemaRows tableData={condition.rows} />
+
+      {/* Branch toggles (then / else) */}
+      {branches.map((branch, index) => {
+        const isActive = activeBranch === index;
+        const isLastBranch = index === branches.length - 1;
+        const toggleStyle =
+          isLastBranch && !isActive ? lastToggleStyle : middleStyle;
+        return (
+          <React.Fragment key={branch.title}>
+            <tr className="choice-row">
+              <td colSpan={5} style={toggleStyle}>
+                <label className="choice-row-header">
+                  <input
+                    type="radio"
+                    name={`conditional-${radioGroupId}`}
+                    checked={isActive}
+                    onChange={() => setActiveBranch(index)}
+                  />
+                  <span className={clsx('choice-row-toggle', 'radio')} />
+                  <strong>{branch.title}</strong>
+                </label>
+                {branch.description && (
+                  <p className="choice-row-description">{branch.description}</p>
+                )}
+              </td>
+            </tr>
+            {isActive && (
+              <SchemaRows
+                tableData={branch.rows}
+                bracketEnds={
+                  isLastBranch
+                    ? [ownBracket, ...(parentBracketEnds || [])]
+                    : undefined
+                }
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}

package/components/FoldableRows.js

@@ -1,60 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useId } from 'react';
 import SchemaRows from './SchemaRows';
 import Heading from '@theme/Heading';
 import clsx from 'clsx';
-
-/**
- * Generates inline styles for continuing hierarchical lines through a row.
- * @param {number[]} continuingLevels - Array of ancestor levels that need lines
- * @param {number} level - Current level of the choice
- * @returns {object} Style object with background gradients
- */
-const getContinuingLinesStyle = (continuingLevels = [], level = 0) => {
-  const getLevelPosition = (lvl) => lvl * 1.25 + 0.5;
-
-  const allGradients = [];
-  const allSizes = [];
-  const allPositions = [];
-
-  // Draw continuing lines for all ancestor levels
-  continuingLevels.forEach((lvl) => {
-    const pos = getLevelPosition(lvl);
-    allGradients.push(
-      'linear-gradient(var(--ifm-table-border-color), var(--ifm-table-border-color))',
-    );
-    allSizes.push('1px 100%');
-    allPositions.push(`${pos}rem top`);
-  });
-
-  // Also draw the line for the immediate parent level (level - 1) if level > 0
-  // This connects the choice rows to their parent property
-  if (level > 0) {
-    const parentPos = getLevelPosition(level - 1);
-    // Check if this position is not already in continuing levels
-    if (!continuingLevels.includes(level - 1)) {
-      allGradients.push(
-        'linear-gradient(var(--ifm-table-border-color), var(--ifm-table-border-color))',
-      );
-      allSizes.push('1px 100%');
-      allPositions.push(`${parentPos}rem top`);
-    }
-  }
-
-  // Calculate indentation based on level
-  const paddingLeft = `${level * 1.25 + 0.5}rem`;
-
-  if (allGradients.length === 0) {
-    return { paddingLeft };
-  }
-
-  return {
-    paddingLeft,
-    backgroundImage: allGradients.join(', '),
-    backgroundSize: allSizes.join(', '),
-    backgroundPosition: allPositions.join(', '),
-    backgroundRepeat: 'no-repeat',
-  };
-};
+import {
+  getContinuingLinesStyle,
+  getBracketLinesStyle,
+  mergeBackgroundStyles,
+} from '../helpers/continuingLinesStyle';
 
 // A clickable row that acts as a header/summary for a foldable choice
 const ChoiceRow = ({
@@ -89,7 +41,7 @@ const ChoiceRow = ({
  * Renders 'oneOf' and 'anyOf' choices as a set of foldable `<tr>` elements
  * that integrate directly into the main table body.
  */
-export default function FoldableRows({ row }) {
+export default function FoldableRows({ row, bracketEnds: parentBracketEnds }) {
   const {
     choiceType,
     options,
@@ -98,7 +50,9 @@ export default function FoldableRows({ row }) {
     required,
     level = 0,
     continuingLevels = [],
+    groupBrackets = [],
   } = row;
+  const radioGroupId = useId();
   const [openOneOf, setOpenOneOf] = useState(0); // For oneOf, track the single open index
   const [openAnyOf, setOpenAnyOf] = useState({}); // For anyOf, track each option's state
 
@@ -120,14 +74,70 @@ export default function FoldableRows({ row }) {
     selectTitle
   );
 
-  // Calculate continuing lines style for choice rows
-  const continuingLinesStyle = getContinuingLinesStyle(continuingLevels, level);
+  // Compute this group's own bracket and combine with any parent brackets.
+  // bracketIndex = total number of existing brackets, so each group gets a unique position.
+  const ownBracket = {
+    level,
+    bracketIndex: groupBrackets.length,
+  };
+  const allBrackets = [...groupBrackets, ownBracket];
+
+  // colSpan=5 rows need continuing ancestor lines to pass through (for visual
+  // continuity). They don't have ::before/::after connectors, so we draw all
+  // ancestor lines via background gradients. We always include the immediate
+  // parent level (level-1) so the parent-to-child connector passes through.
+  // Only draw ancestor lines where the next level up is also continuing;
+  // this matches PropertyRow's filter to avoid stray lines at a parent's
+  // corner connector when that parent is the last in its group.
+  const ancestorLevels = continuingLevels.filter(
+    (lvl) => lvl < level && continuingLevels.includes(lvl + 1),
+  );
+  // Always include the immediate parent level so the parent-to-child
+  // connector passes through these full-width rows.
+  if (level > 0 && !ancestorLevels.includes(level - 1)) {
+    ancestorLevels.push(level - 1);
+  }
+  const treePassthrough = getContinuingLinesStyle(ancestorLevels, 0);
+  const indent = { paddingLeft: `${level * 1.25 + 0.5}rem` };
+
+  // Header row: top cap on the ownBracket
+  const headerBracketStyle = getBracketLinesStyle(allBrackets, {
+    starting: [ownBracket],
+  });
+  const headerMerged = mergeBackgroundStyles(
+    treePassthrough,
+    headerBracketStyle,
+  );
+  const headerStyle = { ...headerMerged, ...indent, paddingTop: '0.5rem' };
+
+  // Middle rows (option toggles): no caps
+  const middleBracketStyle = getBracketLinesStyle(allBrackets);
+  const middleMerged = mergeBackgroundStyles(
+    treePassthrough,
+    middleBracketStyle,
+  );
+  const middleStyle = { ...middleMerged, ...indent };
+
+  // Last toggle when its content is NOT shown: bottom cap on ownBracket (+ parent ends)
+  const allEndings = [ownBracket, ...(parentBracketEnds || [])];
+  const lastToggleBracketStyle = getBracketLinesStyle(allBrackets, {
+    ending: allEndings,
+  });
+  const lastToggleMerged = mergeBackgroundStyles(
+    treePassthrough,
+    lastToggleBracketStyle,
+  );
+  const lastToggleStyle = {
+    ...lastToggleMerged,
+    ...indent,
+    paddingBottom: '0.5rem',
+  };
 
   return (
     <>
       {/* A header row for the entire choice block */}
       <tr>
-        <td colSpan={5} style={continuingLinesStyle}>
+        <td colSpan={5} style={headerStyle}>
           <Heading as="h4" className="choice-row-header-headline">
             {header}
           </Heading>
@@ -139,6 +149,10 @@ export default function FoldableRows({ row }) {
       {options.map((option, index) => {
         const isActive =
           choiceType === 'oneOf' ? openOneOf === index : !!openAnyOf[index];
+        const isLastOption = index === options.length - 1;
+        // Last toggle needs bottom cap when its content is hidden
+        const toggleStyle =
+          isLastOption && !isActive ? lastToggleStyle : middleStyle;
         return (
           <React.Fragment key={option.title}>
             <ChoiceRow
@@ -151,11 +165,24 @@ export default function FoldableRows({ row }) {
               }
               isActive={isActive}
               isRadio={choiceType === 'oneOf'}
-              name={choiceType === 'oneOf' ? row.title : option.title}
-              continuingLinesStyle={continuingLinesStyle}
+              name={
+                choiceType === 'oneOf'
+                  ? `oneOf-${radioGroupId}`
+                  : `anyOf-${option.title}-${radioGroupId}`
+              }
+              continuingLinesStyle={toggleStyle}
             />
             {/* If the option is active, render its rows directly into the table body */}
-            {isActive && <SchemaRows tableData={option.rows} />}
+            {isActive && (
+              <SchemaRows
+                tableData={option.rows}
+                bracketEnds={
+                  isLastOption
+                    ? [ownBracket, ...(parentBracketEnds || [])]
+                    : undefined
+                }
+              />
+            )}
           </React.Fragment>
         );
       })}