@mui/x-internals 8.4.0 → 8.5.0

package/CHANGELOG.md

@@ -5,6 +5,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.0
+
+_May 29, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add support for exporting `RadarChartPro`, `FunnelChart` and `Heatmap` as image and PDF.
+- 📊 `RadarChart` is now stable.
+
+Special thanks go out to the community members for their valuable contributions:
+@xBlizZer, @sai6855, @alisasanib.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.0`
+
+- [DataGrid] Avoid ResizeObserver loop error (#17984) @cherniavskii
+- [DataGrid] Fix column management `toggleColumn` event type (#18023) @KenanYusuf
+- [DataGrid] Remove unnecessary `any` type (#17979) @sai6855
+
+#### `@mui/x-data-grid-pro@8.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.0`, plus:
+
+- [DataGridPro] Allow multi sorting without modifier key (#17925) @cherniavskii
+- [DataGridPro] Row reordering icon improvements (#17947) @KenanYusuf
+- [DataGridPro] Fix pinned columns order in column management (#17950) @alisasanib
+
+#### `@mui/x-data-grid-premium@8.5.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.0`, plus:
+
+- [DataGridPremium] Export `GridApiPremium` type (#18037) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.0`, plus:
+
+- [DateRangePicker] Allow to override the format in the field (#17972) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.5.0`
+
+- [charts] Add `render` prop to charts toolbar components (#17649) @bernardobelchior
+- [charts] Add configurable slots to toolbar (#17712) @bernardobelchior
+- [charts] Export `useFunnelSeries` and `useRadarSeries` (#18034) @JCQuintas
+- [charts] Expose `ChartApi` through context (#18004) @bernardobelchior
+- [charts] Mark Radar chart as stable (#17946) @alexfauquette
+- [charts] Only update store if interaction item is different (#17851) @bernardobelchior
+- [charts] Reuse shared date utils (#18014) @JCQuintas
+- [charts] Use Map for string cache instead of object (#17982) @bernardobelchior
+- [charts] Fix Population pyramid demo (#17987) @oliviertassinari
+
+#### `@mui/x-charts-pro@8.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.0`, plus:
+
+- [charts-pro] Add range selection to zoom slider (#17949) @bernardobelchior
+- [charts-pro] Allow configuring zoom slider tooltip (#18030) @bernardobelchior
+- [charts-pro] Allow exporting a funnel chart (#17957) @bernardobelchior
+- [charts-pro] Allow exporting a heatmap chart (#17916) @bernardobelchior
+- [charts-pro] Allow exporting a radar chart (#17968) @bernardobelchior
+- [charts-pro] Always show both zoom slider tooltips (#18027) @bernardobelchior
+- [charts-pro] Show zoom slider tooltip when selecting range (#18028) @bernardobelchior
+- [charts-pro] Split `ChartAxisZoomSlider` into smaller files (#18011) @bernardobelchior
+- [charts-pro] Update zoom slider range selection cursor (#17977) @bernardobelchior
+- [charts-pro] Add support for Heatmap legend (#17943) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.0`.
+
+### Docs
+
+- [docs] Fix derived column pivoting demo crash (#17944) @arminmeh
+- [docs] Fix light/dark mode blink on pickers overview (#18002) @alexfauquette
+- [docs] Fix scatter shape demo causing horizontal overflow (#17974) @bernardobelchior
+
+### Core
+
+- [code-infra] Add bundle size monitor (#17754) @Janpot
+- [code-infra] Enable `babel-plugin-display-name` in vitest (#17903) @JCQuintas
+- [infra] Remove last deprecated `ponyfillGlobal` usage (#18003) @LukasTy
+- [infra] Use `babel-plugin-display-name` from npm (#18040) @LukasTy
+- [x-telemetry] Remove deprecated `ponyfillGlobal` (#17986) @xBlizZer
+
 ## 8.4.0
 
 _May 21, 2025_

package/esm/useComponentRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/esm/useComponentRenderer/index.js

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/esm/useComponentRenderer/useComponentRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export declare function useComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/esm/useComponentRenderer/useComponentRenderer.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export function useComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = mergeClassNames(render.props.className, props.className);
+    }
+    if (render.props.style || props.style) {
+      props.style = _extends({}, props.style, render.props.style);
+    }
+    if (render.props.sx || props.sx) {
+      props.sx = mergeSx(props.sx, render.props.sx);
+    }
+    return /*#__PURE__*/React.cloneElement(render, props);
+  }
+  return /*#__PURE__*/React.createElement(defaultElement, props);
+}
+function mergeClassNames(className, otherClassName) {
+  if (!className || !otherClassName) {
+    return className || otherClassName;
+  }
+  return `${className} ${otherClassName}`;
+}
+function mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/esm/useResizeObserver/useResizeObserver.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 const isDevEnvironment = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const noop = () => {};
 export function useResizeObserver(ref, fn, enabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-internals",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "author": "MUI Team",
   "description": "Utility functions for the MUI X packages (internal use only).",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "@mui/utils": "^7.0.2"
   },
   "peerDependencies": {
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {

package/useComponentRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/useComponentRenderer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useComponentRenderer = require("./useComponentRenderer");
+Object.keys(_useComponentRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useComponentRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useComponentRenderer[key];
+    }
+  });
+});

package/useComponentRenderer/useComponentRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export declare function useComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/useComponentRenderer/useComponentRenderer.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentRenderer = useComponentRenderer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+function useComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = mergeClassNames(render.props.className, props.className);
+    }
+    if (render.props.style || props.style) {
+      props.style = (0, _extends2.default)({}, props.style, render.props.style);
+    }
+    if (render.props.sx || props.sx) {
+      props.sx = mergeSx(props.sx, render.props.sx);
+    }
+    return /*#__PURE__*/React.cloneElement(render, props);
+  }
+  return /*#__PURE__*/React.createElement(defaultElement, props);
+}
+function mergeClassNames(className, otherClassName) {
+  if (!className || !otherClassName) {
+    return className || otherClassName;
+  }
+  return `${className} ${otherClassName}`;
+}
+function mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/useResizeObserver/useResizeObserver.js

@@ -1,18 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = useResizeObserver;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 const isDevEnvironment = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const noop = () => {};
 function useResizeObserver(ref, fn, enabled) {
   const fnRef = React.useRef(null);
   fnRef.current = fn;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (enabled === false || typeof ResizeObserver === 'undefined') {
       return noop;
     }