From b3b429ea6743d074feacabb85624d547855177e6 Mon Sep 17 00:00:00 2001
From: Bilal Shafi <bilalshafidev@gmail.com>
Date: Wed, 28 Aug 2024 17:02:22 +0500
Subject: [PATCH] [DataGridPro] Improve compact density UI for header filters

---
 .../CustomHeaderFilterDataGridPro.js          |  2 +-
 .../CustomHeaderFilterDataGridPro.tsx         |  2 +-
 .../CustomHeaderFilterSingleDataGridPro.js    | 12 +++--
 .../CustomHeaderFilterSingleDataGridPro.tsx   | 12 +++--
 .../headerFiltering/GridHeaderFilterCell.tsx  |  7 ++-
 .../filterPanel/GridFilterInputBoolean.tsx    | 48 ++++++++++++++++++-
 .../GridFilterInputSingleSelect.tsx           | 40 +++++++++++++++-
 7 files changed, 109 insertions(+), 14 deletions(-)

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
index 294ebacdbea2c..0d8a0860c14b5 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
@@ -89,7 +89,7 @@ function CustomHeaderFilter(props) {
       {...mouseEventsHandlers}
     >
       <Button
-        centerRipple={false}
+        disableRipple
         onClick={() => apiRef.current.showFilterPanel(colDef.field)}
       >
         {activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
index 8603a2d4e52d5..396868f1a8462 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
@@ -96,7 +96,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
       {...mouseEventsHandlers}
     >
       <Button
-        centerRipple={false}
+        disableRipple
         onClick={() => apiRef.current.showFilterPanel(colDef.field)}
       >
         {activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
index ede0923b1ce08..675c4bdb928b3 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
@@ -8,6 +8,7 @@ import {
   gridFilterModelSelector,
   useGridSelector,
   useGridApiContext,
+  gridDensitySelector,
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
@@ -17,6 +18,7 @@ function AdminFilter(props) {
   const { colDef } = props;
   const apiRef = useGridApiContext();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const currentFieldFilters = React.useMemo(
     () => filterModel.items?.filter(({ field }) => field === colDef.field),
     [colDef.field, filterModel.items],
@@ -43,13 +45,15 @@ function AdminFilter(props) {
 
   return (
     <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      {density !== 'compact' ? (
+        <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      ) : null}
       <Select
-        labelId="select-is-admin-label"
-        id="select-is-admin"
+        {...(density !== 'compact'
+          ? { ...{ labelId: 'select-is-admin-label', id: 'select-is-admin', label } }
+          : {})}
         value={value}
         onChange={handleChange}
-        label={label}
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
index 3f591c64efe94..f3ca947235013 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -9,6 +9,7 @@ import {
   gridFilterModelSelector,
   useGridSelector,
   useGridApiContext,
+  gridDensitySelector,
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
@@ -18,6 +19,7 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
   const { colDef } = props;
   const apiRef = useGridApiContext();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const currentFieldFilters = React.useMemo(
     () => filterModel.items?.filter(({ field }) => field === colDef.field),
     [colDef.field, filterModel.items],
@@ -44,13 +46,15 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
 
   return (
     <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      {density !== 'compact' ? (
+        <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      ) : null}
       <Select
-        labelId="select-is-admin-label"
-        id="select-is-admin"
+        {...(density !== 'compact'
+          ? { ...{ labelId: 'select-is-admin-label', id: 'select-is-admin', label } }
+          : {})}
         value={value}
         onChange={handleChange}
-        label={label}
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 68360d2c72033..462cb4efccc1b 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -18,6 +18,7 @@ import {
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
+  gridDensitySelector,
 } from '@mui/x-data-grid';
 import {
   GridStateColDef,
@@ -122,6 +123,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
     const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
     const isMenuOpen = menuOpenField === colDef.field;
 
+    const density = useGridSelector(apiRef, gridDensitySelector);
+
     // TODO: Support for `isAnyOf` operator
     const filterOperators = React.useMemo(() => {
       if (!colDef.filterOperators) {
@@ -347,8 +350,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
                   }));
                 }
               }}
-              label={capitalize(label)}
-              placeholder=""
+              label={density === 'compact' ? null : capitalize(label)}
+              placeholder={density === 'compact' ? label : undefined}
               isFilterActive={isFilterActive}
               clearButton={
                 showClearIcon && isApplied ? (
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 89d0a2114e331..922fba7d352c1 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -63,7 +63,53 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     setFilterValueState(item.value || '');
   }, [item.value]);
 
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  const label =
+    labelProp === undefined ? apiRef.current.getLocaleText('filterPanelInputLabel') : labelProp;
+
+  if (label === null) {
+    return (
+      <BooleanOperatorContainer>
+        <rootProps.slots.baseFormControl fullWidth>
+          <rootProps.slots.baseSelect
+            value={filterValueState}
+            onChange={onFilterChange}
+            variant={variant}
+            notched={variant === 'outlined' ? true : undefined}
+            native={isSelectNative}
+            displayEmpty
+            inputProps={{ ref: focusElementRef, tabIndex }}
+            {
+              ...(others as any) /* FIXME: typing error */
+            }
+            {...baseSelectProps}
+          >
+            <rootProps.slots.baseSelectOption
+              {...baseSelectOptionProps}
+              native={isSelectNative}
+              value=""
+            >
+              {apiRef.current.getLocaleText('filterValueAny')}
+            </rootProps.slots.baseSelectOption>
+            <rootProps.slots.baseSelectOption
+              {...baseSelectOptionProps}
+              native={isSelectNative}
+              value="true"
+            >
+              {apiRef.current.getLocaleText('filterValueTrue')}
+            </rootProps.slots.baseSelectOption>
+            <rootProps.slots.baseSelectOption
+              {...baseSelectOptionProps}
+              native={isSelectNative}
+              value="false"
+            >
+              {apiRef.current.getLocaleText('filterValueFalse')}
+            </rootProps.slots.baseSelectOption>
+          </rootProps.slots.baseSelect>
+        </rootProps.slots.baseFormControl>
+        {clearButton}
+      </BooleanOperatorContainer>
+    );
+  }
 
   return (
     <BooleanOperatorContainer>
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index d88468fb9cd1b..b3c2e2a7b60ae 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -119,7 +119,45 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     return null;
   }
 
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  const label =
+    labelProp === undefined ? apiRef.current.getLocaleText('filterPanelInputLabel') : labelProp;
+
+  if (label === null) {
+    return (
+      <SingleSelectOperatorContainer>
+        <rootProps.slots.baseFormControl fullWidth>
+          <rootProps.slots.baseSelect
+            value={filterValue}
+            onChange={onFilterChange}
+            variant={variant}
+            type={type || 'text'}
+            inputProps={{
+              tabIndex,
+              ref: focusElementRef,
+              placeholder:
+                placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+            }}
+            native={isSelectNative}
+            notched={variant === 'outlined' ? true : undefined}
+            {
+              ...(others as any) /* FIXME: typing error */
+            }
+            {...rootProps.slotProps?.baseSelect}
+          >
+            {renderSingleSelectOptions({
+              column: resolvedColumn,
+              OptionComponent: rootProps.slots.baseSelectOption,
+              getOptionLabel,
+              getOptionValue,
+              isSelectNative,
+              baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+            })}
+          </rootProps.slots.baseSelect>
+        </rootProps.slots.baseFormControl>
+        {clearButton}
+      </SingleSelectOperatorContainer>
+    );
+  }
 
   return (
     <SingleSelectOperatorContainer>