diff --git a/docs/.env b/docs/.env index e79e6f46e8e1a3..6549cc6d0accae 100644 --- a/docs/.env +++ b/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 \ No newline at end of file + +# Enable this variable after we get enough feedbacks from X docs. +# NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com \ No newline at end of file diff --git a/docs/data/material/components/menus/CustomizedMenus.js b/docs/data/material/components/menus/CustomizedMenus.js index 8e3e96eccc5757..a3bb8d6bc19c45 100644 --- a/docs/data/material/components/menus/CustomizedMenus.js +++ b/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( diff --git a/docs/data/material/components/menus/CustomizedMenus.tsx b/docs/data/material/components/menus/CustomizedMenus.tsx index 9dc8baaa9fb576..1f29a6689f1067 100644 --- a/docs/data/material/components/menus/CustomizedMenus.tsx +++ b/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( diff --git a/docs/data/material/getting-started/templates/crud-dashboard/data/employees.js b/docs/data/material/getting-started/templates/crud-dashboard/data/employees.js index 5d76c83d5f2db5..41da590bb61c04 100644 --- a/docs/data/material/getting-started/templates/crud-dashboard/data/employees.js +++ b/docs/data/material/getting-started/templates/crud-dashboard/data/employees.js @@ -3,7 +3,7 @@ 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, }, @@ -11,7 +11,7 @@ const INITIAL_EMPLOYEES_STORE = [ id: 2, name: 'Josephine Drake', age: 36, - joinDate: new Date().toISOString(), + joinDate: '2025-07-16T00:00:00.000Z', role: 'Market', isFullTime: false, }, @@ -19,7 +19,7 @@ const INITIAL_EMPLOYEES_STORE = [ id: 3, name: 'Cody Phillips', age: 19, - joinDate: new Date().toISOString(), + joinDate: '2025-07-16T00:00:00.000Z', role: 'Development', isFullTime: true, }, diff --git a/docs/data/material/getting-started/templates/crud-dashboard/data/employees.ts b/docs/data/material/getting-started/templates/crud-dashboard/data/employees.ts index 6d8584ea833586..fb8ce9568d5682 100644 --- a/docs/data/material/getting-started/templates/crud-dashboard/data/employees.ts +++ b/docs/data/material/getting-started/templates/crud-dashboard/data/employees.ts @@ -16,7 +16,7 @@ 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, }, @@ -24,7 +24,7 @@ const INITIAL_EMPLOYEES_STORE: Employee[] = [ id: 2, name: 'Josephine Drake', age: 36, - joinDate: new Date().toISOString(), + joinDate: '2025-07-16T00:00:00.000Z', role: 'Market', isFullTime: false, }, @@ -32,7 +32,7 @@ const INITIAL_EMPLOYEES_STORE: Employee[] = [ id: 3, name: 'Cody Phillips', age: 19, - joinDate: new Date().toISOString(), + joinDate: '2025-07-16T00:00:00.000Z', role: 'Development', isFullTime: true, }, diff --git a/docs/src/modules/components/ApiPage/definitions/properties.ts b/docs/src/modules/components/ApiPage/definitions/properties.ts index d57e91471e711f..0cbce2a44e9e6b 100644 --- a/docs/src/modules/components/ApiPage/definitions/properties.ts +++ b/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}`, diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index 58502acff53d0f..7faa089af99a87 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/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), + }, }, }), ); diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index 00cc87e9874d11..9607474de273ff 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/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 && (
)} diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index e8b6a9afffd357..d86f4e7b6625be 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/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 && (
)} diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 0c814d8bf20a0b..56092c770c5fad 100644 --- a/docs/src/modules/components/Demo.js +++ b/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) { )} ))} + {process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL && ( + ({ + 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. */} + + + + + )} {/* AI Suggestion Hero UI */} diff --git a/docs/src/modules/components/OpenMuiChat.tsx b/docs/src/modules/components/OpenMuiChat.tsx new file mode 100644 index 00000000000000..ac685e2a97c146 --- /dev/null +++ b/docs/src/modules/components/OpenMuiChat.tsx @@ -0,0 +1,137 @@ +import * as React from 'react'; +import { styled, keyframes, alpha } from '@mui/material/styles'; +import Button, { ButtonProps } from '@mui/material/Button'; +import CircularProgress from '@mui/material/CircularProgress'; +import Snackbar from '@mui/material/Snackbar'; +import Alert from '@mui/material/Alert'; +import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark'; +import { createMuiChat } from '../sandbox/MuiChat'; +import { DemoData } from '../sandbox/types'; + +interface OpenInMUIChatButtonProps extends ButtonProps { + demoData: DemoData; +} + +const rainbow = keyframes` + 0% { + background-position: -100% center; + } + 100% { + background-position: 100% center; + } +`; + +const RainbowButton = styled(Button)(({ theme }) => ({ + '--color-1': '0 100% 63%', + '--color-2': '270 100% 63%', + '--color-3': '210 100% 63%', + '--color-4': '195 100% 63%', + '--color-5': '90 100% 63%', + position: 'relative', + display: 'inline-flex', + height: 26, + padding: '7px 8px 8px 8px', // 7px for optical alignment + flexShrink: 0, + borderRadius: '6px', + border: '1px solid transparent', + borderBottomWidth: '3px', + borderBottomColor: 'transparent', + boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.32)', + '&.MuiButton-loading': { + boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.32)', + }, + color: '#fff', + fontSize: theme.typography.pxToRem(13), + fontWeight: theme.typography.fontWeightMedium, + backgroundSize: '200%', + backgroundClip: 'padding-box, border-box, border-box', + backgroundOrigin: 'border-box', + animation: `${rainbow} 2s linear infinite`, + '--bg-color-raw': '16, 18, 20', + '--bg-color': 'rgb(var(--bg-color-raw))', + backgroundImage: `linear-gradient(var(--bg-color), var(--bg-color)), linear-gradient(var(--bg-color) 50%, rgba(var(--bg-color-raw), 0.6) 80%, rgba(var(--bg-color-raw), 0)), linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)))`, + ...theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primary[300], 0.2), + }), + '&:hover': { + boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.56)', + animationPlayState: 'paused', + }, + '&::before': { + content: '""', + position: 'absolute', + bottom: '-20%', + left: '50%', + zIndex: 0, + height: '20%', + width: '60%', + transform: 'translateX(-50%)', + animation: `${rainbow} 3s linear infinite`, + background: + 'linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)))', + filter: 'blur(0.8rem)', + }, + '& > svg': { + height: 12, + width: 12, + margin: '1px 4px 0 4px', + }, + '& > svg > path': { + fill: (theme.vars || theme).palette.primary.main, + }, +})); + +const OpenInMUIChatButton = React.forwardRef( + function OpenInMUIChatButton({ demoData, ...props }, ref) { + const [loading, setLoading] = React.useState(false); + const [error, setError] = React.useState(null); + const baseUrl = process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL; + + const handleClick = async () => { + setLoading(true); + setError(null); + + try { + await createMuiChat(demoData).openSandbox(); + } catch (err: any) { + setError(err as Error); + } finally { + setLoading(false); + } + }; + + // If the base URL is not set, we can't render the button + if (!baseUrl) { + return null; + } + + return ( + + } + onClick={handleClick} + {...props} + > + Edit in Chat + + setError(null)} + autoHideDuration={6000} + > + setError(null)} severity="error" sx={{ width: '100%' }}> + {error?.message || 'Failed to open in MUI Chat'} + + + + ); + }, +); + +export default OpenInMUIChatButton; diff --git a/docs/src/modules/sandbox/MuiChat.ts b/docs/src/modules/sandbox/MuiChat.ts new file mode 100644 index 00000000000000..c7198252417e81 --- /dev/null +++ b/docs/src/modules/sandbox/MuiChat.ts @@ -0,0 +1,97 @@ +/* eslint-disable import/prefer-default-export */ +import { DemoData } from './types'; +import SandboxDependencies from './Dependencies'; +import flattenRelativeImports from './FlattenRelativeImports'; + +function getFileExtension(codeVariant: 'TS' | 'JS') { + if (codeVariant === 'TS') { + return 'tsx'; + } + if (codeVariant === 'JS') { + return 'jsx'; + } + throw new Error(`Unsupported codeVariant: ${codeVariant}`); +} + +export function createMuiChat(demoData: DemoData) { + const { title, githubLocation: description } = demoData; + const ext = getFileExtension(demoData.codeVariant); + + // Get dependencies like StackBlitz + const { dependencies } = SandboxDependencies(demoData, { + commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined, + }); + + return { + title, + description, + dependencies, + openSandbox: async () => { + const baseUrl = process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL; + + if (!baseUrl) { + throw new Error( + 'Could not find the MUI Chat URL, please open a new issue on https://github.com/mui/material-ui/issues/new', + ); + } + + // Determine primary package from productId or fallback to dependencies + const productToPackage: Record = { + 'material-ui': '@mui/material', + 'joy-ui': '@mui/joy', + 'x-data-grid': '@mui/x-data-grid', + 'x-date-pickers': '@mui/x-date-pickers', + 'x-tree-view': '@mui/x-tree-view', + 'x-charts': '@mui/x-charts', + }; + + let primaryPackage = '@mui/material'; // default fallback + if (demoData.productId && productToPackage[demoData.productId]) { + primaryPackage = productToPackage[demoData.productId]; + } + + // Process files from demoData similar to StackBlitz + const files = [ + { + path: `${demoData.title}.${ext}`, + content: flattenRelativeImports(demoData.raw), + isEntry: true, + }, + // Add relative modules if any + ...(demoData.relativeModules || []).map((module) => ({ + path: module.module.replace(/^.*[\\/]/g, ''), + content: flattenRelativeImports(module.raw), + })), + ]; + + try { + const response = await fetch(`${baseUrl}/v1/public/chat/open`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + name: demoData.title, + description: document.title, + files, + type: 'mui-docs', + package: { + name: primaryPackage, + version: dependencies[primaryPackage] || 'latest', + }, + }), + }); + + if (!response.ok) { + throw new Error('Failed to open in MUI Chat'); + } + + const data = await response.json(); + window.open(data.nextUrl, '_blank'); + } catch (error) { + console.error('Error opening MUI Chat:', error); + throw error; + } + }, + }; +} diff --git a/docs/translations/api-docs-joy/accordion/accordion.json b/docs/translations/api-docs-joy/accordion/accordion.json index f2e42c644a64fe..05d2e3463acb15 100644 --- a/docs/translations/api-docs-joy/accordion/accordion.json +++ b/docs/translations/api-docs-joy/accordion/accordion.json @@ -21,8 +21,14 @@ "onChange": { "description": "Callback fired when the expand/collapse state is changed.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "expanded": "The expanded state of the accordion." + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "expanded": { + "name": "expanded", + "description": "The expanded state of the accordion." + } } }, "slotProps": { "description": "The props used for each slot inside." }, diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json index 802d33ac980d22..349bb980018542 100644 --- a/docs/translations/api-docs-joy/autocomplete/autocomplete.json +++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json @@ -60,8 +60,8 @@ "filterOptions": { "description": "A function that determines the filtered options to be rendered on search.", "typeDescriptions": { - "options": "The options to render.", - "state": "The state of the component." + "options": { "name": "options", "description": "The options to render." }, + "state": { "name": "state", "description": "The state of the component." } } }, "filterSelectedOptions": { @@ -73,22 +73,28 @@ }, "getLimitTagsText": { "description": "The label to display when the tags are truncated (limitTags).", - "typeDescriptions": { "more": "The number of truncated tags." } + "typeDescriptions": { + "more": { "name": "more", "description": "The number of truncated tags." } + } }, "getOptionDisabled": { "description": "Used to determine the disabled state for a given option.", - "typeDescriptions": { "option": "The option to test." } + "typeDescriptions": { "option": { "name": "option", "description": "The option to test." } } }, "getOptionKey": { "description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).", - "typeDescriptions": { "option": "The option to get the key for." } + "typeDescriptions": { + "option": { "name": "option", "description": "The option to get the key for." } + } }, "getOptionLabel": { "description": "Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).
If used in free solo mode, it must accept both the type of the options and a string." }, "groupBy": { "description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided.", - "typeDescriptions": { "options": "The options to group." } + "typeDescriptions": { + "options": { "name": "options", "description": "The options to group." } + } }, "handleHomeEndKeys": { "description": "If true, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively." @@ -102,7 +108,10 @@ "inputValue": { "description": "The input value." }, "isOptionEqualToValue": { "description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.", - "typeDescriptions": { "option": "The option to test.", "value": "The value to test against." } + "typeDescriptions": { + "option": { "name": "option", "description": "The option to test." }, + "value": { "name": "value", "description": "The value to test against." } + } }, "limitTags": { "description": "The maximum number of tags that will be visible when not focused. Set -1 to disable the limit." @@ -123,37 +132,51 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value of the component.", - "reason": "One of "createOption", "selectOption", "removeOption", "blur" or "clear"." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value of the component." }, + "reason": { + "name": "reason", + "description": "One of "createOption", "selectOption", "removeOption", "blur" or "clear"." + } } }, "onClose": { "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur"." + } } }, "onHighlightChange": { "description": "Callback fired when the highlight option changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "option": "The highlighted option.", - "reason": "Can be: "keyboard", "auto", "mouse", "touch"." + "event": { "name": "event", "description": "The event source of the callback." }, + "option": { "name": "option", "description": "The highlighted option." }, + "reason": { + "name": "reason", + "description": "Can be: "keyboard", "auto", "mouse", "touch"." + } } }, "onInputChange": { "description": "Callback fired when the input value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value of the text input.", - "reason": "Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"" + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value of the text input." }, + "reason": { + "name": "reason", + "description": "Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"" + } } }, "onOpen": { "description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown." }, "openOnFocus": { "description": "If true, the popup will open on input focus." }, @@ -168,22 +191,28 @@ }, "renderGroup": { "description": "Render the group.", - "typeDescriptions": { "params": "The group to render." } + "typeDescriptions": { "params": { "name": "params", "description": "The group to render." } } }, "renderOption": { "description": "Render the option, use getOptionLabel by default.", "typeDescriptions": { - "props": "The props to apply on the li element.", - "option": "The option to render.", - "state": "The state of the component." + "props": { "name": "props", "description": "The props to apply on the li element." }, + "option": { "name": "option", "description": "The option to render." }, + "state": { "name": "state", "description": "The state of the component." } } }, "renderTags": { "description": "Render the selected value.", "typeDescriptions": { - "value": "The value provided to the component.", - "getTagProps": "A tag props getter.", - "ownerState": "The state of the Autocomplete component." + "value": { + "name": "value", + "description": "The value provided to the component." + }, + "getTagProps": { "name": "getTagProps", "description": "A tag props getter." }, + "ownerState": { + "name": "ownerState", + "description": "The state of the Autocomplete component." + } } }, "required": { diff --git a/docs/translations/api-docs-joy/checkbox/checkbox.json b/docs/translations/api-docs-joy/checkbox/checkbox.json index d8b1d532d7fccc..36d17cac0c75f9 100644 --- a/docs/translations/api-docs-joy/checkbox/checkbox.json +++ b/docs/translations/api-docs-joy/checkbox/checkbox.json @@ -28,7 +28,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "overlay": { diff --git a/docs/translations/api-docs-joy/drawer/drawer.json b/docs/translations/api-docs-joy/drawer/drawer.json index 596c4adbe61202..18f87d90d4464f 100644 --- a/docs/translations/api-docs-joy/drawer/drawer.json +++ b/docs/translations/api-docs-joy/drawer/drawer.json @@ -34,8 +34,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick", "closeClick"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick", "closeClick"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs-joy/modal/modal.json b/docs/translations/api-docs-joy/modal/modal.json index 5d8ebaab771583..db2ea80383753e 100644 --- a/docs/translations/api-docs-joy/modal/modal.json +++ b/docs/translations/api-docs-joy/modal/modal.json @@ -31,8 +31,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick", "closeClick"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick", "closeClick"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs-joy/radio-group/radio-group.json b/docs/translations/api-docs-joy/radio-group/radio-group.json index afe0f0c13d377c..d44307902efd8e 100644 --- a/docs/translations/api-docs-joy/radio-group/radio-group.json +++ b/docs/translations/api-docs-joy/radio-group/radio-group.json @@ -20,7 +20,10 @@ "onChange": { "description": "Callback fired when a radio button is selected.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "orientation": { "description": "The component orientation." }, diff --git a/docs/translations/api-docs-joy/radio/radio.json b/docs/translations/api-docs-joy/radio/radio.json index 114c646ae2eba9..0d8745d36ef454 100644 --- a/docs/translations/api-docs-joy/radio/radio.json +++ b/docs/translations/api-docs-joy/radio/radio.json @@ -22,7 +22,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "overlay": { diff --git a/docs/translations/api-docs-joy/slider/slider.json b/docs/translations/api-docs-joy/slider/slider.json index 33406126b456f8..4ed2e627ceb0c7 100644 --- a/docs/translations/api-docs-joy/slider/slider.json +++ b/docs/translations/api-docs-joy/slider/slider.json @@ -21,13 +21,15 @@ }, "getAriaLabel": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.", - "typeDescriptions": { "index": "The thumb label's index to format." } + "typeDescriptions": { + "index": { "name": "index", "description": "The thumb label's index to format." } + } }, "getAriaValueText": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.", "typeDescriptions": { - "value": "The thumb label's value to format.", - "index": "The thumb label's index to format." + "value": { "name": "value", "description": "The thumb label's value to format." }, + "index": { "name": "index", "description": "The thumb label's index to format." } } }, "isRtl": { @@ -46,16 +48,25 @@ "onChange": { "description": "Callback function that is fired when the slider's value changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event not a change event.", - "value": "The new value.", - "activeThumb": "Index of the currently moved thumb." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "The new value." }, + "activeThumb": { + "name": "activeThumb", + "description": "Index of the currently moved thumb." + } } }, "onChangeCommitted": { "description": "Callback function that is fired when the mouseup is triggered.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "value": "The new value." + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "The new value." } } }, "orientation": { "description": "The component orientation." }, diff --git a/docs/translations/api-docs-joy/snackbar/snackbar.json b/docs/translations/api-docs-joy/snackbar/snackbar.json index 08dfa850a5250c..2b542fdd6b8bb8 100644 --- a/docs/translations/api-docs-joy/snackbar/snackbar.json +++ b/docs/translations/api-docs-joy/snackbar/snackbar.json @@ -29,8 +29,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown"." + } } }, "onUnmount": { "description": "A callback fired when the component is about to be unmounted." }, diff --git a/docs/translations/api-docs-joy/switch/switch.json b/docs/translations/api-docs-joy/switch/switch.json index 30ea5d48c9d5b1..3db0aa1cc5808a 100644 --- a/docs/translations/api-docs-joy/switch/switch.json +++ b/docs/translations/api-docs-joy/switch/switch.json @@ -16,7 +16,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "readOnly": { "description": "If true, the component is read only." }, diff --git a/docs/translations/api-docs-joy/toggle-button-group/toggle-button-group.json b/docs/translations/api-docs-joy/toggle-button-group/toggle-button-group.json index cba62d5f96efe5..2370140a6e53c3 100644 --- a/docs/translations/api-docs-joy/toggle-button-group/toggle-button-group.json +++ b/docs/translations/api-docs-joy/toggle-button-group/toggle-button-group.json @@ -15,8 +15,11 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { + "name": "value", + "description": "of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array." + } } }, "orientation": { "description": "The component orientation." }, diff --git a/docs/translations/api-docs-joy/tooltip/tooltip.json b/docs/translations/api-docs-joy/tooltip/tooltip.json index cf4ec7447fe539..bbde82efcfc27b 100644 --- a/docs/translations/api-docs-joy/tooltip/tooltip.json +++ b/docs/translations/api-docs-joy/tooltip/tooltip.json @@ -51,11 +51,15 @@ }, "onClose": { "description": "Callback fired when the component requests to be closed.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "onOpen": { "description": "Callback fired when the component requests to be open.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown." }, "placement": { "description": "Tooltip placement." }, diff --git a/docs/translations/api-docs/accordion/accordion.json b/docs/translations/api-docs/accordion/accordion.json index 97c6022e970d26..0615adade41a43 100644 --- a/docs/translations/api-docs/accordion/accordion.json +++ b/docs/translations/api-docs/accordion/accordion.json @@ -14,8 +14,14 @@ "onChange": { "description": "Callback fired when the expand/collapse state is changed.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "expanded": "The expanded state of the accordion." + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "expanded": { + "name": "expanded", + "description": "The expanded state of the accordion." + } } }, "slotProps": { "description": "The props used for each slot inside." }, diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json index 5577b02873c7ff..a7860626e04640 100644 --- a/docs/translations/api-docs/alert/alert.json +++ b/docs/translations/api-docs/alert/alert.json @@ -24,7 +24,9 @@ }, "onClose": { "description": "Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon button is displayed that triggers the callback when clicked.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "role": { "description": "The ARIA role attribute of the element." }, "severity": { diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index 4bac5e074055a1..e7a33cf97ac42d 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -51,8 +51,8 @@ "filterOptions": { "description": "A function that determines the filtered options to be rendered on search.", "typeDescriptions": { - "options": "The options to render.", - "state": "The state of the component." + "options": { "name": "options", "description": "The options to render." }, + "state": { "name": "state", "description": "The state of the component." } } }, "filterSelectedOptions": { @@ -67,22 +67,35 @@ }, "getLimitTagsText": { "description": "The label to display when the tags are truncated (limitTags).", - "typeDescriptions": { "more": "The number of truncated tags." } + "typeDescriptions": { + "more": { "name": "more", "description": "The number of truncated tags." } + } }, "getOptionDisabled": { "description": "Used to determine the disabled state for a given option.", - "typeDescriptions": { "option": "The option to test." } + "typeDescriptions": { + "option": { + "name": "option", + "description": "The option to test.", + "argType": "Value", + "argTypeDescription": "The option shape. Will be the same shape as an item of the options." + } + } }, "getOptionKey": { "description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).", - "typeDescriptions": { "option": "The option to get the key for." } + "typeDescriptions": { + "option": { "name": "option", "description": "The option to get the key for." } + } }, "getOptionLabel": { "description": "Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).
If used in free solo mode, it must accept both the type of the options and a string." }, "groupBy": { "description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided.", - "typeDescriptions": { "option": "The Autocomplete option." } + "typeDescriptions": { + "option": { "name": "option", "description": "The Autocomplete option." } + } }, "handleHomeEndKeys": { "description": "If true, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively." @@ -96,7 +109,10 @@ "inputValue": { "description": "The input value." }, "isOptionEqualToValue": { "description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.", - "typeDescriptions": { "option": "The option to test.", "value": "The value to test against." } + "typeDescriptions": { + "option": { "name": "option", "description": "The option to test." }, + "value": { "name": "value", "description": "The value to test against." } + } }, "limitTags": { "description": "The maximum number of tags that will be visible when not focused. Set -1 to disable the limit." @@ -118,37 +134,51 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value of the component.", - "reason": "One of "createOption", "selectOption", "removeOption", "blur" or "clear"." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value of the component." }, + "reason": { + "name": "reason", + "description": "One of "createOption", "selectOption", "removeOption", "blur" or "clear"." + } } }, "onClose": { "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur"." + } } }, "onHighlightChange": { "description": "Callback fired when the highlight option changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "option": "The highlighted option.", - "reason": "Can be: "keyboard", "mouse", "touch"." + "event": { "name": "event", "description": "The event source of the callback." }, + "option": { "name": "option", "description": "The highlighted option." }, + "reason": { + "name": "reason", + "description": "Can be: "keyboard", "mouse", "touch"." + } } }, "onInputChange": { "description": "Callback fired when the input value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value of the text input.", - "reason": "Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"" + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value of the text input." }, + "reason": { + "name": "reason", + "description": "Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"" + } } }, "onOpen": { "description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown." }, "openOnFocus": { "description": "If true, the popup will open on input focus." }, @@ -164,7 +194,7 @@ }, "renderGroup": { "description": "Render the group.", - "typeDescriptions": { "params": "The group to render." } + "typeDescriptions": { "params": { "name": "params", "description": "The group to render." } } }, "renderInput": { "description": "Render the input.
Note: The renderInput prop must return a TextField component or a compatible custom component that correctly forwards InputProps.ref and spreads inputProps. This ensures proper integration with the Autocomplete's internal logic (e.g., focus management and keyboard navigation).
Avoid using components like DatePicker or Select directly, as they may not forward the required props, leading to runtime errors or unexpected behavior." @@ -172,26 +202,41 @@ "renderOption": { "description": "Render the option, use getOptionLabel by default.", "typeDescriptions": { - "props": "The props to apply on the li element.", - "option": "The option to render.", - "state": "The state of each option.", - "ownerState": "The state of the Autocomplete component." + "props": { "name": "props", "description": "The props to apply on the li element." }, + "option": { "name": "option", "description": "The option to render." }, + "state": { "name": "state", "description": "The state of each option." }, + "ownerState": { + "name": "ownerState", + "description": "The state of the Autocomplete component." + } } }, "renderTags": { "description": "Render the selected value when doing multiple selections.", "typeDescriptions": { - "value": "The value provided to the component.", - "getTagProps": "A tag props getter.", - "ownerState": "The state of the Autocomplete component." + "value": { + "name": "value", + "description": "The value provided to the component." + }, + "getTagProps": { "name": "getTagProps", "description": "A tag props getter." }, + "ownerState": { + "name": "ownerState", + "description": "The state of the Autocomplete component." + } } }, "renderValue": { "description": "Renders the selected value(s) as rich content in the input for both single and multiple selections.", "typeDescriptions": { - "value": "The value provided to the component.", - "getItemProps": "The value item props.", - "ownerState": "The state of the Autocomplete component." + "value": { + "name": "value", + "description": "The value provided to the component." + }, + "getItemProps": { "name": "getItemProps", "description": "The value item props." }, + "ownerState": { + "name": "ownerState", + "description": "The state of the Autocomplete component." + } } }, "selectOnFocus": { diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json index 80f2d199412170..25be05228eaf09 100644 --- a/docs/translations/api-docs/avatar-group/avatar-group.json +++ b/docs/translations/api-docs/avatar-group/avatar-group.json @@ -13,8 +13,8 @@ "renderSurplus": { "description": "custom renderer of extraAvatars", "typeDescriptions": { - "surplus": "number of extra avatars", - "React.ReactNode": "custom element to display" + "surplus": { "name": "surplus", "description": "number of extra avatars" }, + "React.ReactNode": { "name": "React.ReactNode", "description": "custom element to display" } } }, "slotProps": { "description": "The props used for each slot inside." }, diff --git a/docs/translations/api-docs/bottom-navigation/bottom-navigation.json b/docs/translations/api-docs/bottom-navigation/bottom-navigation.json index f2242e8318823f..995804ffa1a828 100644 --- a/docs/translations/api-docs/bottom-navigation/bottom-navigation.json +++ b/docs/translations/api-docs/bottom-navigation/bottom-navigation.json @@ -9,8 +9,11 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "value": "We default to the index of the child." + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "We default to the index of the child." } } }, "showLabels": { diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json index 6b26d578efd357..ba01122e4fb705 100644 --- a/docs/translations/api-docs/checkbox/checkbox.json +++ b/docs/translations/api-docs/checkbox/checkbox.json @@ -26,7 +26,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "required": { diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json index ad85e5bee1bd34..ed98ebd9e9c476 100644 --- a/docs/translations/api-docs/dialog/dialog.json +++ b/docs/translations/api-docs/dialog/dialog.json @@ -24,8 +24,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json index 1360692763afc6..64b8c79eeca026 100644 --- a/docs/translations/api-docs/drawer/drawer.json +++ b/docs/translations/api-docs/drawer/drawer.json @@ -12,8 +12,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json index d5700302d0cc58..10309e36fb4ae9 100644 --- a/docs/translations/api-docs/filled-input/filled-input.json +++ b/docs/translations/api-docs/filled-input/filled-input.json @@ -58,7 +58,10 @@ "onChange": { "description": "Callback fired when the value is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "placeholder": { diff --git a/docs/translations/api-docs/form-control-label/form-control-label.json b/docs/translations/api-docs/form-control-label/form-control-label.json index 4e95f4509846fd..ba97bc9e379b6a 100644 --- a/docs/translations/api-docs/form-control-label/form-control-label.json +++ b/docs/translations/api-docs/form-control-label/form-control-label.json @@ -17,7 +17,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "required": { diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json index 80a3485abfebf9..1a9858eb589c9b 100644 --- a/docs/translations/api-docs/input-base/input-base.json +++ b/docs/translations/api-docs/input-base/input-base.json @@ -59,7 +59,10 @@ "onChange": { "description": "Callback fired when the value is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "onInvalid": { diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json index 70c54a95923e09..fb058ac7189e9c 100644 --- a/docs/translations/api-docs/input/input.json +++ b/docs/translations/api-docs/input/input.json @@ -55,7 +55,10 @@ "onChange": { "description": "Callback fired when the value is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "placeholder": { diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json index cf5c9609d5fe73..bc372abc8df8ae 100644 --- a/docs/translations/api-docs/menu/menu.json +++ b/docs/translations/api-docs/menu/menu.json @@ -18,8 +18,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick", "tabKeyDown"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick", "tabKeyDown"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json index 265f61631c91f9..44103262a25a6a 100644 --- a/docs/translations/api-docs/modal/modal.json +++ b/docs/translations/api-docs/modal/modal.json @@ -45,8 +45,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "escapeKeyDown", "backdropClick"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "escapeKeyDown", "backdropClick"." + } } }, "onTransitionEnter": { "description": "A function called when a transition enters." }, diff --git a/docs/translations/api-docs/native-select/native-select.json b/docs/translations/api-docs/native-select/native-select.json index 3f023c8e1ce519..99344b7d720f13 100644 --- a/docs/translations/api-docs/native-select/native-select.json +++ b/docs/translations/api-docs/native-select/native-select.json @@ -15,7 +15,10 @@ "onChange": { "description": "Callback fired when a menu item is selected.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "sx": { diff --git a/docs/translations/api-docs/outlined-input/outlined-input.json b/docs/translations/api-docs/outlined-input/outlined-input.json index 5b19f5d60a34b7..2d8fe943b19ec7 100644 --- a/docs/translations/api-docs/outlined-input/outlined-input.json +++ b/docs/translations/api-docs/outlined-input/outlined-input.json @@ -55,7 +55,10 @@ "onChange": { "description": "Callback fired when the value is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "placeholder": { diff --git a/docs/translations/api-docs/pagination/pagination.json b/docs/translations/api-docs/pagination/pagination.json index 8aa410ae3d0818..ee028613eda523 100644 --- a/docs/translations/api-docs/pagination/pagination.json +++ b/docs/translations/api-docs/pagination/pagination.json @@ -14,9 +14,12 @@ "getItemAriaLabel": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.", "typeDescriptions": { - "type": "The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.", - "page": "The page number to format.", - "selected": "If true, the current page is selected." + "type": { + "name": "type", + "description": "The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'." + }, + "page": { "name": "page", "description": "The page number to format." }, + "selected": { "name": "selected", "description": "If true, the current page is selected." } } }, "hideNextButton": { "description": "If true, hide the next-page button." }, @@ -24,8 +27,8 @@ "onChange": { "description": "Callback fired when the page is changed.", "typeDescriptions": { - "event": "The event source of the callback.", - "page": "The page selected." + "event": { "name": "event", "description": "The event source of the callback." }, + "page": { "name": "page", "description": "The page selected." } } }, "page": { @@ -33,7 +36,9 @@ }, "renderItem": { "description": "Render the item.", - "typeDescriptions": { "params": "The props to spread on a PaginationItem." } + "typeDescriptions": { + "params": { "name": "params", "description": "The props to spread on a PaginationItem." } + } }, "shape": { "description": "The shape of the pagination items." }, "showFirstButton": { "description": "If true, show the first-page button." }, diff --git a/docs/translations/api-docs/radio-group/radio-group.json b/docs/translations/api-docs/radio-group/radio-group.json index e1f6602ea6d945..c72094c46d3477 100644 --- a/docs/translations/api-docs/radio-group/radio-group.json +++ b/docs/translations/api-docs/radio-group/radio-group.json @@ -11,8 +11,11 @@ "onChange": { "description": "Callback fired when a radio button is selected.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The value of the selected radio button. You can pull out the new value by accessing event.target.value (string)." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { + "name": "value", + "description": "The value of the selected radio button. You can pull out the new value by accessing event.target.value (string)." + } } }, "value": { diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json index 8ef0abd650199c..7af7721e13f5cd 100644 --- a/docs/translations/api-docs/radio/radio.json +++ b/docs/translations/api-docs/radio/radio.json @@ -19,7 +19,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "required": { diff --git a/docs/translations/api-docs/rating/rating.json b/docs/translations/api-docs/rating/rating.json index 06dad8dcf4d9ac..60f3835ae89d32 100644 --- a/docs/translations/api-docs/rating/rating.json +++ b/docs/translations/api-docs/rating/rating.json @@ -13,7 +13,9 @@ "emptyLabelText": { "description": "The label read when the rating input is empty." }, "getLabelText": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. This is important for screen reader users.
For localization purposes, you can use the provided translations.", - "typeDescriptions": { "value": "The rating label's value to format." } + "typeDescriptions": { + "value": { "name": "value", "description": "The rating label's value to format." } + } }, "highlightSelectedOnly": { "description": "If true, only the selected icon will be highlighted." @@ -27,15 +29,15 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value." } } }, "onChangeActive": { "description": "Callback function that is fired when the hover state changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "The new value." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "The new value." } } }, "precision": { "description": "The minimum increment value change allowed." }, diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json index 304be9b1476eda..97dd007e7c708b 100644 --- a/docs/translations/api-docs/select/select.json +++ b/docs/translations/api-docs/select/select.json @@ -45,24 +45,39 @@ "onChange": { "description": "Callback fired when a menu item is selected.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event, not a change event, unless the change event is caused by browser autofill.", - "child": "The react element that was selected when native is false (default)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event, not a change event, unless the change event is caused by browser autofill." + }, + "child": { + "name": "child", + "description": "The react element that was selected when native is false (default)." + } } }, "onClose": { "description": "Callback fired when the component requests to be closed. Use it in either controlled (see the open prop), or uncontrolled mode (to detect when the Select collapses).", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "onOpen": { "description": "Callback fired when the component requests to be opened. Use it in either controlled (see the open prop), or uncontrolled mode (to detect when the Select expands).", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown. You can only use it when the native prop is false (default)." }, "renderValue": { "description": "Render the selected value. You can only use it when the native prop is false (default).", - "typeDescriptions": { "value": "The value provided to the component." } + "typeDescriptions": { + "value": { + "name": "value", + "description": "The value provided to the component." + } + } }, "SelectDisplayProps": { "description": "Props applied to the clickable div element." }, "sx": { diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index 58a44f7b8c6e30..4c117c32ffeda7 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -25,13 +25,15 @@ }, "getAriaLabel": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.", - "typeDescriptions": { "index": "The thumb label's index to format." } + "typeDescriptions": { + "index": { "name": "index", "description": "The thumb label's index to format." } + } }, "getAriaValueText": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.", "typeDescriptions": { - "value": "The thumb label's value to format.", - "index": "The thumb label's index to format." + "value": { "name": "value", "description": "The thumb label's value to format." }, + "index": { "name": "index", "description": "The thumb label's index to format." } } }, "marks": { @@ -47,16 +49,25 @@ "onChange": { "description": "Callback function that is fired when the slider's value changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event not a change event.", - "value": "The new value.", - "activeThumb": "Index of the currently moved thumb." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "The new value." }, + "activeThumb": { + "name": "activeThumb", + "description": "Index of the currently moved thumb." + } } }, "onChangeCommitted": { "description": "Callback function that is fired when the mouseup is triggered.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "value": "The new value." + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "The new value." } } }, "orientation": { "description": "The component orientation." }, diff --git a/docs/translations/api-docs/snackbar/snackbar.json b/docs/translations/api-docs/snackbar/snackbar.json index 3d54114c89d633..0ea47232a46197 100644 --- a/docs/translations/api-docs/snackbar/snackbar.json +++ b/docs/translations/api-docs/snackbar/snackbar.json @@ -28,8 +28,11 @@ "onClose": { "description": "Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 63439a21ddefe9..5303b714109973 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -21,15 +21,21 @@ "onClose": { "description": "Callback fired when the component requests to be closed.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "toggle", "blur", "mouseLeave", "escapeKeyDown"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "toggle", "blur", "mouseLeave", "escapeKeyDown"." + } } }, "onOpen": { "description": "Callback fired when the component requests to be open.", "typeDescriptions": { - "event": "The event source of the callback.", - "reason": "Can be: "toggle", "focus", "mouseEnter"." + "event": { "name": "event", "description": "The event source of the callback." }, + "reason": { + "name": "reason", + "description": "Can be: "toggle", "focus", "mouseEnter"." + } } }, "open": { "description": "If true, the component is shown." }, diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 461021c2cf5403..1df125d5c5eab0 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -22,11 +22,15 @@ }, "onClose": { "description": "Callback fired when the component requests to be closed.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "onOpen": { "description": "Callback fired when the component requests to be opened.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown." }, "slotProps": { "description": "The props used for each slot inside." }, diff --git a/docs/translations/api-docs/switch/switch.json b/docs/translations/api-docs/switch/switch.json index a3117bfc402eab..23c40730eb460c 100644 --- a/docs/translations/api-docs/switch/switch.json +++ b/docs/translations/api-docs/switch/switch.json @@ -24,7 +24,10 @@ "onChange": { "description": "Callback fired when the state is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean)." + } } }, "required": { diff --git a/docs/translations/api-docs/table-pagination-actions/table-pagination-actions.json b/docs/translations/api-docs/table-pagination-actions/table-pagination-actions.json index 5972a6baffb15e..a53a76965b6587 100644 --- a/docs/translations/api-docs/table-pagination-actions/table-pagination-actions.json +++ b/docs/translations/api-docs/table-pagination-actions/table-pagination-actions.json @@ -9,7 +9,10 @@ "getItemAriaLabel": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.", "typeDescriptions": { - "type": "The link or button type to format ('first' | 'last' | 'next' | 'previous')." + "type": { + "name": "type", + "description": "The link or button type to format ('first' | 'last' | 'next' | 'previous')." + } } }, "nextIconButtonProps": { diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json index 9fdcc243099e5d..4bd3bed598c565 100644 --- a/docs/translations/api-docs/table-pagination/table-pagination.json +++ b/docs/translations/api-docs/table-pagination/table-pagination.json @@ -18,7 +18,10 @@ "getItemAriaLabel": { "description": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.", "typeDescriptions": { - "type": "The link or button type to format ('first' | 'last' | 'next' | 'previous')." + "type": { + "name": "type", + "description": "The link or button type to format ('first' | 'last' | 'next' | 'previous')." + } } }, "labelDisplayedRows": { @@ -33,13 +36,15 @@ "onPageChange": { "description": "Callback fired when the page is changed.", "typeDescriptions": { - "event": "The event source of the callback.", - "page": "The page selected." + "event": { "name": "event", "description": "The event source of the callback." }, + "page": { "name": "page", "description": "The page selected." } } }, "onRowsPerPageChange": { "description": "Callback fired when the number of rows per page is changed.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "page": { "description": "The zero-based index of the current page." }, "rowsPerPage": { diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json index 2f9ed5cfa38fe0..757ec9f266695e 100644 --- a/docs/translations/api-docs/tabs/tabs.json +++ b/docs/translations/api-docs/tabs/tabs.json @@ -23,8 +23,11 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback. Warning: This is a generic event not a change event.", - "value": "We default to the index of the child (number)" + "event": { + "name": "event", + "description": "The event source of the callback. Warning: This is a generic event not a change event." + }, + "value": { "name": "value", "description": "We default to the index of the child (number)" } } }, "orientation": { "description": "The component orientation (layout flow direction)." }, diff --git a/docs/translations/api-docs/text-field/text-field.json b/docs/translations/api-docs/text-field/text-field.json index d69734ff8af840..91850fec0c80b2 100644 --- a/docs/translations/api-docs/text-field/text-field.json +++ b/docs/translations/api-docs/text-field/text-field.json @@ -53,7 +53,10 @@ "onChange": { "description": "Callback fired when the value is changed.", "typeDescriptions": { - "event": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + "event": { + "name": "event", + "description": "The event source of the callback. You can pull out the new value by accessing event.target.value (string)." + } } }, "placeholder": { diff --git a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json index 4153aff8264e8a..271939f3c1f462 100644 --- a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json +++ b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json @@ -18,8 +18,11 @@ "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { + "name": "value", + "description": "of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array." + } } }, "orientation": { "description": "The component orientation (layout flow direction)." }, diff --git a/docs/translations/api-docs/toggle-button/toggle-button.json b/docs/translations/api-docs/toggle-button/toggle-button.json index f42e1b7b8f3fb8..df629df944e0cf 100644 --- a/docs/translations/api-docs/toggle-button/toggle-button.json +++ b/docs/translations/api-docs/toggle-button/toggle-button.json @@ -19,15 +19,15 @@ "onChange": { "description": "Callback fired when the state changes.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "of the selected button." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "of the selected button." } } }, "onClick": { "description": "Callback fired when the button is clicked.", "typeDescriptions": { - "event": "The event source of the callback.", - "value": "of the selected button." + "event": { "name": "event", "description": "The event source of the callback." }, + "value": { "name": "value", "description": "of the selected button." } } }, "selected": { diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json index 4b8e1c89648827..9f006581b9ff92 100644 --- a/docs/translations/api-docs/tooltip/tooltip.json +++ b/docs/translations/api-docs/tooltip/tooltip.json @@ -40,11 +40,15 @@ }, "onClose": { "description": "Callback fired when the component requests to be closed.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "onOpen": { "description": "Callback fired when the component requests to be open.", - "typeDescriptions": { "event": "The event source of the callback." } + "typeDescriptions": { + "event": { "name": "event", "description": "The event source of the callback." } + } }, "open": { "description": "If true, the component is shown." }, "placement": { "description": "Tooltip placement." }, diff --git a/package.json b/package.json index b56e0859f4a229..7de294e72a192b 100644 --- a/package.json +++ b/package.json @@ -123,9 +123,9 @@ "@mui-internal/api-docs-builder": "workspace:^", "@mui-internal/api-docs-builder-core": "workspace:^", "@mui/internal-babel-plugin-minify-errors": "^2.0.8-canary.3", - "@mui/internal-babel-plugin-resolve-imports": "^2.0.7-canary.4", - "@mui/internal-bundle-size-checker": "^1.0.9-canary.3", - "@mui/internal-code-infra": "0.0.2-canary.14", + "@mui/internal-babel-plugin-resolve-imports": "^2.0.7-canary.6", + "@mui/internal-bundle-size-checker": "^1.0.9-canary.4", + "@mui/internal-code-infra": "0.0.2-canary.16", "@mui/internal-docs-utils": "workspace:^", "@mui/internal-scripts": "workspace:^", "@mui/internal-test-utils": "workspace:^", diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index d02f449cad1b99..a13bcccc6ca505 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -31,6 +31,7 @@ import { ComponentApiContent, ComponentReactApi, ParsedProperty, + TypeDescriptions, } from '../types/ApiBuilder.types'; import { Slot, ComponentInfo, ApiItemDescription } from '../types/utils.types'; import extractInfoFromEnum from '../utils/extractInfoFromEnum'; @@ -434,10 +435,17 @@ const attachTranslations = ( generatePropDescription(prop, propName); // description = renderMarkdownInline(`${description}`); - const typeDescriptions: { [t: string]: string } = {}; - (signatureArgs || []).concat(signatureReturn || []).forEach(({ name, description }) => { - typeDescriptions[name] = renderMarkdown(description); - }); + const typeDescriptions: TypeDescriptions = {}; + (signatureArgs || []) + .concat(signatureReturn || []) + .forEach(({ name, description, argType, argTypeDescription }) => { + typeDescriptions[name] = { + name, + description: renderMarkdown(description), + argType, + argTypeDescription: argTypeDescription ? renderMarkdown(argTypeDescription) : undefined, + }; + }); translations.propDescriptions[propName] = { description: renderMarkdown(jsDocText), diff --git a/packages/api-docs-builder/types/ApiBuilder.types.ts b/packages/api-docs-builder/types/ApiBuilder.types.ts index 37f636d37b7e9a..3b9d8ab46901a1 100644 --- a/packages/api-docs-builder/types/ApiBuilder.types.ts +++ b/packages/api-docs-builder/types/ApiBuilder.types.ts @@ -61,11 +61,22 @@ export interface PropsTranslations { dataAttributesDescriptions?: { [key: string]: string }; } +export interface TypeDescription { + name: string; + description: string; + argType?: string; + argTypeDescription?: string; +} + +export interface TypeDescriptions { + [t: string]: TypeDescription; +} + interface PropDescription { description: string; requiresRef?: boolean; deprecated?: string; - typeDescriptions?: { [t: string]: string }; + typeDescriptions?: { [t: string]: TypeDescription }; seeMoreText?: string; } diff --git a/packages/api-docs-builder/utils/generatePropDescription.ts b/packages/api-docs-builder/utils/generatePropDescription.ts index fd4c284b1c37d7..f3e7455535ab08 100644 --- a/packages/api-docs-builder/utils/generatePropDescription.ts +++ b/packages/api-docs-builder/utils/generatePropDescription.ts @@ -72,6 +72,11 @@ function getDeprecatedInfo(type: PropTypeDescriptor) { return false; } +interface PropTemplateDescriptor { + key: string; + description: string; +} + export default function generatePropDescription( prop: DescribeablePropDescriptor, propName: string, @@ -80,7 +85,13 @@ export default function generatePropDescription( seeMore?: SeeMore; jsDocText: string; signature?: string; - signatureArgs?: { name: string; description: string }[]; + generics?: { name: string; description: string }[]; + signatureArgs?: { + name: string; + description: string; + argType?: string; + argTypeDescription?: string; + }[]; signatureReturn?: { name: string; description: string }; requiresRef?: boolean; } { @@ -123,6 +134,16 @@ export default function generatePropDescription( let signature; let signatureArgs; let signatureReturn; + const generics = annotation.tags + .filter((tag) => tag.title === 'template') + .map((template) => { + const [key, description] = template.description?.split(/(?<=^\S+)\s/) || []; + if (!description) { + return null; + } + return { key, description }; + }) + .filter(Boolean) as PropTemplateDescriptor[]; if (type.name === 'func' && (parsedArgs.length > 0 || parsedReturns !== undefined)) { parsedReturns = parsedReturns ?? { type: { type: 'VoidLiteral' } }; @@ -158,7 +179,17 @@ export default function generatePropDescription( signatureArgs = parsedArgs .filter((tag) => tag.description && tag.name) - .map((tag) => ({ name: tag.name!, description: tag.description! })); + .map((tag) => { + const generic = generics.find( + (g) => tag.type?.type === 'NameExpression' && tag.type?.name === g.key, + ); + return { + name: tag.name!, + description: tag.description!, + argType: generic?.key, + argTypeDescription: generic?.description, + }; + }); if (parsedReturns.description) { signatureReturn = { name: returnTypeName, description: parsedReturns.description }; diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 799427f3cf23cc..07d04b4f643934 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -584,7 +584,7 @@ export function getThemedComponents(): ThemeOptions { '&:active': { backgroundColor: (theme.vars || theme).palette.primaryDark[800], }, - '&.Mui-disabled': { + '&.Mui-disabled:not(.MuiButton-loading)': { color: theme.palette.grey[500], }, }), @@ -614,7 +614,7 @@ export function getThemedComponents(): ThemeOptions { '&:active': { backgroundColor: alpha(theme.palette.primary[900], 0.3), }, - '&.Mui-disabled': { + '&.Mui-disabled:not(.MuiButton-loading)': { background: 'none', backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), color: theme.palette.grey[500], @@ -645,7 +645,7 @@ export function getThemedComponents(): ThemeOptions { borderColor: theme.palette.grey[400], }, ...theme.applyDarkStyles({ - '&.Mui-disabled': { + '&.Mui-disabled:not(.MuiButton-loading)': { color: theme.palette.grey[400], textShadow: 'none', borderColor: theme.palette.grey[800], @@ -676,7 +676,7 @@ export function getThemedComponents(): ThemeOptions { borderColor: theme.palette.grey[400], }, ...theme.applyDarkStyles({ - '&.Mui-disabled': { + '&.Mui-disabled:not(.MuiButton-loading)': { color: theme.palette.grey[400], textShadow: 'none', borderColor: theme.palette.grey[800], @@ -721,7 +721,7 @@ export function getThemedComponents(): ThemeOptions { '&:active': { backgroundColor: alpha(theme.palette.primary[900], 0.1), }, - '&.Mui-disabled': { + '&.Mui-disabled:not(.MuiButton-loading)': { color: theme.palette.grey[500], }, }), diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 17959e4cb68e28..03e1de64aecc45 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -956,6 +956,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * Used to determine the disabled state for a given option. * * @param {Value} option The option to test. + * @template Value The option shape. Will be the same shape as an item of the options. * @returns {boolean} */ getOptionDisabled: PropTypes.func, diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts index 6e103f01f426c9..968339bc9c3510 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts @@ -153,6 +153,7 @@ export interface UseAutocompleteProps< * Used to determine the disabled state for a given option. * * @param {Value} option The option to test. + * @template Value The option shape. Will be the same shape as an item of the options. * @returns {boolean} */ getOptionDisabled?: (option: Value) => boolean; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd4c0149752c31..8d10065bc85c73 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -89,14 +89,14 @@ importers: specifier: ^2.0.8-canary.3 version: 2.0.8-canary.3(@babel/core@7.28.0) '@mui/internal-babel-plugin-resolve-imports': - specifier: ^2.0.7-canary.4 - version: 2.0.7-canary.4(@babel/core@7.28.0) + specifier: ^2.0.7-canary.6 + version: 2.0.7-canary.6(@babel/core@7.28.0) '@mui/internal-bundle-size-checker': - specifier: ^1.0.9-canary.3 - version: 1.0.9-canary.3(@types/node@20.19.7)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.0)(terser@5.39.0)(tsx@4.20.3)(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.100.1))(yaml@2.8.0) + specifier: ^1.0.9-canary.4 + version: 1.0.9-canary.4(@types/node@20.19.7)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.0)(terser@5.39.0)(tsx@4.20.3)(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.100.1))(yaml@2.8.0) '@mui/internal-code-infra': - specifier: 0.0.2-canary.14 - version: 0.0.2-canary.14(@typescript-eslint/parser@8.35.1(eslint@9.30.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.30.0(jiti@2.4.2))(prettier@3.6.2)(typescript@5.8.3) + specifier: 0.0.2-canary.16 + version: 0.0.2-canary.16(@typescript-eslint/parser@8.35.1(eslint@9.30.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.30.0(jiti@2.4.2))(prettier@3.6.2)(typescript@5.8.3) '@mui/internal-docs-utils': specifier: workspace:^ version: link:packages-internal/docs-utils @@ -4174,17 +4174,17 @@ packages: peerDependencies: '@babel/core': ^7.28.0 - '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.4': - resolution: {integrity: sha512-hnDsND1ZHBlqVQWDA7+9ri/Rrx0hOzad07pTTndoQdmUCTmiaBryJyldM49r+fW/SBnQ2Suw0RmfatMxdKEUww==} + '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.6': + resolution: {integrity: sha512-iI//OCmE5K17Hfp4EpjK4KplZR8UQXNEbf+VOaZPqXyOXGgATuW+VPF0H86JafvesPyNt67NF2mfZByn/OXolQ==} peerDependencies: '@babel/core': ^7.28.0 - '@mui/internal-bundle-size-checker@1.0.9-canary.3': - resolution: {integrity: sha512-xUO1GQDl6xbFdQJMYOgKMdxD8duz/HRVO9FfOravWvHGqvfErFo9+mcS0Q99czlmViSol05CVqOOBdjZwFy+OQ==} + '@mui/internal-bundle-size-checker@1.0.9-canary.4': + resolution: {integrity: sha512-yLZJZUK6bP/Y9Guw/yLnk/v+FKRR9mgLVicS+C4mkrf96Efeh8fVNz2XX6th3H3VYQyKDoBObRqK5Ayby5MSqw==} hasBin: true - '@mui/internal-code-infra@0.0.2-canary.14': - resolution: {integrity: sha512-sjRvA0kTczJLg5bEv67ZHobydyhNzx0EOdxfHce5AjGHQS6Z00QMmSxAcMeek5gD8kKykFSFLmFERL1zBuE8tQ==} + '@mui/internal-code-infra@0.0.2-canary.16': + resolution: {integrity: sha512-7o/HId9jlrd/mW4GmAvMfAEvtFLkxXP3VWGflAK1XOHkjdCWjl60cvCuEZNmEvBD6G0oOYe3W5hilNCro9D34g==} hasBin: true peerDependencies: eslint: ^9.0.0 @@ -17134,18 +17134,19 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.4(@babel/core@7.28.0)': + '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.6(@babel/core@7.28.0)': dependencies: '@babel/core': 7.28.0 resolve: 1.22.10 - '@mui/internal-bundle-size-checker@1.0.9-canary.3(@types/node@20.19.7)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.0)(terser@5.39.0)(tsx@4.20.3)(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.100.1))(yaml@2.8.0)': + '@mui/internal-bundle-size-checker@1.0.9-canary.4(@types/node@20.19.7)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.0)(terser@5.39.0)(tsx@4.20.3)(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.100.1))(yaml@2.8.0)': dependencies: '@aws-sdk/client-s3': 3.787.0 '@aws-sdk/credential-providers': 3.787.0 '@babel/core': 7.28.0 '@babel/preset-react': 7.27.1(@babel/core@7.28.0) '@babel/preset-typescript': 7.27.1(@babel/core@7.28.0) + '@octokit/rest': 22.0.0 babel-loader: 10.0.0(@babel/core@7.28.0)(webpack@5.100.1) chalk: 5.4.1 compression-webpack-plugin: 10.0.0(webpack@5.100.1) @@ -17154,6 +17155,7 @@ snapshots: execa: 7.2.0 fast-glob: 3.3.3 file-loader: 6.2.0(webpack@5.100.1) + git-url-parse: 16.1.0 micromatch: 4.0.8 piscina: 4.9.2 rollup-plugin-visualizer: 6.0.1(rollup@4.40.0) @@ -17186,7 +17188,7 @@ snapshots: - webpack-cli - yaml - '@mui/internal-code-infra@0.0.2-canary.14(@typescript-eslint/parser@8.35.1(eslint@9.30.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.30.0(jiti@2.4.2))(prettier@3.6.2)(typescript@5.8.3)': + '@mui/internal-code-infra@0.0.2-canary.16(@typescript-eslint/parser@8.35.1(eslint@9.30.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-webpack@0.13.10)(eslint@9.30.0(jiti@2.4.2))(prettier@3.6.2)(typescript@5.8.3)': dependencies: '@argos-ci/core': 3.2.0 '@eslint/compat': 1.3.1(eslint@9.30.0(jiti@2.4.2)) diff --git a/scripts/build.mjs b/scripts/build.mjs index c5c5a08872fbdf..a520e0e0dc2dc0 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -21,7 +21,15 @@ const bundleTypes = { }; async function run(argv) { - const { bundle, largeFiles, outDir: outDirBase, verbose, cjsDir } = argv; + const { + bundle, + largeFiles, + outDir: outDirBase, + verbose, + cjsDir, + babelIgnore, + babelFlag: babelFlags, + } = argv; if (!validBundles.includes(bundle)) { throw new TypeError( @@ -32,7 +40,15 @@ async function run(argv) { const packageJsonPath = path.resolve('./package.json'); const packageJson = JSON.parse(await fs.readFile(packageJsonPath, { encoding: 'utf8' })); - const babelRuntimeVersion = packageJson.dependencies?.['@babel/runtime']; + let babelRuntimeVersion = packageJson.dependencies['@babel/runtime']; + if (babelRuntimeVersion === 'catalog:') { + // resolve the version from the given package + // outputs the pnpm-workspace.yaml config as json + const { stdout: configStdout } = await exec('pnpm config list --json'); + const pnpmWorkspaceConfig = JSON.parse(configStdout); + babelRuntimeVersion = pnpmWorkspaceConfig.catalog['@babel/runtime']; + } + if (!babelRuntimeVersion) { throw new Error( 'package.json needs to have a dependency on `@babel/runtime` when building with `@babel/plugin-transform-runtime`.', @@ -46,11 +62,13 @@ async function run(argv) { '**/*.test.js', '**/*.test.ts', '**/*.test.tsx', + '**/*.spec.js', '**/*.spec.ts', '**/*.spec.tsx', '**/*.d.ts', '**/*.test/*.*', '**/test-cases/*.*', + ...babelIgnore, ]; const outFileExtension = '.js'; @@ -68,7 +86,7 @@ async function run(argv) { MUI_BUILD_VERBOSE: verbose, MUI_BABEL_RUNTIME_VERSION: babelRuntimeVersion, MUI_OUT_FILE_EXTENSION: outFileExtension, - ...(await getVersionEnvVariables(packageJson)), + ...getVersionEnvVariables(packageJson), }; const babelArgs = [ @@ -82,6 +100,7 @@ async function run(argv) { '--ignore', // Need to put these patterns in quotes otherwise they might be evaluated by the used terminal. `"${ignore.join('","')}"`, + ...babelFlags, ]; if (outFileExtension !== '.js') { @@ -153,7 +172,14 @@ yargs(process.argv.slice(2)) description: 'The directory to copy the cjs files to.', }) .option('out-dir', { default: './build', type: 'string' }) - .option('verbose', { type: 'boolean' }); + .option('babel-ignore', { type: 'string', array: true, default: [] }) + .option('verbose', { type: 'boolean' }) + .option('babel-flag', { + type: 'string', + array: true, + default: [], + description: 'Additional flags to pass to babel cli.', + }); }, handler: run, }) diff --git a/scripts/copyFiles.mjs b/scripts/copyFiles.mjs index eb827d54b02a8a..ad6de871f8e982 100644 --- a/scripts/copyFiles.mjs +++ b/scripts/copyFiles.mjs @@ -34,16 +34,28 @@ async function run() { const extraFiles = process.argv.slice(2); try { const packageData = await createPackageFile(true); + const defaultFiles = ['README.md']; - let changlogPath; - if (await fileExists(path.join(packagePath, './CHANGELOG.md'))) { - changlogPath = './CHANGELOG.md'; - } else { - changlogPath = '../../CHANGELOG.md'; - } + const packageOrRootFiles = [ + ['LICENSE', '../../LICENSE'], + ['CHANGELOG.md', '../../CHANGELOG.md'], + ]; + + await Promise.all( + packageOrRootFiles.map(async (files) => { + for (const file of files) { + const sourcePath = path.join(packagePath, file); + // eslint-disable-next-line no-await-in-loop + if (await fileExists(sourcePath)) { + defaultFiles.push(file); + break; + } + } + }), + ); await Promise.all( - ['./README.md', changlogPath, '../../LICENSE', ...extraFiles].map(async (file) => { + [...defaultFiles, ...extraFiles].map(async (file) => { const [sourcePath, targetPath] = file.split(':'); await includeFileInBuild(sourcePath, targetPath); }),