@mui/x-data-grid 8.0.0-beta.0 → 8.0.0-beta.2

package/esm/components/GridShadowScrollArea.js

@@ -17,48 +17,56 @@ const detectScroll = keyframes({
     '--scrollable': '" "'
   }
 });
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 const ShadowScrollArea = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ShadowScrollArea'
-})({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  animation: detectScroll,
-  animationTimeline: '--scroll-timeline',
-  animationFillMode: 'none',
-  boxSizing: 'border-box',
-  overflow: 'auto',
-  scrollTimeline: '--scroll-timeline block',
-  '&::before, &::after': {
-    content: '""',
-    flexShrink: 0,
-    display: 'block',
-    position: 'sticky',
-    left: 0,
-    width: '100%',
-    height: '4px',
-    animation: `${reveal} linear both`,
-    animationTimeline: '--scroll-timeline',
+})`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  animation: ${detectScroll};
+  animation-timeline: --scroll-timeline;
+  animation-fill-mode: none;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-timeline: --scroll-timeline block;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: ${reveal} linear both;
+    animation-timeline: --scroll-timeline;
+
     // Custom property toggle trick:
     // - Detects if the element is scrollable
     // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    '--visibility-scrollable': 'var(--scrollable) visible',
-    '--visibility-not-scrollable': 'hidden',
-    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
-  },
-  '&::before': {
-    top: 0,
-    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationRange: '0 4px'
-  },
-  '&::after': {
-    bottom: 0,
-    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationDirection: 'reverse',
-    animationRange: 'calc(100% - 4px) 100%'
+    --visibility-scrollable: var(--scrollable) visible;
+    --visibility-not-scrollable: hidden;
+    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
   }
-});
+
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-range: 0 4px;
+  }
+
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-direction: reverse;
+    animation-range: calc(100% - 4px) 100%;
+  }
+`;
 
 /**
  * Adds scroll shadows above and below content in a scrollable container.

package/esm/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;

package/esm/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */
-  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**
    * If true, the select opens by default.
    */

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isValidating: PropTypes.bool,
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */

package/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -69,7 +69,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to a Set to make O(1) checking if a row exists or not
     const candidates = new Set();
@@ -80,7 +80,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       }
     }
     return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => {

package/esm/components/containers/GridToolbarContainer.js

@@ -10,6 +10,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { Toolbar } from "../toolbarV8/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -20,16 +21,17 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridToolbarContainerRoot = styled('div', {
+const GridToolbarContainerRoot = styled(Toolbar, {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
-  overridesResolver: (_, styles) => styles.toolbarContainer
+  shouldForwardProp: prop => prop !== 'ownerState'
 })({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
   gap: vars.spacing(1),
-  padding: vars.spacing(0.5, 0.5, 0)
+  padding: vars.spacing(0.5),
+  minHeight: 'auto'
 });
 const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref) {
   const {

package/esm/components/quickFilter/QuickFilter.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { QuickFilterState } from "./QuickFilterContext.js";
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from '../../models';
-export type QuickFilterProps = {
-  children: React.ReactNode;
+export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user
@@ -21,10 +22,32 @@ export type QuickFilterProps = {
    * @default 150
    */
   debounceMs?: number;
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded?: boolean;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange?: (expanded: boolean) => void;
 };
 /**
  * The top level Quick Filter component that provides context to child components.
- * It does not render any DOM elements.
+ * It renders a `<div />` element.
  *
  * Demos:
  *

package/esm/components/quickFilter/QuickFilter.js

@@ -1,19 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "parser", "formatter", "debounceMs", "defaultExpanded", "expanded", "onExpandedChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_debounce as debounce } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { QuickFilterContext } from "./QuickFilterContext.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { isDeepEqual } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_PARSER = searchText => searchText.split(' ').filter(word => word !== '');
 const DEFAULT_FORMATTER = values => values.join(' ');
 
 /**
  * The top level Quick Filter component that provides context to child components.
- * It does not render any DOM elements.
+ * It renders a `<div />` element.
  *
  * Demos:
  *
@@ -26,16 +32,38 @@ const DEFAULT_FORMATTER = values => values.join(' ');
 function QuickFilter(props) {
   const rootProps = useGridRootProps();
   const {
-    parser = DEFAULT_PARSER,
-    formatter = DEFAULT_FORMATTER,
-    debounceMs = rootProps.filterDebounceMs,
-    children
-  } = props;
+      render,
+      className,
+      parser = DEFAULT_PARSER,
+      formatter = DEFAULT_FORMATTER,
+      debounceMs = rootProps.filterDebounceMs,
+      defaultExpanded,
+      expanded,
+      onExpandedChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const controlRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const [value, setValue] = React.useState(formatter(quickFilterValues ?? []));
+  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded ?? value.length > 0);
+  const expandedValue = expanded ?? internalExpanded;
+  const state = React.useMemo(() => ({
+    value,
+    expanded: expandedValue
+  }), [value, expandedValue]);
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const ref = React.useRef(null);
+  const controlId = useId();
+  const handleExpandedChange = React.useCallback(newExpanded => {
+    if (onExpandedChange) {
+      onExpandedChange(newExpanded);
+    }
+    if (expanded === undefined) {
+      setInternalExpanded(newExpanded);
+    }
+  }, [onExpandedChange, expanded]);
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
     if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
@@ -46,6 +74,31 @@ function QuickFilter(props) {
       setValue(prevSearchValue => isDeepEqual(parser(prevSearchValue), quickFilterValues) ? prevSearchValue : formatter(quickFilterValues ?? []));
     }
   }, [quickFilterValues, formatter, parser]);
+  const isFirstRender = React.useRef(true);
+  const previousExpandedValue = React.useRef(expandedValue);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    // Ensure the expanded state has actually changed before focusing
+    if (previousExpandedValue.current !== expandedValue) {
+      if (expandedValue) {
+        // Ensures the focus does not interupt CSS transitions and animations on the control
+        requestAnimationFrame(() => {
+          controlRef.current?.focus({
+            preventScroll: true
+          });
+        });
+      } else {
+        triggerRef.current?.focus({
+          preventScroll: true
+        });
+      }
+      previousExpandedValue.current = expandedValue;
+    }
+  }, [expandedValue]);
   const setQuickFilterValueDebounced = React.useMemo(() => debounce(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
@@ -57,7 +110,7 @@ function QuickFilter(props) {
     setValue(newValue);
     setQuickFilterValueDebounced(newValue);
   }, [setQuickFilterValueDebounced]);
-  const handleClear = React.useCallback(() => {
+  const handleClearValue = React.useCallback(() => {
     setValue('');
     apiRef.current.setQuickFilterValues([]);
     controlRef.current?.focus();
@@ -65,15 +118,25 @@ function QuickFilter(props) {
   const contextValue = React.useMemo(() => ({
     controlRef,
     triggerRef,
-    state: {
-      value
-    },
-    clearValue: handleClear,
-    onValueChange: handleValueChange
-  }), [value, handleValueChange, handleClear]);
+    state,
+    controlId,
+    clearValue: handleClearValue,
+    onValueChange: handleValueChange,
+    onExpandedChange: handleExpandedChange
+  }), [controlId, state, handleValueChange, handleClearValue, handleExpandedChange]);
+  useEnhancedEffect(() => {
+    if (ref.current && triggerRef.current) {
+      ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
+    }
+  }, []);
+  const element = useGridComponentRenderer('div', render, _extends({
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
   return /*#__PURE__*/_jsx(QuickFilterContext.Provider, {
     value: contextValue,
-    children: children
+    children: element
   });
 }
 process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
@@ -81,12 +144,24 @@ process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * The debounce time in milliseconds.
    * @default 150
    */
   debounceMs: PropTypes.number,
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded: PropTypes.bool,
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded: PropTypes.bool,
   /**
    * Function responsible for formatting values of quick filter in a string when the model is modified
    * @param {any[]} values The new values passed to the quick filter model
@@ -94,12 +169,21 @@ process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
    * @default (values: string[]) => values.join(' ')
    */
   formatter: PropTypes.func,
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange: PropTypes.func,
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user
    * @returns {any[]} The array of value on which quick filter is applied
    * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
    */
-  parser: PropTypes.func
+  parser: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
 export { QuickFilter };

package/esm/components/quickFilter/QuickFilterClear.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "className"];
+const _excluded = ["render", "className", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
@@ -23,7 +23,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const QuickFilterClear = forwardRef(function QuickFilterClear(props, ref) {
   const {
       render,
-      className
+      className,
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -32,10 +33,15 @@ const QuickFilterClear = forwardRef(function QuickFilterClear(props, ref) {
     clearValue
   } = useQuickFilterContext();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    clearValue();
+    onClick?.(event);
+  };
   const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    onClick: clearValue,
-    className: resolvedClassName
+    className: resolvedClassName,
+    tabIndex: -1
   }, other, {
+    onClick: handleClick,
     ref
   }), state);
   return /*#__PURE__*/_jsx(React.Fragment, {

package/esm/components/quickFilter/QuickFilterContext.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 export interface QuickFilterState {
   value: string;
+  expanded: boolean;
 }
 export interface QuickFilterContextValue {
   state: QuickFilterState;
+  controlId: string | undefined;
   controlRef: React.RefObject<HTMLInputElement | null>;
   triggerRef: React.RefObject<HTMLButtonElement | null>;
-  onValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   clearValue: () => void;
+  onValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onExpandedChange: (expanded: boolean) => void;
 }
 export declare const QuickFilterContext: React.Context<QuickFilterContextValue | undefined>;
 export declare function useQuickFilterContext(): QuickFilterContextValue;

package/esm/components/quickFilter/QuickFilterControl.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "className"];
+const _excluded = ["render", "className", "slotProps", "onKeyDown", "onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -24,35 +24,61 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const QuickFilterControl = forwardRef(function QuickFilterControl(props, ref) {
   const {
       render,
-      className
+      className,
+      slotProps,
+      onKeyDown,
+      onChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const {
     state,
+    controlId,
     controlRef,
     onValueChange,
+    onExpandedChange,
     clearValue
   } = useQuickFilterContext();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const handleRef = useForkRef(controlRef, ref);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
-      clearValue();
+      if (state.value === '') {
+        onExpandedChange(false);
+      } else {
+        clearValue();
+      }
     }
-    props.onKeyDown?.(event);
+    onKeyDown?.(event);
+  };
+  const handleBlur = event => {
+    if (state.value === '') {
+      onExpandedChange(false);
+    }
+    slotProps?.htmlInput?.onBlur?.(event);
+  };
+  const handleChange = event => {
+    if (!state.expanded) {
+      onExpandedChange(true);
+    }
+    onValueChange(event);
+    onChange?.(event);
   };
   const element = useGridComponentRenderer(rootProps.slots.baseTextField, render, _extends({}, rootProps.slotProps?.baseTextField, {
     slotProps: _extends({
       htmlInput: _extends({
-        role: 'searchbox'
-      }, props.slotProps?.htmlInput)
-    }, props.slotProps),
+        role: 'searchbox',
+        id: controlId,
+        tabIndex: state.expanded ? undefined : -1
+      }, slotProps?.htmlInput, {
+        onBlur: handleBlur
+      })
+    }, slotProps),
     value: state.value,
-    className: resolvedClassName,
-    onChange: onValueChange,
-    onKeyDown: handleKeyDown
+    className: resolvedClassName
   }, other, {
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
     ref: handleRef
   }), state);
   return /*#__PURE__*/_jsx(React.Fragment, {

package/esm/components/quickFilter/QuickFilterTrigger.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+import { QuickFilterState } from "./QuickFilterContext.js";
+export type QuickFilterTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+};
+/**
+ * A button that expands/collapses the quick filter.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilterTrigger API](https://mui.com/x/api/data-grid/quick-filter-trigger/)
+ */
+declare const QuickFilterTrigger: React.ForwardRefExoticComponent<QuickFilterTriggerProps> | React.ForwardRefExoticComponent<Omit<QuickFilterTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { QuickFilterTrigger };