[core] Use re exported utils from packages in docs examples

docs/data/charts/composition/LimitOverflow.js

@@ -3,8 +3,7 @@ import Slider from '@mui/material/Slider';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import useId from '@mui/utils/useId';
-
+import { useId } from '@mui/x-charts/utils';
 import { ChartContainer } from '@mui/x-charts/ChartContainer';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';

docs/data/charts/composition/LimitOverflow.tsx

@@ -3,8 +3,7 @@ import Slider from '@mui/material/Slider';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import useId from '@mui/utils/useId';
-
+import { useId } from '@mui/x-charts/utils';
 import { ChartContainer } from '@mui/x-charts/ChartContainer';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';

docs/data/data-grid/editing/CustomEditComponent.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Rating from '@mui/material/Rating';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useEnhancedEffect } from '@mui/x-data-grid/utils';
 import { DataGrid, useGridApiContext } from '@mui/x-data-grid';
 
 function renderRating(params) {

docs/data/data-grid/editing/CustomEditComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Rating from '@mui/material/Rating';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useEnhancedEffect } from '@mui/x-data-grid/utils';
 import {
   DataGrid,
   GridRenderCellParams,

docs/data/data-grid/filtering/MultiFilteringPanelSnap.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridPro, GridLogicOperator, useGridApiRef } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useEnhancedEffect } from '@mui/x-data-grid/utils';
 
 const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
 

docs/data/data-grid/filtering/MultiFilteringPanelSnap.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridPro, GridLogicOperator, useGridApiRef } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useEnhancedEffect } from '@mui/x-data-grid/utils';
 
 const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
 

docs/data/data-grid/performance/GridVisualization.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useForkRef } from '@mui/x-data-grid/utils';
 import { DataGridPro, GridCell } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 

docs/data/data-grid/performance/GridVisualization.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useForkRef } from '@mui/x-data-grid/utils';
 import { DataGridPro, GridCell } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 

docs/data/data-grid/row-updates/LazyLoadingGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_debounce as debounce } from '@mui/utils';
+import { debounce } from '@mui/x-data-grid/utils';
 import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
 import { createFakeServer, loadServerRows } from '@mui/x-data-grid-generator';
 

docs/data/data-grid/row-updates/LazyLoadingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_debounce as debounce } from '@mui/utils';
+import { debounce } from '@mui/x-data-grid/utils';
 import {
   DataGridPro,
   GridFetchRowsParams,

docs/data/date-pickers/custom-components/ActionBarComponent.js

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import DialogActions from '@mui/material/DialogActions';
-import { unstable_useId as useId } from '@mui/utils';
+import { useId } from '@mui/x-date-pickers/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

docs/data/date-pickers/custom-components/ActionBarComponent.tsx

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import DialogActions from '@mui/material/DialogActions';
-import { unstable_useId as useId } from '@mui/utils';
+import { useId } from '@mui/x-date-pickers/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

docs/data/date-pickers/custom-field/BrowserV7Field.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import { useForkRef } from '@mui/x-date-pickers/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';

docs/data/date-pickers/custom-field/BrowserV7Field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import { useForkRef } from '@mui/x-date-pickers/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
+import { useSlotProps, useForkRef } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
+import { useSlotProps, useForkRef } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { PickerValidDate } from '@mui/x-date-pickers/models';

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
+import { useSlotProps, useForkRef } from '@mui/x-date-pickers-pro/utils';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
+import { useSlotProps, useForkRef } from '@mui/x-date-pickers-pro/utils';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js

@@ -4,7 +4,6 @@ import {
   useColorScheme as useMaterialColorScheme,
   Experimental_CssVarsProvider as MaterialCssVarsProvider,
 } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import {
   extendTheme as extendJoyTheme,
   useColorScheme,
@@ -17,6 +16,7 @@ import Stack from '@mui/joy/Stack';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Typography from '@mui/joy/Typography';
+import { useSlotProps } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 

docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx

@@ -4,7 +4,6 @@ import {
   useColorScheme as useMaterialColorScheme,
   Experimental_CssVarsProvider as MaterialCssVarsProvider,
 } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import {
   extendTheme as extendJoyTheme,
   useColorScheme,
@@ -17,6 +16,7 @@ import Stack, { StackProps } from '@mui/joy/Stack';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Typography, { TypographyProps } from '@mui/joy/Typography';
+import { useSlotProps } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { PickerValidDate } from '@mui/x-date-pickers/models';

docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js

@@ -4,7 +4,6 @@ import {
   useColorScheme as useMaterialColorScheme,
   Experimental_CssVarsProvider as MaterialCssVarsProvider,
 } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import {
   extendTheme as extendJoyTheme,
   useColorScheme,
@@ -16,6 +15,7 @@ import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import IconButton from '@mui/joy/IconButton';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
+import { useSlotProps } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx

@@ -4,7 +4,6 @@ import {
   useColorScheme as useMaterialColorScheme,
   Experimental_CssVarsProvider as MaterialCssVarsProvider,
 } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import {
   extendTheme as extendJoyTheme,
   useColorScheme,
@@ -16,6 +15,7 @@ import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import IconButton from '@mui/joy/IconButton';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
+import { useSlotProps } from '@mui/x-date-pickers-pro/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {

docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import dayjs from 'dayjs';
 import { useRifm } from 'rifm';
 import TextField from '@mui/material/TextField';
-import useControlled from '@mui/utils/useControlled';
+import { useControlled } from '@mui/x-date-pickers/utils';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';

docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { useRifm } from 'rifm';
 import TextField from '@mui/material/TextField';
-import useControlled from '@mui/utils/useControlled';
+import { useControlled } from '@mui/x-date-pickers/utils';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import {

docs/data/date-pickers/lifecycle/ServerInteraction.js

@@ -7,7 +7,7 @@ import Button from '@mui/material/Button';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateField } from '@mui/x-date-pickers/DateField';
-import useControlled from '@mui/utils/useControlled';
+import { useControlled } from '@mui/x-date-pickers/utils';
 
 function DisplayEvents(props) {
   const { logs, title } = props;

docs/data/date-pickers/lifecycle/ServerInteraction.tsx

@@ -7,7 +7,7 @@ import Button from '@mui/material/Button';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateField, DateFieldProps } from '@mui/x-date-pickers/DateField';
-import useControlled from '@mui/utils/useControlled';
+import { useControlled } from '@mui/x-date-pickers/utils';
 
 type DisplayEventsProps = {
   logs: (Dayjs | null)[];

packages/x-charts-pro/src/utils/index.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/utils';

packages/x-charts/src/utils/index.ts

@@ -0,0 +1 @@
+export { default as useId } from '@mui/utils/useId';

packages/x-data-grid/src/utils/index.ts

@@ -1 +1,4 @@
 export type { OutputSelector } from './createSelector';
+export { default as useEnhancedEffect } from '@mui/utils/useEnhancedEffect';
+export { default as useForkRef } from '@mui/utils/useForkRef';
+export { default as debounce } from '@mui/utils/debounce';

packages/x-date-pickers-pro/src/utils/index.ts

@@ -0,0 +1 @@
+export * from '@mui/x-date-pickers/utils';

packages/x-date-pickers/src/utils/index.ts

@@ -0,0 +1,4 @@
+export { default as useSlotProps } from '@mui/utils/useSlotProps';
+export { default as useForkRef } from '@mui/utils/useForkRef';
+export { default as useId } from '@mui/utils/useId';
+export { default as useControlled } from '@mui/utils/useControlled';