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

package/{modern/components/panel/GridPreferencePanelContext.js → esm/components/panel/GridPanelContext.js}

@@ -1,23 +1,25 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridPreferencePanelContext = /*#__PURE__*/React.createContext(undefined);
-export function useGridPreferencePanelContext() {
-  const context = React.useContext(GridPreferencePanelContext);
+export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+export function useGridPanelContext() {
+  const context = React.useContext(GridPanelContext);
   if (context === undefined) {
     throw new Error('MUI X: Missing context.');
   }
   return context;
 }
-export function GridPreferencePanelContextProvider({
+export function GridPanelContextProvider({
   children
 }) {
   const columnsPanelTriggerRef = React.useRef(null);
   const filterPanelTriggerRef = React.useRef(null);
+  const aiAssistantPanelTriggerRef = React.useRef(null);
   const value = React.useMemo(() => ({
     columnsPanelTriggerRef,
-    filterPanelTriggerRef
+    filterPanelTriggerRef,
+    aiAssistantPanelTriggerRef
   }), []);
-  return /*#__PURE__*/_jsx(GridPreferencePanelContext.Provider, {
+  return /*#__PURE__*/_jsx(GridPanelContext.Provider, {
     value: value,
     children: children
   });

package/esm/components/panel/GridPreferencesPanel.js

@@ -6,7 +6,7 @@ import { gridPreferencePanelStateSelector } from "../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridPreferencePanelContext } from "./GridPreferencePanelContext.js";
+import { useGridPanelContext } from "./GridPanelContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridPreferencesPanel() {
   const apiRef = useGridApiContext();
@@ -15,14 +15,29 @@ export function GridPreferencesPanel() {
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const {
     columnsPanelTriggerRef,
-    filterPanelTriggerRef
-  } = useGridPreferencePanelContext();
+    filterPanelTriggerRef,
+    aiAssistantPanelTriggerRef
+  } = useGridPanelContext();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
+  let target = null;
+  switch (preferencePanelState.openedPanelValue) {
+    case GridPreferencePanelsValue.filters:
+      target = filterPanelTriggerRef.current;
+      break;
+    case GridPreferencePanelsValue.columns:
+      target = columnsPanelTriggerRef.current;
+      break;
+    case GridPreferencePanelsValue.aiAssistant:
+      target = aiAssistantPanelTriggerRef.current;
+      break;
+    default:
+  }
   return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     id: preferencePanelState.panelId,
     open: columns.length > 0 && preferencePanelState.open,
     "aria-labelledby": preferencePanelState.labelId,
-    target: preferencePanelState.openedPanelValue === GridPreferencePanelsValue.filters ? filterPanelTriggerRef.current : columnsPanelTriggerRef.current
+    target: target,
+    onClose: () => apiRef.current.hidePreferences()
   }, rootProps.slotProps?.panel, {
     children: panelContent
   }));

package/esm/components/panel/filterPanel/GridFilterForm.js

@@ -17,6 +17,7 @@ import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../../constants/gridClasses.js";
 import { getValueFromValueOptions, getValueOptions } from "./filterPanelUtils.js";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../../../hooks/features/pivoting/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
@@ -134,6 +135,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       InputComponentProps
     } = valueInputProps,
     valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const initialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
   const {
     filteredColumns,
     selectedField
@@ -148,6 +151,12 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         selectedField: itemField
       };
     }
+    if (pivotActive) {
+      return {
+        filteredColumns: filterableColumns.filter(column => initialColumns.get(column.field) !== undefined),
+        selectedField: itemField
+      };
+    }
     if (filterColumns === undefined || typeof filterColumns !== 'function') {
       return {
         filteredColumns: filterableColumns,
@@ -169,7 +178,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       }),
       selectedField: itemField
     };
-  }, [filterColumns, filterModel?.items, filterableColumns, item.field, columnLookup]);
+  }, [item.field, columnLookup, pivotActive, filterColumns, filterableColumns, filterModel?.items, initialColumns]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':

package/esm/components/quickFilter/QuickFilterControl.js

@@ -91,6 +91,7 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -105,6 +106,7 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
     current: PropTypes.object
   })]),
   label: PropTypes.node,
+  multiline: PropTypes.bool,
   placeholder: PropTypes.string,
   /**
    * A function to customize rendering of the component.

package/esm/components/toolbar/GridToolbar.d.ts

@@ -13,5 +13,8 @@ export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbar
    */
   quickFilterProps?: GridToolbarQuickFilterProps;
 }
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbar };

package/esm/components/toolbar/GridToolbar.js

@@ -13,6 +13,9 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 import { GridToolbarLabel } from "../toolbarV8/GridToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate

package/esm/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -10,5 +10,8 @@ interface GridToolbarColumnsButtonProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarColumnsButton };

package/esm/components/toolbar/GridToolbarColumnsButton.js

@@ -9,8 +9,11 @@ import { gridPreferencePanelStateSelector } from "../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
@@ -23,7 +26,7 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
   const rootProps = useGridRootProps();
   const {
     columnsPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const handleRef = useForkRef(ref, columnsPanelTriggerRef);
   const showColumns = event => {

package/esm/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -10,5 +10,8 @@ interface GridToolbarDensitySelectorProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarDensitySelector };

package/esm/components/toolbar/GridToolbarDensitySelector.js

@@ -11,6 +11,9 @@ import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}

package/esm/components/toolbar/GridToolbarExport.d.ts

@@ -35,5 +35,8 @@ declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): R
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/esm/components/toolbar/GridToolbarExport.js

@@ -84,6 +84,10 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
   const _ref = props,
     {

package/esm/components/toolbar/GridToolbarFilterButton.d.ts

@@ -11,5 +11,8 @@ export interface GridToolbarFilterButtonProps {
     badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/esm/components/toolbar/GridToolbarFilterButton.js

@@ -14,7 +14,7 @@ import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -33,6 +33,9 @@ const GridToolbarFilterListRoot = styled('ul', {
   margin: vars.spacing(1, 1, 0.5),
   padding: vars.spacing(0, 1)
 });
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
@@ -50,7 +53,7 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
   const filterPanelId = useId();
   const {
     filterPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const handleRef = useForkRef(ref, filterPanelTriggerRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {

package/esm/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -28,6 +28,9 @@ export type GridToolbarQuickFilterProps = {
     root: TextFieldProps;
   };
 };
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;

package/esm/components/toolbar/GridToolbarQuickFilter.js

@@ -63,6 +63,10 @@ const GridQuickFilterTextField = styled(_props => {
   opacity: ownerState.expanded ? 1 : 0,
   transition: vars.transition(['width', 'opacity'])
 }));
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarInternalProps {
+  additionalItems?: React.ReactNode;
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;

package/esm/components/toolbarV8/GridToolbar.js

@@ -81,6 +81,7 @@ function GridToolbar(props) {
     quickFilterProps,
     csvOptions,
     printOptions,
+    additionalItems,
     additionalExportMenuItems
   } = props;
   const apiRef = useGridApiContext();
@@ -106,6 +107,7 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: state.filterCount > 0 ? 'primary' : 'default',
           children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -116,7 +118,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
+    }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         children: /*#__PURE__*/_jsx(ToolbarButton, {
@@ -164,6 +166,7 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   additionalExportMenuItems: PropTypes.func,
+  additionalItems: PropTypes.node,
   csvOptions: PropTypes.object,
   printOptions: PropTypes.object,
   /**

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-type OwnerState = DataGridProcessedProps;
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
-  ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/components/toolbarV8/Toolbar.js

@@ -152,8 +152,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
     role: 'toolbar',
     'aria-orientation': 'horizontal',
     'aria-label': rootProps.label || undefined,
-    className: clsx(classes.root, className),
-    ownerState: rootProps
+    className: clsx(classes.root, className)
   }, other, {
     ref
   }));

package/esm/constants/cssVariables.d.ts

@@ -9,6 +9,7 @@ declare const keys: {
       readonly muted: "--DataGrid-t-color-foreground-muted";
       readonly accent: "--DataGrid-t-color-foreground-accent";
       readonly disabled: "--DataGrid-t-color-foreground-disabled";
+      readonly error: "--DataGrid-t-color-foreground-error";
     };
     readonly background: {
       readonly base: "--DataGrid-t-color-background-base";
@@ -101,6 +102,7 @@ export declare const vars: {
       readonly muted: "--DataGrid-t-color-foreground-muted";
       readonly accent: "--DataGrid-t-color-foreground-accent";
       readonly disabled: "--DataGrid-t-color-foreground-disabled";
+      readonly error: "--DataGrid-t-color-foreground-error";
     };
     readonly background: {
       readonly base: "--DataGrid-t-color-background-base";
@@ -190,6 +192,7 @@ export declare const vars: {
         readonly muted: "--DataGrid-t-color-foreground-muted";
         readonly accent: "--DataGrid-t-color-foreground-accent";
         readonly disabled: "--DataGrid-t-color-foreground-disabled";
+        readonly error: "--DataGrid-t-color-foreground-error";
       };
       readonly background: {
         readonly base: "--DataGrid-t-color-background-base";

package/esm/constants/cssVariables.js

@@ -32,7 +32,8 @@ const keys = {
       base: '--DataGrid-t-color-foreground-base',
       muted: '--DataGrid-t-color-foreground-muted',
       accent: '--DataGrid-t-color-foreground-accent',
-      disabled: '--DataGrid-t-color-foreground-disabled'
+      disabled: '--DataGrid-t-color-foreground-disabled',
+      error: '--DataGrid-t-color-foreground-error'
     },
     background: {
       base: '--DataGrid-t-color-background-base',