@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

package/components/columnsManagement/GridColumnsManagement.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -12,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 {
@@ -20,6 +22,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
@@ -42,7 +45,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
-    getTogglableColumns
+    getTogglableColumns,
+    searchInputProps
   } = props;
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
@@ -109,28 +113,53 @@ function GridColumnsManagement(props) {
     }
     return false;
   };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    searchInputRef.current.focus();
+  }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      children: /*#__PURE__*/_jsx(SearchInput, _extends({
+        as: rootProps.slots.baseTextField,
+        ownerState: rootProps,
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
+        className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
-        variant: "outlined",
         size: "small",
-        InputProps: {
-          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
-          }),
-          sx: {
-            pl: 1.5
+        type: "search",
+        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
-      }, rootProps.slotProps?.baseTextField))
+      }, rootProps.slotProps?.baseTextField, searchInputProps))
     }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
@@ -205,6 +234,29 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
+  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']),
   /**
@@ -239,6 +291,24 @@ const GridColumnsManagementHeader = styled('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
+const SearchInput = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+})(({
+  theme
+}) => ({
+  [`& .${inputBaseClasses.root}`]: {
+    padding: theme.spacing(0, 1.5, 0, 1.5)
+  },
+  [`& .${inputBaseClasses.input}::-webkit-search-decoration,
+  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+}));
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',

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,21 @@
 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 { 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 { 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,10 +27,11 @@ 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();
@@ -44,11 +49,15 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   if (!mountedState) {
     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 +69,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 };