Merge branch 'master' into scale-axes

Author: alexfauquette

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  code-infra: https://raw.githubusercontent.com/mui/mui-public/18225f60a2186e3eb12f1c1ecee4db945baecca2/.circleci/orbs/code-infra.yml
+  code-infra: https://raw.githubusercontent.com/mui/mui-public/35aa25ced2bc6ff4f6c5266b073a0a725a362785/.circleci/orbs/code-infra.yml
 
 parameters:
   browserstack-force:
@@ -57,6 +57,7 @@ default-job: &default-job
     BASE_BRANCH: master
   working_directory: /tmp/mui
   executor: code-infra/mui-node
+  resource_class: medium
 # CircleCI has disabled the cache across forks for security reasons.
 # Following their official statement, it was a quick solution, they
 # are working on providing this feature back with appropriate security measures.
@@ -276,7 +277,6 @@ jobs:
     executor:
       name: code-infra/mui-node-browser
       playwright-img-version: v1.60.0-noble
-    resource_class: medium
     steps:
       - checkout
       - run:

docs/data/charts/components/components.md

@@ -91,6 +91,114 @@ For example, you can use `useLineSeries()` to obtain the series of a Line Chart
 
 {{"demo": "SeriesDemo.js"}}
 
+## Custom slot props with TypeScript
+
+If the custom component requires additional props to work properly, TypeScript may throw type errors.
+To solve these type errors, use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to enhance the props interface.
+
+The naming of overridable interfaces uses a pattern like this:
+
+```js
+`${slotNameInPascalCase}PropsOverrides`;
+```
+
+For example, for the `tooltip` slot, the interface name is `TooltipPropsOverrides`.
+
+These files list every overridable interface for the Charts packages:
+
+- [`@mui/x-charts`](https://github.com/mui/mui-x/blob/-/packages/x-charts/src/models/chartsSlotsComponentsProps.ts)
+- [`@mui/x-charts-pro`](https://github.com/mui/mui-x/blob/-/packages/x-charts-pro/src/models/chartsSlotsComponentsPropsPro.ts) (pro-only slots: heatmap `cell`, funnel sections, pro toolbar icons, pro base slots)
+- [`@mui/x-charts-premium`](https://github.com/mui/mui-x/blob/-/packages/x-charts-premium/src/models/chartsSlotsComponentsPropsPremium.ts) (premium-only slots: `radialLineHighlight`)
+
+<codeblock storageKey="pricing-plan">
+
+```tsx Community
+// augment the props for the tooltip slot
+declare module '@mui/x-charts' {
+  interface TooltipPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<LineChart
+  series={[{ data: [1, 2, 3] }]}
+  slots={{
+    // custom component passed to the tooltip slot
+    tooltip: CustomTooltip,
+  }}
+  slotProps={{
+    tooltip: {
+      // props used by CustomTooltip
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+/>;
+```
+
+```tsx Pro
+// augment the props for a pro-only slot (heatmap cell)
+declare module '@mui/x-charts-pro' {
+  interface CellPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<Heatmap
+  xAxis={[{ data: [1, 2, 3] }]}
+  yAxis={[{ data: [1, 2, 3] }]}
+  series={[{ data: [[0, 0, 1]] }]}
+  slots={{
+    // custom component passed to the cell slot
+    cell: CustomHeatmapCell,
+  }}
+  slotProps={{
+    cell: {
+      // props used by CustomHeatmapCell
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+/>;
+```
+
+```tsx Premium
+// augment the props for a premium-only slot (radial line highlight)
+declare module '@mui/x-charts-premium' {
+  interface RadialLineHighlightPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<RadialLineChart
+  series={[{ data: [1, 2, 3] }]}
+  radiusAxis={[{ data: [1, 2, 3] }]}
+  rotationAxis={[{ data: [0, 120, 240] }]}
+  slots={{
+    // custom component passed to the radialLineHighlight slot
+    radialLineHighlight: CustomRadialLineHighlight,
+  }}
+  slotProps={{
+    radialLineHighlight: {
+      // props used by CustomRadialLineHighlight
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+/>;
+```
+
+</codeblock>
+
+:::info
+Augmentations always target the module where the interface is **originally declared**.
+The Pro and Premium tabs above augment `@mui/x-charts-pro` and `@mui/x-charts-premium` because the example slots (`cell`, `radialLineHighlight`) are declared in those packages.
+Slots shared across tiers (such as `tooltip`, `legend`, `toolbar`) are declared in `@mui/x-charts` — augment them via `declare module '@mui/x-charts'` regardless of which chart you use.
+:::
+
 ## HTML components
 
 Use the `ChartsDataProvider` to access chart data from any component.

docs/data/chat/ai-and-agents/reasoning/reasoning.md

@@ -108,7 +108,7 @@ const renderers: ChatPartRendererMap = {
     <Accordion defaultExpanded={false} sx={{ my: 1, bgcolor: 'action.hover' }}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Typography variant="caption" color="text.secondary">
-          {part.state === 'streaming' ? 'Thinking...' : 'Reasoning'}
+          {part.state === 'streaming' ? 'Thinking…' : 'Reasoning'}
         </Typography>
       </AccordionSummary>
       <AccordionDetails>
@@ -137,7 +137,7 @@ function ReasoningPart({ part, showReasoning }) {
     <div style={{ opacity: 0.7, fontSize: '0.85em', fontStyle: 'italic' }}>
       <details>
         <summary>
-          {part.state === 'streaming' ? 'Thinking...' : 'Show reasoning'}
+          {part.state === 'streaming' ? 'Thinking…' : 'Show reasoning'}
         </summary>
         <p>{part.text}</p>
       </details>

docs/data/chat/ai-and-agents/step-tracking/step-tracking.md

@@ -72,7 +72,7 @@ const adapter: ChatAdapter = {
         controller.enqueue({
           type: 'tool-output-available',
           toolCallId: 'call-1',
-          output: { results: ['...'] },
+          output: { results: ['…'] },
         });
         controller.enqueue({ type: 'finish-step' });
 
@@ -87,12 +87,12 @@ const adapter: ChatAdapter = {
           type: 'tool-input-available',
           toolCallId: 'call-2',
           toolName: 'analyze',
-          input: { data: '...' },
+          input: { data: '…' },
         });
         controller.enqueue({
           type: 'tool-output-available',
           toolCallId: 'call-2',
-          output: { summary: '...' },
+          output: { summary: '…' },
         });
         controller.enqueue({ type: 'finish-step' });
 
@@ -102,7 +102,7 @@ const adapter: ChatAdapter = {
         controller.enqueue({
           type: 'text-delta',
           id: 'text-1',
-          delta: 'Based on my research, here is the answer...',
+          delta: 'Based on my research, here is the answer…',
         });
         controller.enqueue({ type: 'text-end', id: 'text-1' });
         controller.enqueue({ type: 'finish-step' });
@@ -199,7 +199,7 @@ After streaming, the message's `parts` array contains `step-start` entries inter
     },
   }, // Step 2 content
   { type: 'step-start' }, // Step 3 delimiter
-  { type: 'text', text: 'Final answer...' }, // Step 3 content
+  { type: 'text', text: 'Final answer…' }, // Step 3 content
 ];
 ```
 

docs/data/chat/backend/real-time-adapters/real-time-adapters.md

@@ -187,7 +187,7 @@ function TypingIndicator() {
 
   if (typingUserIds.length === 0) return null;
 
-  return <span>{typingUserIds.length} user(s) typing...</span>;
+  return <span>{typingUserIds.length} user(s) typing…</span>;
 }
 ```
 

docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.js

@@ -208,7 +208,7 @@ function AdvancedMetrics() {
           fullWidth
           value={composer.value}
           onChange={(event) => composer.setValue(event.target.value)}
-          placeholder="Type a message..."
+          placeholder="Type a message…"
         />
         <Button
           variant="contained"

docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx

@@ -209,7 +209,7 @@ function AdvancedMetrics() {
           fullWidth
           value={composer.value}
           onChange={(event) => composer.setValue(event.target.value)}
-          placeholder="Type a message..."
+          placeholder="Type a message…"
         />
         <Button
           variant="contained"

docs/data/chat/core/hooks/hooks.md

@@ -177,8 +177,8 @@ function StatusBar() {
 
   return (
     <div>
-      {isStreaming && <span>Assistant is responding...</span>}
-      {typingUserIds.length > 0 && <span>{typingUserIds.length} typing...</span>}
+      {isStreaming && <span>Assistant is responding…</span>}
+      {typingUserIds.length > 0 && <span>{typingUserIds.length} typing…</span>}
       {error && <span>{error.message}</span>}
     </div>
   );

docs/data/chat/core/realtime/realtime.md

@@ -91,7 +91,7 @@ function TypingIndicator() {
 
   if (typingUserIds.length === 0) return null;
 
-  return <span>{typingUserIds.length} user(s) typing...</span>;
+  return <span>{typingUserIds.length} user(s) typing…</span>;
 }
 ```
 

docs/data/chat/customization/localization/localization.md

@@ -76,7 +76,7 @@ This is useful when building custom slot components that need to access localize
 | `messageEditedLabel`                   | `"Edited"`               | Edited message indicator          |
 | `messageDeletedLabel`                  | `"Deleted"`              | Deleted message indicator         |
 | `messageReasoningLabel`                | `"Reasoning"`            | Reasoning part label              |
-| `messageReasoningStreamingLabel`       | `"Thinking..."`          | Reasoning part streaming label    |
+| `messageReasoningStreamingLabel`       | `"Thinking…"`            | Reasoning part streaming label    |
 | `messageToolInputLabel`                | `"Input"`                | Tool input label                  |
 | `messageToolOutputLabel`               | `"Output"`               | Tool output label                 |
 | `messageToolApproveButtonLabel`        | `"Approve"`              | Tool approval button              |
@@ -89,7 +89,7 @@ This is useful when building custom slot components that need to access localize
 | `scrollToBottomLabel`                  | `"Scroll to bottom"`     | Scroll-to-bottom affordance label |
 | `threadNoMessagesLabel`                | `"No messages yet"`      | Empty thread state                |
 | `genericErrorLabel`                    | `"Something went wrong"` | Generic error message             |
-| `loadingLabel`                         | `"Loading..."`           | Loading state label               |
+| `loadingLabel`                         | `"Loading…"`             | Loading state label               |
 | `suggestionsLabel`                     | `"Suggested prompts"`    | Suggestions section label         |
 | `messageListLabel`                     | `"Message log"`          | Message list aria-label           |
 | `messageLabel`                         | `"Message"`              | Individual message aria-label     |
@@ -98,14 +98,14 @@ This is useful when building custom slot components that need to access localize
 
 These keys accept parameters and return formatted strings:
 
-| Key                            | Signature                                    | Default behavior                                               |
-| :----------------------------- | :------------------------------------------- | :------------------------------------------------------------- |
-| `messageStatusLabel`           | `(status: ChatMessageStatus) => string`      | Maps status to human-readable label                            |
-| `toolStateLabel`               | `(state: ChatToolInvocationState) => string` | Maps tool state to label (for example, "Running...", "Failed") |
-| `messageTimestampLabel`        | `(dateTime: string) => string`               | Formats to `HH:MM` using `toLocaleTimeString`                  |
-| `conversationTimestampLabel`   | `(dateTime: string) => string`               | Time for today, `MMM DD` for older dates                       |
-| `typingIndicatorLabel`         | `(users: ChatLocaleTypingUser[]) => string`  | `"Alice is typing"` or `"Alice, Bob are typing"`               |
-| `scrollToBottomWithCountLabel` | `(unseenCount: number) => string`            | `"Scroll to bottom, N new messages"`                           |
+| Key                            | Signature                                    | Default behavior                                             |
+| :----------------------------- | :------------------------------------------- | :----------------------------------------------------------- |
+| `messageStatusLabel`           | `(status: ChatMessageStatus) => string`      | Maps status to human-readable label                          |
+| `toolStateLabel`               | `(state: ChatToolInvocationState) => string` | Maps tool state to label (for example, "Running…", "Failed") |
+| `messageTimestampLabel`        | `(dateTime: string) => string`               | Formats to `HH:MM` using `toLocaleTimeString`                |
+| `conversationTimestampLabel`   | `(dateTime: string) => string`               | Time for today, `MMM DD` for older dates                     |
+| `typingIndicatorLabel`         | `(users: ChatLocaleTypingUser[]) => string`  | `"Alice is typing"` or `"Alice, Bob are typing"`             |
+| `scrollToBottomWithCountLabel` | `(unseenCount: number) => string`            | `"Scroll to bottom, N new messages"`                         |
 
 ### Message status labels
 
@@ -127,10 +127,10 @@ The `toolStateLabel` function maps from `ChatToolInvocationState`:
 
 | State                | Default label         |
 | :------------------- | :-------------------- |
-| `input-streaming`    | `"Running..."`        |
-| `input-available`    | `"Running..."`        |
+| `input-streaming`    | `"Running…"`          |
+| `input-available`    | `"Running…"`          |
 | `approval-requested` | `"Awaiting approval"` |
-| `approval-responded` | `"Running..."`        |
+| `approval-responded` | `"Running…"`          |
 | `output-available`   | `"Completed"`         |
 | `output-error`       | `"Failed"`            |
 | `output-denied`      | `"Denied"`            |
@@ -145,13 +145,13 @@ const frenchLocale = {
   scrollToBottomLabel: 'Aller en bas',
   threadNoMessagesLabel: 'Aucun message',
   genericErrorLabel: 'Une erreur est survenue',
-  loadingLabel: 'Chargement...',
+  loadingLabel: 'Chargement…',
   retryButtonLabel: 'R\u00e9essayer',
   unreadMarkerLabel: 'Nouveaux messages',
   typingIndicatorLabel: (users) => {
     const names = users.map((u) => u.displayName ?? u.id).join(', ');
-    if (users.length === 1) return `${names} \u00e9crit...`;
-    return `${names} \u00e9crivent...`;
+    if (users.length === 1) return `${names} \u00e9crit…`;
+    return `${names} \u00e9crivent…`;
   },
   messageTimestampLabel: (dateTime) => {
     const d = new Date(dateTime);