[code-infra] Accomodate build requirements from mui-x

docs/.env

@@ -1,2 +1,4 @@
 FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com
-NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com
+
+# Enable this variable after we get enough feedbacks from X docs.
+# NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com

docs/data/material/components/menus/CustomizedMenus.js

@@ -39,6 +39,9 @@ const StyledMenu = styled((props) => (
         fontSize: 18,
         color: theme.palette.text.secondary,
         marginRight: theme.spacing(1.5),
+        ...theme.applyStyles('dark', {
+          color: 'inherit',
+        }),
       },
       '&:active': {
         backgroundColor: alpha(

docs/data/material/components/menus/CustomizedMenus.tsx

@@ -39,6 +39,9 @@ const StyledMenu = styled((props: MenuProps) => (
         fontSize: 18,
         color: theme.palette.text.secondary,
         marginRight: theme.spacing(1.5),
+        ...theme.applyStyles('dark', {
+          color: 'inherit',
+        }),
       },
       '&:active': {
         backgroundColor: alpha(

docs/data/material/getting-started/templates/crud-dashboard/data/employees.js

@@ -3,23 +3,23 @@ const INITIAL_EMPLOYEES_STORE = [
     id: 1,
     name: 'Edward Perry',
     age: 25,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Finance',
     isFullTime: true,
   },
   {
     id: 2,
     name: 'Josephine Drake',
     age: 36,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Market',
     isFullTime: false,
   },
   {
     id: 3,
     name: 'Cody Phillips',
     age: 19,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Development',
     isFullTime: true,
   },

docs/data/material/getting-started/templates/crud-dashboard/data/employees.ts

@@ -16,23 +16,23 @@ const INITIAL_EMPLOYEES_STORE: Employee[] = [
     id: 1,
     name: 'Edward Perry',
     age: 25,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Finance',
     isFullTime: true,
   },
   {
     id: 2,
     name: 'Josephine Drake',
     age: 36,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Market',
     isFullTime: false,
   },
   {
     id: 3,
     name: 'Cody Phillips',
     age: 19,
-    joinDate: new Date().toISOString(),
+    joinDate: '2025-07-16T00:00:00.000Z',
     role: 'Development',
     isFullTime: true,
   },

docs/src/modules/components/ApiPage/definitions/properties.ts

@@ -21,7 +21,12 @@ export interface PropertyDefinition {
   requiresRef?: boolean;
   seeMoreDescription?: string;
   signature?: string;
-  signatureArgs?: { argName: string; argDescription?: string }[];
+  signatureArgs?: {
+    argName: string;
+    argDescription?: string;
+    argType?: string;
+    argTypeDescription?: string;
+  }[];
   signatureReturnDescription?: string;
   typeName: string;
   /**
@@ -116,11 +121,15 @@ export function getPropsApiDefinitions(params: GetPropsApiDefinitionsParams): Pr
     const signature = propData.signature?.type;
     const signatureArgs = propData.signature?.describedArgs?.map((argName) => ({
       argName,
-      argDescription: propertiesDescriptions[propName].typeDescriptions?.[argName],
+      argDescription: propertiesDescriptions[propName].typeDescriptions?.[argName].description,
+      argType: propertiesDescriptions[propName].typeDescriptions?.[argName]?.argType,
+      argTypeDescription:
+        propertiesDescriptions[propName].typeDescriptions?.[argName]?.argTypeDescription,
     }));
     const signatureReturnDescription =
       propData.signature?.returned &&
-      propertiesDescriptions[propName].typeDescriptions?.[propData.signature.returned];
+      propertiesDescriptions[propName].typeDescriptions?.[propData.signature.returned]
+        .argTypeDescription;
 
     return {
       hash: `${kebabCase(componentName)}-prop-${propName}`,

docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx

@@ -108,6 +108,17 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       borderColor: alpha(darkTheme.palette.primary[100], 0.8),
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
+    '& .signature-type': {
+      textDecoration: 'underline',
+      textDecorationStyle: 'dotted',
+      textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+      fontWeight: theme.typography.fontWeightMedium,
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+      '&:hover': {
+        textDecorationColor: 'inherit',
+      },
+      cursor: 'help',
+    },
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -146,6 +157,10 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
         borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
         backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
       },
+      '& .signature-type': {
+        color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+        textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6),
+      },
     },
   }),
 );

docs/src/modules/components/ApiPage/list/PropertiesList.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
 import { useTranslate } from '@mui/docs/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -223,14 +224,32 @@ export default function PropertiesList(props: PropertiesListProps) {
                     {signatureArgs && (
                       <div>
                         <ul>
-                          {signatureArgs.map(({ argName, argDescription }) => (
-                            <li
-                              key={argName}
-                              dangerouslySetInnerHTML={{
-                                __html: `<code>${argName}</code> ${argDescription}`,
-                              }}
-                            />
-                          ))}
+                          {signatureArgs.map(
+                            ({ argName, argDescription, argType, argTypeDescription }) => (
+                              <li key={argName}>
+                                <code>
+                                  {argName}
+                                  {argType && argTypeDescription && (
+                                    <span>
+                                      :{' '}
+                                      <Tooltip
+                                        title={
+                                          <span
+                                            dangerouslySetInnerHTML={{ __html: argTypeDescription }}
+                                          />
+                                        }
+                                      >
+                                        <span className="signature-type">{argType}</span>
+                                      </Tooltip>
+                                    </span>
+                                  )}
+                                </code>{' '}
+                                {argDescription && (
+                                  <span dangerouslySetInnerHTML={{ __html: argDescription }} />
+                                )}
+                              </li>
+                            ),
+                          )}
                         </ul>
                       </div>
                     )}

docs/src/modules/components/ApiPage/table/PropertiesTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
 import { useTranslate } from '@mui/docs/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -41,6 +42,17 @@ const StyledTable = styled('table')(
       borderColor: alpha(darkTheme.palette.primary[100], 0.8),
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
+    '& .MuiApi-table-item-signature-type': {
+      textDecoration: 'underline',
+      textDecorationStyle: 'dotted',
+      textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+      fontWeight: theme.typography.fontWeightMedium,
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+      '&:hover': {
+        textDecorationColor: 'inherit',
+      },
+      cursor: 'help',
+    },
     '& .MuiApi-table-item-default': {
       ...theme.typography.caption,
       fontFamily: theme.typography.fontFamilyCode,
@@ -89,6 +101,10 @@ const StyledTable = styled('table')(
         borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
         backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
       },
+      '& .MuiApi-table-item-signature-type': {
+        color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+        textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6),
+      },
       '& .MuiApi-table-item-default': {
         color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
         backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
@@ -249,15 +265,34 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                       {signatureArgs && (
                         <div>
                           <ul>
-                            {signatureArgs.map(({ argName, argDescription }) => (
-                              <li
-                                className="prop-signature-list"
-                                key={argName}
-                                dangerouslySetInnerHTML={{
-                                  __html: `<code>${argName}</code> ${argDescription}`,
-                                }}
-                              />
-                            ))}
+                            {signatureArgs.map(
+                              ({ argName, argDescription, argType, argTypeDescription }) => (
+                                <li className="prop-signature-list" key={argName}>
+                                  <code>
+                                    {argName}
+                                    {argType && argTypeDescription && (
+                                      <Tooltip
+                                        title={
+                                          <span
+                                            dangerouslySetInnerHTML={{ __html: argTypeDescription }}
+                                          />
+                                        }
+                                      >
+                                        <span>
+                                          :{' '}
+                                          <span className="MuiApi-table-item-signature-type">
+                                            {argType}
+                                          </span>
+                                        </span>
+                                      </Tooltip>
+                                    )}
+                                  </code>{' '}
+                                  {argDescription && (
+                                    <span dangerouslySetInnerHTML={{ __html: argDescription }} />
+                                  )}
+                                </li>
+                              ),
+                            )}
                           </ul>
                         </div>
                       )}

docs/src/modules/components/Demo.js

@@ -27,6 +27,7 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
 import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
 import { AdCarbonInline } from '@mui/docs/Ad';
 import DemoAiSuggestionHero from 'docs/src/modules/components/DemoAiSuggestionHero';
+import OpenMuiChat from 'docs/src/modules/components/OpenMuiChat';
 
 /**
  * Removes leading spaces (indentation) present in the `.tsx` previews
@@ -637,6 +638,34 @@ export default function Demo(props) {
                   )}
                 </TabPanel>
               ))}
+              {process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL && (
+                <Box
+                  sx={(theme) => ({
+                    position: 'relative',
+                    display: 'none',
+                    [theme.breakpoints.up('sm')]: { display: 'block' },
+                  })}
+                >
+                  {/* This extra box is to prevent hover styles of DemoEditor when mouse move from the corner to the chat button. */}
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      bottom: '0',
+                      right: '0',
+                      zIndex: 1,
+                      pr: '0.875rem',
+                      pb: '0.875rem',
+                    }}
+                  >
+                    <OpenMuiChat
+                      data-ga-event-category="mui-chat"
+                      data-ga-event-label={demo.gaLabel}
+                      data-ga-event-action="open-in-mui-chat"
+                      demoData={demoData}
+                    />
+                  </Box>
+                </Box>
+              )}
             </Collapse>
           </Tabs>
           {/* AI Suggestion Hero UI */}