Repository: expo/expo
File: docs/ui/components/TableOfContents/TableOfContents.tsx (TypeScript)

Code before:
      if (shouldHide) {
        return null;
      }

      const hasChildren =
        isH3 &&
        (() => {
          for (let i = index + 1; i < displayedHeadings.length; i++) {
            const nextHeading = displayedHeadings[i];
            if (nextHeading.level <= heading.level) {
              break;
            }
            if (nextHeading.level > heading.level) {
              return true;
            }
          }
          return false;
        })();

      return (
        <div
          key={heading.slug}
          className={mergeClasses(
            'flex items-center',
            currentH3 && heading.level > BASE_HEADING_LEVEL + 2 && 'ml-0',
            hasChildren && isVersioned ? '-ml-2' : ''
          )}>
          {hasChildren && isVersioned && (
            <ButtonBase
              onClick={event => {
                toggleH3(heading.slug, event);
              }}
              onKeyDown={event => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  toggleH3(heading.slug, event);
                }
              }}
              aria-expanded={!collapsedH3s.has(heading.slug)}
              aria-controls={`toc-section-${heading.slug}`}
              className="-mr-2 flex h-full cursor-pointer items-center justify-center self-start pt-[3px] hover:opacity-70"
              aria-label={`${collapsedH3s.has(heading.slug) ? 'Expand' : 'Collapse'} section ${heading.title}`}>
              <ChevronDownIcon
                className={mergeClasses(
                  'icon-sm text-icon-secondary transition-transform',
                  collapsedH3s.has(heading.slug) ? '-rotate-90' : 'rotate-0'
                )}
              />
            </ButtonBase>
          )}
          <TableOfContentsLink

Review comment (suggestion):
```suggestion
            hasChildren && isVersioned && '-ml-2'
```

Tip: `mergeClasses` can handle undefined or falsey values.

Code after:
      if (shouldHide) {
        return null;
      }

      const hasChildren =
        isH3 &&
        (() => {
          for (let i = index + 1; i < displayedHeadings.length; i++) {
            const nextHeading = displayedHeadings[i];
            if (nextHeading.level <= heading.level) {
              break;
            }
            if (nextHeading.level > heading.level) {
              return true;
            }
          }
          return false;
        })();

      return (
        <div
          key={heading.slug}
          className={mergeClasses(
            'flex items-center',
            currentH3 && heading.level > BASE_HEADING_LEVEL + 2 && 'ml-0',
            hasChildren && isVersioned && '-ml-2'
          )}>
          {hasChildren && isVersioned && (
            <ButtonBase
              onClick={event => {
                toggleH3(heading.slug, event);
              }}
              onKeyDown={event => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  toggleH3(heading.slug, event);
                }
              }}
              aria-expanded={!collapsedH3s.has(heading.slug)}
              aria-controls={`toc-section-${heading.slug}`}
              className="-mr-2 flex h-full cursor-pointer items-center justify-center self-start pt-0.5 hocus:opacity-75"
              aria-label={`${collapsedH3s.has(heading.slug) ? 'Expand' : 'Collapse'} section ${heading.title}`}>
              <ChevronDownIcon
                className={mergeClasses(
                  'icon-sm text-icon-secondary transition-transform',
                  collapsedH3s.has(heading.slug) ? '-rotate-90' : 'rotate-0'
                )}
              />
            </ButtonBase>
          )}
          <TableOfContentsLink