[docs-infra] Improve Typedocs HTML Weight (#4497)

Author: dav-is

docs/package.json

@@ -20,7 +20,7 @@
     "@base-ui/utils": "workspace:*",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@mui/internal-docs-infra": "0.7.1-canary.0",
+    "@mui/internal-docs-infra": "0.8.1-canary.0",
     "@next/mdx": "^16.1.6",
     "@react-spring/web": "^10.0.3",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",

docs/src/code-components.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+import { CodeComponentsContext } from '@mui/internal-docs-infra/useCode';
+import type { MDXComponents } from 'mdx/types';
+import { Link } from './components/Link';
+import { TypeRef } from './components/TypeRef';
+import { TypePropRef } from './components/TypePropRef';
+
+export const codeComponents: MDXComponents = {
+  a: Link,
+  TypeRef,
+  TypePropRef,
+};
+
+export function CodeComponentsProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <CodeComponentsContext.Provider value={codeComponents}>
+      {children}
+    </CodeComponentsContext.Provider>
+  );
+}

docs/src/components/DocsProviders.tsx

@@ -2,13 +2,18 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 import { TypesDataProvider } from '@mui/internal-docs-infra/useType';
 import { PackageManagerSnippetProvider } from 'docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
+import { CodeComponentsProvider } from 'docs/src/code-components';
 
 export function DocsProviders({ children }: { children: React.ReactNode }) {
   return (
     <Tooltip.Provider delay={350}>
-      <TypesDataProvider>
-        <PackageManagerSnippetProvider defaultValue="npm">{children}</PackageManagerSnippetProvider>
-      </TypesDataProvider>
+      <CodeComponentsProvider>
+        <TypesDataProvider>
+          <PackageManagerSnippetProvider defaultValue="npm">
+            {children}
+          </PackageManagerSnippetProvider>
+        </TypesDataProvider>
+      </CodeComponentsProvider>
     </Tooltip.Provider>
   );
 }

docs/src/components/ReferenceTable/PropertiesReferenceAccordion.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import type { EnhancedProperty } from '@mui/internal-docs-infra/useTypes';
+import { stringOrHastToString } from '@mui/internal-docs-infra/pipeline/hastUtils';
 import { Link } from 'docs/src/components/Link';
 import * as Accordion from '../Accordion';
 import * as DescriptionList from '../DescriptionList';
@@ -42,7 +43,9 @@ export function PropertiesReferenceAccordion({ data, name: partName, ...props }:
         // anchor hash for each property
         const id = `${partName}-${name}`;
 
-        const shortTypeText = prop.shortTypeText ?? 'type';
+        const shortTypeText = prop.shortType
+          ? stringOrHastToString(prop.shortType as string)
+          : 'type';
 
         // Build modifiers string
         const modifiers: string[] = [];

docs/src/components/ReferenceTable/ReferenceAccordion.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import type { EnhancedProperty } from '@mui/internal-docs-infra/useTypes';
+import { stringOrHastToString } from '@mui/internal-docs-infra/pipeline/hastUtils';
 import { Link } from 'docs/src/components/Link';
 import * as Accordion from '../Accordion';
 import * as CodeBlock from '../CodeBlock';
@@ -63,7 +64,9 @@ export function ReferenceAccordion({
         // anchor hash for each prop
         const id = `${partName.replace('.', '')}-${name}`;
 
-        const shortTypeText = prop.shortTypeText ?? 'type';
+        const shortTypeText = prop.shortType
+          ? stringOrHastToString(prop.shortType as string)
+          : 'type';
         const defaultText = prop.defaultText;
 
         return (