@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.14

package/hooks/features/rows/useGridParamsApi.js

@@ -12,6 +12,7 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _gridRowsSelector = require("./gridRowsSelector");
+var _gridRowsUtils = require("./gridRowsUtils");
 class MissingRowIdError extends Error {}
 
 /**
@@ -97,14 +98,7 @@ function useGridParamsApi(apiRef, props) {
     }
     return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
-  const getRowValue = React.useCallback((row, colDef) => {
-    const field = colDef.field;
-    if (!colDef || !colDef.valueGetter) {
-      return row[field];
-    }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
-  }, [apiRef]);
+  const getRowValue = React.useCallback((row, colDef) => (0, _gridRowsUtils.getRowValue)(row, colDef, apiRef), [apiRef]);
   const getRowFormattedValue = React.useCallback((row, colDef) => {
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {

package/hooks/features/rows/useGridRowAriaAttributes.js

@@ -6,22 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridRowAriaAttributes = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _rowSelection = require("../rowSelection");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 const useGridRowAriaAttributes = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const selectedIdsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.selectedIdsLookupSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
   return React.useCallback((rowNode, index) => {
     const ariaAttributes = {};
     const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
     ariaAttributes['aria-rowindex'] = ariaRowIndex;
     if (apiRef.current.isRowSelectable(rowNode.id)) {
-      ariaAttributes['aria-selected'] = selectedIdsLookup[rowNode.id] !== undefined;
+      ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
     }
     return ariaAttributes;
-  }, [apiRef, selectedIdsLookup, headerGroupingMaxDepth]);
+  }, [apiRef, headerGroupingMaxDepth]);
 };
 exports.useGridRowAriaAttributes = useGridRowAriaAttributes;

package/hooks/features/rows/useGridRows.d.ts

@@ -2,5 +2,5 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
-export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "unstable_dataSource">) => void;
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "dataSource">) => void;

package/hooks/features/rows/useGridRows.js

@@ -24,7 +24,7 @@ var _gridRowsUtils = require("./gridRowsUtils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _strategyProcessing = require("../../core/strategyProcessing");
 const rowsStateInitializer = (state, props, apiRef) => {
-  const isDataSourceAvailable = !!props.unstable_dataSource;
+  const isDataSourceAvailable = !!props.dataSource;
   apiRef.current.caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
     rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
@@ -365,16 +365,16 @@ const useGridRows = (apiRef, props) => {
       throttle: false
     });
   }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
-  const previousDataSource = (0, _useLazyRef.default)(() => props.unstable_dataSource);
+  const previousDataSource = (0, _useLazyRef.default)(() => props.dataSource);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
-    if (props.unstable_dataSource && props.unstable_dataSource !== previousDataSource.current) {
-      previousDataSource.current = props.unstable_dataSource;
+    if (props.dataSource && props.dataSource !== previousDataSource.current) {
+      previousDataSource.current = props.dataSource;
       return;
     }
     if (methodName === 'rowTreeCreation') {
       groupRows();
     }
-  }, [groupRows, previousDataSource, props.unstable_dataSource]);
+  }, [groupRows, previousDataSource, props.dataSource]);
   const handleStrategyActivityChange = React.useCallback(() => {
     // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
     // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.
@@ -425,7 +425,7 @@ const useGridRows = (apiRef, props) => {
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
-    const currentRows = props.unstable_dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows;
+    const currentRows = props.dataSource ? Array.from(apiRef.current.getRowModels().values()) : props.rows;
     const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
     const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
     const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
@@ -464,6 +464,6 @@ const useGridRows = (apiRef, props) => {
       }),
       throttle: false
     });
-  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.unstable_dataSource, logger, throttledRowsChange, apiRef]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.dataSource, logger, throttledRowsChange, apiRef]);
 };
 exports.useGridRows = useGridRows;

package/hooks/features/rows/useGridRowsMeta.js

@@ -21,6 +21,7 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridRowsSelector = require("./gridRowsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _gridRowsUtils = require("./gridRowsUtils");
+var _gridFocusedVirtualCellSelector = require("../virtualization/gridFocusedVirtualCellSelector");
 /* eslint-disable no-underscore-dangle */
 
 const rowsMetaStateInitializer = (state, props, apiRef) => {
@@ -192,6 +193,13 @@ const useGridRowsMeta = (apiRef, props) => {
       const entry = entries[i];
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
       const rowId = entry.target.__mui_id;
+      const focusedVirtualRowId = (0, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector)(apiRef)?.id;
+      if (focusedVirtualRowId === rowId && height === 0) {
+        // Focused virtual row has 0 height.
+        // We don't want to store it to avoid scroll jumping.
+        // https://github.com/mui/mui-x/issues/14726
+        return;
+      }
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     }
     if (!isHeightMetaValid.current) {

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -33,7 +33,6 @@ export declare const useGridVirtualScroller: () => {
   };
   getScrollbarVerticalProps: () => {
     ref: React.RefObject<HTMLDivElement | null>;
-    role: string;
     scrollPosition: React.RefObject<{
       top: number;
       left: number;
@@ -41,7 +40,6 @@ export declare const useGridVirtualScroller: () => {
   };
   getScrollbarHorizontalProps: () => {
     ref: React.RefObject<HTMLDivElement | null>;
-    role: string;
     scrollPosition: React.RefObject<{
       top: number;
       left: number;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -12,7 +12,8 @@ exports.useGridVirtualScroller = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _RtlProvider = require("@mui/system/RtlProvider");
@@ -25,10 +26,9 @@ var _useRunOnce = require("../../utils/useRunOnce");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 var platform = _interopRequireWildcard(require("../../../utils/platform"));
-var _utils3 = require("../../../utils/utils");
-var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
+var _utils2 = require("../../../utils/utils");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
@@ -40,6 +40,7 @@ var _columns = require("../columns");
 var _gridFocusedVirtualCellSelector = require("./gridFocusedVirtualCellSelector");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
+var _rowSelection = require("../rowSelection");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -74,7 +75,7 @@ const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = (0, _RtlProvider.useRtl)();
-  const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.selectedIdsLookupSelector);
+  const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
@@ -178,7 +179,7 @@ const useGridVirtualScroller = () => {
     }
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef]);
-  const triggerUpdateRenderContext = (0, _utils.unstable_useEventCallback)(() => {
+  const triggerUpdateRenderContext = (0, _useEventCallback.default)(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
@@ -189,8 +190,8 @@ const useGridVirtualScroller = () => {
 
     // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: (0, _utils3.clamp)(scroller.scrollTop, 0, maxScrollTop),
-      left: isRtl ? (0, _utils3.clamp)(scroller.scrollLeft, -maxScrollLeft, 0) : (0, _utils3.clamp)(scroller.scrollLeft, 0, maxScrollLeft)
+      top: (0, _utils2.clamp)(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? (0, _utils2.clamp)(scroller.scrollLeft, -maxScrollLeft, 0) : (0, _utils2.clamp)(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -247,7 +248,7 @@ const useGridVirtualScroller = () => {
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
-  const handleScroll = (0, _utils.unstable_useEventCallback)(() => {
+  const handleScroll = (0, _useEventCallback.default)(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
       return;
@@ -259,10 +260,10 @@ const useGridVirtualScroller = () => {
       renderContext: nextRenderContext
     });
   });
-  const handleWheel = (0, _utils.unstable_useEventCallback)(event => {
+  const handleWheel = (0, _useEventCallback.default)(event => {
     apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
   });
-  const handleTouchMove = (0, _utils.unstable_useEventCallback)(event => {
+  const handleTouchMove = (0, _useEventCallback.default)(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
   const getRows = (params = {}) => {
@@ -294,7 +295,7 @@ const useGridVirtualScroller = () => {
     const rowModels = params.rows ?? currentPage.rows;
     const firstRowToRender = baseRenderContext.firstRowIndex;
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
-    const rowIndexes = params.rows ? (0, _utils3.range)(0, params.rows.length) : (0, _utils3.range)(firstRowToRender, lastRowToRender);
+    const rowIndexes = params.rows ? (0, _utils2.range)(0, params.rows.length) : (0, _utils2.range)(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
     if (!isPinnedSection && focusedVirtualCell) {
       if (focusedVirtualCell.rowIndex < firstRowToRender) {
@@ -344,12 +345,7 @@ const useGridVirtualScroller = () => {
         }
       }
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
-      let isSelected;
-      if (selectedRowsLookup[id] == null) {
-        isSelected = false;
-      } else {
-        isSelected = apiRef.current.isRowSelectable(id);
-      }
+      const isSelected = rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
       let isFirstVisible = false;
       if (params.position === undefined) {
         isFirstVisible = rowIndexInPage === 0;
@@ -436,13 +432,13 @@ const useGridVirtualScroller = () => {
       contentHeight
     });
   }, [apiRef, columnsTotalWidth, contentHeight]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (!isRenderContextReady.current) {
       return;
     }
     apiRef.current.updateRenderContext?.();
   }, [apiRef, enabledForColumns, enabledForRows]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (listView) {
       scrollerRef.current.scrollLeft = 0;
     }
@@ -504,9 +500,9 @@ const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  (0, _utils2.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
-  (0, _utils2.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
-  (0, _utils2.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -535,12 +531,10 @@ const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollAreaProps: () => ({
@@ -660,7 +654,7 @@ function getNearestIndexToRender(inputs, offset, options) {
     // Check if all rows in this page are already measured
     allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
   }
-  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils3.clamp)(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
+  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils2.clamp)(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
   if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
     // If all rows were measured (when no row has "auto" as height) or all rows before the offset
     // were measured, then use a binary search because it's faster.
@@ -763,7 +757,7 @@ function getIndexesToRender({
     lastPosition: positions[positions.length - 1] + lastSize
   });
   const lastIndexPadded = binarySearch(lastPosition, positions);
-  return [(0, _utils3.clamp)(firstIndexPadded, minFirstIndex, maxLastIndex), (0, _utils3.clamp)(lastIndexPadded, minFirstIndex, maxLastIndex)];
+  return [(0, _utils2.clamp)(firstIndexPadded, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndexPadded, minFirstIndex, maxLastIndex)];
 }
 function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {

package/hooks/utils/index.d.ts

@@ -5,4 +5,5 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
+export * from "./useRunOnce.js";
+export type { RenderProp } from './useGridComponentRenderer';

package/hooks/utils/useGridComponentRenderer.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 useGridComponentRenderer<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/hooks/utils/useGridComponentRenderer.js

@@ -0,0 +1,44 @@
+"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.useGridComponentRenderer = useGridComponentRenderer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+/**
+ * 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 useGridComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = (0, _clsx.default)(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 mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/hooks/utils/useGridSelector.js

@@ -8,8 +8,12 @@ exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = voi
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
-var _shim = require("use-sync-external-store/shim");
+var _index = require("use-sync-external-store/shim/index.js");
 var _useLazyRef = require("./useLazyRef");
+// use-sync-external-store has no exports field defined
+// See https://github.com/facebook/react/issues/30698
+// eslint-disable-next-line import/extensions
+
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
 const arrayShallowCompare = (a, b) => {
@@ -83,7 +87,7 @@ const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCom
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, EMPTY);
-  (0, _shim.useSyncExternalStore)(unsubscribe, subscribe, emptyGetSnapshot);
+  (0, _index.useSyncExternalStore)(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };
 exports.useGridSelector = useGridSelector;

package/hooks/utils/useIsSSR.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIsSSR = void 0;
-var _shim = require("use-sync-external-store/shim");
+var _index = require("use-sync-external-store/shim/index.js");
+// use-sync-external-store has no exports field defined
+// See https://github.com/facebook/react/issues/30698
+// eslint-disable-next-line import/extensions
+
 const emptySubscribe = () => () => {};
 const clientSnapshot = () => false;
 const serverSnapshot = () => true;
-const useIsSSR = () => (0, _shim.useSyncExternalStore)(emptySubscribe, clientSnapshot, serverSnapshot);
+const useIsSSR = () => (0, _index.useSyncExternalStore)(emptySubscribe, clientSnapshot, serverSnapshot);
 exports.useIsSSR = useIsSSR;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.12
+ * @mui/x-data-grid v8.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/demo/TailwindDemoContainer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface TailwindDemoContainerProps {
+  children: React.ReactNode;
+  documentBody?: HTMLElement;
+}
+/**
+ * WARNING: This is an internal component used in documentation to inject the Tailwind script.
+ * Please do not use it in your application.
+ */
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export {};

package/internals/demo/TailwindDemoContainer.js

@@ -0,0 +1,63 @@
+"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.TailwindDemoContainer = TailwindDemoContainer;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WARNING: This is an internal component used in documentation to inject the Tailwind script.
+ * Please do not use it in your application.
+ */
+function TailwindDemoContainer(props) {
+  const {
+    children,
+    documentBody
+  } = props;
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  React.useEffect(() => {
+    const body = documentBody ?? document.body;
+    const script = document.createElement('script');
+    script.src = 'https://unpkg.com/@tailwindcss/browser@4';
+    let mounted = true;
+    const cleanup = () => {
+      mounted = false;
+      script.remove();
+      const head = body?.ownerDocument?.head;
+      if (!head) {
+        return;
+      }
+      const styles = head.querySelectorAll('style:not([data-emotion])');
+      styles.forEach(style => {
+        const styleText = style.textContent?.substring(0, 100);
+        const isTailwindStylesheet = styleText?.includes('tailwind');
+        if (isTailwindStylesheet) {
+          style.remove();
+        }
+      });
+    };
+    script.onload = () => {
+      if (!mounted) {
+        cleanup();
+        return;
+      }
+      setIsLoaded(true);
+    };
+    body.appendChild(script);
+    return cleanup;
+  }, [documentBody]);
+  return isLoaded ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+  });
+}

package/internals/demo/index.d.ts

@@ -0,0 +1 @@
+export { TailwindDemoContainer } from "./TailwindDemoContainer.js";

package/internals/demo/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TailwindDemoContainer", {
+  enumerable: true,
+  get: function () {
+    return _TailwindDemoContainer.TailwindDemoContainer;
+  }
+});
+var _TailwindDemoContainer = require("./TailwindDemoContainer");

package/internals/index.d.ts

@@ -5,9 +5,12 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export type { GridDetailPanelsProps } from '../components/GridDetailPanels';
 export type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 export { GridHeaders } from "../components/GridHeaders.js";
+export { GridToolbar } from "../components/toolbarV8/GridToolbar.js";
+export type { GridToolbarProps } from '../components/toolbarV8/GridToolbar';
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";
+export { vars } from "../constants/cssVariables.js";
 export { propsStateInitializer } from "../hooks/core/useGridProps.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -54,7 +57,7 @@ export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRo
 export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";
 export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
-export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from "../hooks/features/rows/gridRowsUtils.js";
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
@@ -73,6 +76,7 @@ export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";
 export { useGridListView, listViewStateInitializer } from "../hooks/features/listView/useGridListView.js";
+export { useGridComponentRenderer } from "../hooks/utils/useGridComponentRenderer.js";
 export { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
@@ -104,4 +108,5 @@ export { serializeCellValue } from "../hooks/features/export/serializers/csvSeri
 export * from "./utils/index.js";
 export * from "./constants.js";
 export type { Localization } from '../utils/getGridLocalization';
+export * from "./demo/index.js";
 export { GridSkeletonLoadingOverlayInner } from "../components/GridSkeletonLoadingOverlay.js";