@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.13

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

@@ -4,10 +4,11 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../../constants/cssVariables.js";
 import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
 import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
 import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
@@ -36,19 +37,19 @@ const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
+  gap: vars.spacing(1.5)
+});
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
@@ -126,7 +127,6 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
   const filterSelectorRef = React.useRef(null);
   const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -255,10 +255,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({}, deleteIconProps, {
+      className: clsx(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -321,9 +319,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         value: col.field
       }), getColumnLabel(col)))
     })), /*#__PURE__*/_jsx(FilterFormOperatorInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseSelect
+      as: rootProps.slots.baseSelect,
+      size: "small"
     }, operatorInputProps, {
       className: clsx(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
@@ -341,11 +338,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         key: operator.value,
         value: operator.value
       }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
-    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, valueInputPropsOther, {
+    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({}, valueInputPropsOther, {
       className: clsx(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from '../../../models/colDef/gridColDef';
-export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput'>> & {
+export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
 declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;

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

@@ -1,16 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"],
-  _excluded2 = ["key"],
-  _excluded3 = ["inputProps", "InputProps", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
-import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const filter = createFilterOptions();
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
@@ -56,47 +52,22 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
-  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,
     options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
-    filterOptions: filter,
     id: id,
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-        variant: "outlined",
-        size: "small",
-        label: getOptionLabel(option)
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = _objectWithoutPropertiesLoose(params, _excluded3);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, other, slotProps?.root));
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
-export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options' | 'renderInput'>> & {
+export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };
 declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;

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

@@ -1,10 +1,6 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["key"],
-  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,8 +13,9 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = useId();
+  const [options, setOptions] = React.useState([]);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = useGridRootProps();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
@@ -30,51 +27,29 @@ function GridFilterInputMultipleValue(props) {
       value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
   }, [applyValue, item, type]);
-  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+  const handleInputChange = React.useCallback((event, value) => {
+    if (value === '') {
+      setOptions([]);
+    } else {
+      setOptions([value]);
+    }
+  }, [setOptions]);
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,
     freeSolo: true,
-    options: [],
-    filterOptions: (options, params) => {
-      const {
-        inputValue
-      } = params;
-      return inputValue == null || inputValue === '' ? [] : [inputValue];
-    },
+    options: options,
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-        variant: "outlined",
-        size: "small",
-        label: option
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = _objectWithoutPropertiesLoose(params, _excluded2);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    onInputChange: handleInputChange,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, slotProps?.root));
 }

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

@@ -57,12 +57,9 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: _extends({}, textFieldProps?.slotProps, {
         input: _extends({
-          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-              fontSize: "small",
-              color: "action"
-            })
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
           }) : null
         }, textFieldProps?.slotProps?.input),
         htmlInput: _extends({

package/esm/components/toolbar/GridToolbarFilterButton.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../constants/cssVariables.js";
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -26,12 +27,10 @@ const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList
-})(({
-  theme
-}) => ({
-  margin: theme.spacing(1, 1, 0.5),
-  padding: theme.spacing(0, 1)
-}));
+})({
+  margin: vars.spacing(1, 1, 0.5),
+  padding: vars.spacing(0, 1)
+});
 
 // FIXME(v8:romgrk): override slotProps
 

package/esm/components/toolbar/GridToolbarQuickFilter.js

@@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -28,20 +29,18 @@ const GridToolbarQuickFilterRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter
-})(({
-  theme
-}) => ({
+})({
   [`.${outlinedInputClasses.root}`]: {
-    fontSize: theme.typography.body2.fontSize
+    fontSize: vars.typography.body.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
-  & input[type="search"]::-webkit-search-cancel-button,
-  & input[type="search"]::-webkit-search-results-button,
-  & input[type="search"]::-webkit-search-results-decoration`]: {
+    & input[type="search"]::-webkit-search-cancel-button,
+    & input[type="search"]::-webkit-search-results-button,
+    & input[type="search"]::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
@@ -97,30 +96,24 @@ function GridToolbarQuickFilter(props) {
   }, other, {
     slotProps: _extends({}, slotProps?.root.slotProps, {
       input: _extends({
-        startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+        startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+          fontSize: "small"
+        }),
+        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          style: searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          },
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
             fontSize: "small"
           })
-        }),
-        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-            size: "small",
-            edge: "end",
-            style: searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            },
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        })
+        }))
       }, slotProps?.root.slotProps?.input)
     })
   }, rootProps.slotProps?.baseTextField));

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";

package/esm/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
@@ -17,7 +18,7 @@ const Pinned = styled('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  backgroundColor: vars.cell.background.pinned
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,