@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/components/columnsManagement/GridColumnsManagement.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
@@ -14,6 +13,7 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useLazyRef } from "../../hooks/utils/useLazyRef.js";
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
+import { NotRendered } from "../../utils/assert.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -129,32 +129,33 @@ function GridColumnsManagement(props) {
         className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
-        variant: "outlined",
         size: "small",
         type: "search",
-        InputProps: {
-          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
-          }),
-          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
-            size: "small",
-            sx: [searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            }],
-            tabIndex: -1,
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        },
-        inputProps: {
-          'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
+        slotProps: {
+          input: {
+            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+              position: "start",
+              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+            }),
+            endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+              size: "small",
+              style: searchValue ? {
+                visibility: 'visible'
+              } : {
+                visibility: 'hidden'
+              },
+              tabIndex: -1,
+              onClick: handleSearchReset
+            }, rootProps.slotProps?.baseIconButton, {
+              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+                fontSize: "small"
+              })
+            }))
+          },
+          htmlInput: {
+            'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
+          }
         },
         autoComplete: "off",
         fullWidth: true
@@ -233,7 +234,29 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
-  searchInputProps: PropTypes.object,
+  searchInputProps: PropTypes.shape({
+    autoComplete: PropTypes.string,
+    className: PropTypes.string,
+    color: PropTypes.oneOf(['error', 'primary']),
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    helperText: PropTypes.string,
+    id: PropTypes.string,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.object
+    })]),
+    label: PropTypes.node,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    placeholder: PropTypes.string,
+    size: PropTypes.oneOf(['medium', 'small']),
+    slotProps: PropTypes.object,
+    style: PropTypes.object,
+    tabIndex: PropTypes.number,
+    type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), PropTypes.object]),
+    value: PropTypes.string
+  }),
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
   /**
@@ -268,7 +291,7 @@ const GridColumnsManagementHeader = styled('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
-const SearchInput = styled(TextField, {
+const SearchInput = styled(NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput',
   overridesResolver: (props, styles) => styles.columnsManagementSearchInput

package/components/containers/GridFooterContainer.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/system';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridFooterContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridFooterContainer: React.ForwardRefExoticComponent<GridFooterContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridFooterContainer };

package/components/containers/GridFooterContainer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,7 +30,7 @@ const GridFooterContainerRoot = styled('div', {
   minHeight: 52,
   borderTop: '1px solid'
 });
-const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+const GridFooterContainer = forwardRef(function GridFooterContainer(props, ref) {
   const {
       className
     } = props,
@@ -37,10 +38,11 @@ const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterCon
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridOverlay.d.ts

@@ -3,7 +3,7 @@ import { Theme, SxProps } from '@mui/system';
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridOverlay };

package/components/containers/GridOverlay.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const GridOverlayRoot = styled('div', {
   justifyContent: 'center',
   backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
 });
-const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = forwardRef(function GridOverlay(props, ref) {
   const {
       className
     } = props,
@@ -39,10 +40,11 @@ const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, re
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridRoot.d.ts

@@ -7,5 +7,5 @@ export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     sx?: SxProps<Theme>;
 }
-declare const GridRoot: React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
-export { GridRoot };
+declare const MemoizedGridRoot: React.ForwardRefExoticComponent<GridRootProps> | React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridRoot as GridRoot };

package/components/containers/GridRoot.js

@@ -1,17 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsSSR } from "../../hooks/utils/useIsSSR.js";
+import { GridHeader } from "../GridHeader.js";
+import { GridBody, GridFooterPlaceholder } from "../base/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
@@ -23,32 +28,38 @@ const useUtilityClasses = (ownerState, density) => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+const GridRoot = forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const {
-      className
+      className,
+      children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = useForkRef(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  useEnhancedEffect(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = useIsSSR();
+  if (isSSR) {
     return null;
   }
-  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
-    ref: handleRef,
+  return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState
-  }, other));
+  }, other, {
+    ref: handleRef,
+    children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
+      children: children
+    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -60,4 +71,5 @@ process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-export { GridRoot };
+const MemoizedGridRoot = fastMemo(GridRoot);
+export { MemoizedGridRoot as GridRoot };