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

package/esm/components/toolbarV8/ToolbarButton.js

@@ -0,0 +1,172 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
+import { useToolbarContext } from "./ToolbarContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button for performing actions from the toolbar.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+ *
+ * API:
+ *
+ * - [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
+ */
+const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
+  const {
+      render
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const id = useId();
+  const rootProps = useGridRootProps();
+  const buttonRef = React.useRef(null);
+  const handleRef = useForkRef(buttonRef, ref);
+  const {
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown
+  } = useToolbarContext();
+  React.useEffect(() => {
+    registerItem(id);
+    return () => unregisterItem(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isInitialFocus = React.useRef(true);
+  React.useEffect(() => {
+    // Do not focus the item on initial render
+    if (focusableItemId && isInitialFocus.current) {
+      isInitialFocus.current = false;
+      return;
+    }
+    if (focusableItemId === id) {
+      buttonRef.current?.focus();
+    }
+  }, [focusableItemId, id]);
+  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    onKeyDown: onItemKeyDown
+  }, other, {
+    ref: handleRef
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   */
+  edge: PropTypes.oneOf(['end', 'start', false]),
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  label: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any
+} : void 0;
+export { ToolbarButton };

package/esm/components/toolbarV8/ToolbarContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ToolbarContextValue {
+  focusableItemId: string | null;
+  registerItem: (itemId: string) => void;
+  unregisterItem: (itemId: string) => void;
+  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
+export declare function useToolbarContext(): ToolbarContextValue;

package/esm/components/toolbarV8/ToolbarContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+export function useToolbarContext() {
+  const context = React.useContext(ToolbarContext);
+  if (context === undefined) {
+    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
+  }
+  return context;
+}

package/esm/components/toolbarV8/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/components/toolbarV8/index.js

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -132,7 +132,13 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       top: 0
     } : undefined,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // tabIndex does not prevent focus with a mouse click, throwing a console error
+    // https://github.com/mui/mui-x/issues/16706
+    ,
+    onFocus: event => {
+      event.target.blur();
+    },
     children: /*#__PURE__*/_jsx("div", {
       ref: contentRef,
       className: classes.content

package/esm/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay, GridToolbar } from "../components/index.js";
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay } from "../components/index.js";
 import { GridCell } from "../components/cell/GridCell.js";
 import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.js";
@@ -8,6 +8,7 @@ import { GridPinnedRows } from "../components/GridPinnedRows.js";
 import { GridNoResultsOverlay } from "../components/GridNoResultsOverlay.js";
 import materialSlots from "../material/index.js";
 import { GridBottomContainer } from "../components/virtualization/GridBottomContainer.js";
+import { GridToolbar } from "../components/toolbarV8/GridToolbar.js";
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.

package/esm/constants/gridClasses.d.ts

@@ -594,6 +594,10 @@ export interface GridClasses {
    * Styles applied to the sort icon element.
    */
   sortIcon: string;
+  /**
+   * Styles applied to the toolbar root element.
+   */
+  toolbar: string;
   /**
    * Styles applied to the shadow scroll area element.
    * @ignore - do not document.

package/esm/hooks/features/rows/useGridRowsMeta.js

@@ -13,6 +13,7 @@ import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
 import { gridPinnedRowsSelector, gridRowCountSelector } from "./gridRowsSelector.js";
 import { gridDimensionsSelector, gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
+import { gridFocusedVirtualCellSelector } from "../virtualization/gridFocusedVirtualCellSelector.js";
 /* eslint-disable no-underscore-dangle */
 
 export const rowsMetaStateInitializer = (state, props, apiRef) => {
@@ -183,6 +184,13 @@ export 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 = 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/esm/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/esm/hooks/features/virtualization/useGridVirtualScroller.js

@@ -520,12 +520,10 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollAreaProps: () => ({

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from '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.
+ */
+export function useGridComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = clsx(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 mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/esm/index.js

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

package/esm/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/esm/internals/demo/TailwindDemoContainer.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { jsx as _jsx } from "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.
+ */
+export 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__*/_jsx(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%'
+    },
+    children: /*#__PURE__*/_jsx(CircularProgress, {})
+  });
+}

package/esm/internals/demo/index.d.ts

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

package/esm/internals/demo/index.js

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

package/esm/internals/index.d.ts

@@ -5,6 +5,8 @@ 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";
@@ -74,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";
@@ -105,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";

package/esm/internals/index.js

@@ -2,6 +2,7 @@ export { GridVirtualScroller } from "../components/virtualization/GridVirtualScr
 export { GridVirtualScrollerContent } from "../components/virtualization/GridVirtualScrollerContent.js";
 export { GridVirtualScrollerRenderZone } from "../components/virtualization/GridVirtualScrollerRenderZone.js";
 export { GridHeaders } from "../components/GridHeaders.js";
+export { GridToolbar } from "../components/toolbarV8/GridToolbar.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";
@@ -61,6 +62,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";
@@ -84,4 +86,5 @@ export * from "../hooks/utils/index.js";
 export { serializeCellValue } from "../hooks/features/export/serializers/csvSerializer.js";
 export * from "./utils/index.js";
 export * from "./constants.js";
+export * from "./demo/index.js";
 export { GridSkeletonLoadingOverlayInner } from "../components/GridSkeletonLoadingOverlay.js";

package/esm/material/icons/index.d.ts

@@ -58,9 +58,6 @@ export declare const GridLoadIcon: import("@mui/material/OverridableComponent").
 export declare const GridDragIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
 };
-export declare const GridSaveAltIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-  muiName: string;
-};
 export declare const GridCheckIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
 };
@@ -81,4 +78,7 @@ export declare const GridDeleteIcon: import("@mui/material/OverridableComponent"
 };
 export declare const GridDeleteForeverIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
+};
+export declare const GridDownloadIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+  muiName: string;
 };

package/esm/material/icons/index.js

@@ -29,7 +29,7 @@ export const GridCheckCircleIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
 }), 'CheckCircle');
 export const GridColumnIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
-  d: "M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"
+  d: "M14.67 5v14H9.33V5zm1 14H21V5h-5.33zm-7.34 0V5H3v14z"
 }), 'ColumnIcon');
 export const GridSeparatorIcon = createSvgIcon(/*#__PURE__*/_jsx("rect", {
   width: "1",
@@ -64,9 +64,6 @@ export const GridLoadIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
 export const GridDragIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
 }), 'Drag');
-export const GridSaveAltIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
-  d: "M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"
-}), 'SaveAlt');
 export const GridCheckIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
 }), 'Check');
@@ -82,11 +79,14 @@ export const GridViewColumnIcon = createSvgIcon(/*#__PURE__*/_jsx("g", {
   })
 }), 'ViewColumn');
 export const GridClearIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
-  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
 }), 'Clear');
 export const GridDeleteIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
 }), 'Delete');
 export const GridDeleteForeverIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"
-}), 'Delete');
+}), 'Delete');
+export const GridDownloadIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
+}), 'Download');

package/esm/material/index.js

@@ -42,7 +42,7 @@ import MUIInputLabel from '@mui/material/InputLabel';
 import MUISkeleton from '@mui/material/Skeleton';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnUnsortedIcon } from "./icons/GridColumnUnsortedIcon.js";
-import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from "./icons/index.js";
+import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon, GridDownloadIcon } from "./icons/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useMaterialCSSVariables } from "./variables.js";
@@ -155,7 +155,7 @@ const iconSlots = {
   densityCompactIcon: GridViewHeadlineIcon,
   densityStandardIcon: GridTableRowsIcon,
   densityComfortableIcon: GridViewStreamIcon,
-  exportIcon: GridSaveAltIcon,
+  exportIcon: GridDownloadIcon,
   moreActionsIcon: GridMoreVertIcon,
   treeDataCollapseIcon: GridExpandMoreIcon,
   treeDataExpandIcon: GridKeyboardArrowRight,
@@ -165,7 +165,7 @@ const iconSlots = {
   detailPanelCollapseIcon: GridRemoveIcon,
   rowReorderIcon: GridDragIcon,
   quickFilterIcon: GridSearchIcon,
-  quickFilterClearIcon: GridCloseIcon,
+  quickFilterClearIcon: GridClearIcon,
   columnMenuHideIcon: GridVisibilityOffIcon,
   columnMenuSortAscendingIcon: GridArrowUpwardIcon,
   columnMenuSortDescendingIcon: GridArrowDownwardIcon,

package/esm/models/gridBaseSlots.d.ts

@@ -108,7 +108,9 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type DividerProps = {};
+export type DividerProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
 export type MenuListProps = {
   ref?: Ref<HTMLUListElement>;
   id?: string;
@@ -223,6 +225,7 @@ export type SwitchProps = {
   size?: 'small' | 'medium';
 };
 export type TextFieldProps = {
+  role?: string;
   autoComplete?: string;
   className?: string;
   color?: 'primary' | 'error';
@@ -246,6 +249,7 @@ export type TextFieldProps = {
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
+  ref?: Ref<HTMLInputElement>;
 };
 export type TooltipProps = {
   children: React.ReactElement<any, any>;

package/esm/models/gridIconSlotsComponent.d.ts

@@ -70,7 +70,7 @@ export interface GridIconSlotsComponent {
   densityComfortableIcon: React.JSXElementConstructor<any>;
   /**
    * Icon displayed on the open export button present in the toolbar by default.
-   * @default GridSaveAltIcon
+   * @default GridDownloadIcon
    */
   exportIcon: React.JSXElementConstructor<any>;
   /**

package/esm/models/gridSlotsComponent.d.ts

@@ -149,8 +149,7 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
    */
   footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
   /**
-   * Toolbar component rendered inside the Header component.
-   * @default GridToolbar
+   * Toolbar component rendered in the grid header.
    */
   toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']>;
   /**

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) {