diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx index 8728b460119f3..ab565767aa303 100644 --- a/packages/ui-components/src/MDX/CodeTabs.tsx +++ b/packages/ui-components/src/MDX/CodeTabs.tsx @@ -10,6 +10,10 @@ type MDXCodeTabsProps = { defaultTab?: string; }; +const NAME_OVERRIDES: Record = { + mjs: 'ESM', +}; + const MDXCodeTabs: FC = ({ languages: rawLanguages, displayNames: rawDisplayNames, @@ -20,12 +24,22 @@ const MDXCodeTabs: FC = ({ const languages = rawLanguages.split('|'); const displayNames = rawDisplayNames?.split('|') ?? []; + const occurrences: Record = {}; + const tabs = languages.map((language, index) => { - const displayName = displayNames[index]; + const base = + displayNames[index]?.trim() || + NAME_OVERRIDES[language] || + language.toUpperCase(); + + const count = occurrences[base] ?? 0; + occurrences[base] = count + 1; + + const label = count > 0 ? `${base} (${count + 1})` : base; return { key: `${language}-${index}`, - label: displayName?.length ? displayName : language.toUpperCase(), + label: label, }; });