@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.3

package/esm/components/export/ExportPrint.js

@@ -47,113 +47,9 @@ process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
   // | 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).
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: PropTypes.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: 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,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: PropTypes.node,
-  /**
-   * 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,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: PropTypes.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: PropTypes.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
+  id: PropTypes.string,
   /**
    * The options to apply on the Print export.
    * @demos
@@ -175,33 +71,12 @@ process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
    * 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.
-   */
+  role: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * Element placed before the children.
-   */
   startIcon: PropTypes.node,
   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,
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
 } : void 0;
 export { ExportPrint };

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -83,147 +83,22 @@ process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
   // | 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,
   /**
    * A function to customize rendering of the component.
    */
   className: PropTypes.oneOfType([PropTypes.func, 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).
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: PropTypes.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: 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,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: PropTypes.node,
-  /**
-   * 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,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: PropTypes.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: PropTypes.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
+  id: PropTypes.string,
   /**
    * 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.
-   */
+  role: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * Element placed before the children.
-   */
   startIcon: PropTypes.node,
   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,
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
 } : void 0;
 export { FilterPanelTrigger };

package/esm/components/panel/GridPanel.d.ts

@@ -7,7 +7,7 @@ export interface GridPanelClasses {
   paper: string;
 }
 export interface GridPanelProps extends Pick<GridSlotProps['basePopper'], 'id' | 'className' | 'target' | 'flip'> {
-  ref?: React.Ref<HTMLElement>;
+  ref?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
@@ -16,5 +16,5 @@ export interface GridPanelProps extends Pick<GridSlotProps['basePopper'], 'id' |
   open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

package/esm/components/panel/GridPanel.js

@@ -68,7 +68,7 @@ const GridPanel = forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
     as: rootProps.slots.basePopper,
     ownerState: rootProps,
-    placement: "bottom-start",
+    placement: "bottom-end",
     className: clsx(classes.panel, className, variablesClass),
     flip: true,
     onDidShow: onDidShow,

package/esm/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,5 +1,5 @@
 import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("../../..").ValueOptions[] | undefined;
+export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

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 };