@mui/x-data-grid 6.1.0 → 6.2.1

package/legacy/hooks/features/rowSelection/useGridRowSelection.js

@@ -12,7 +12,7 @@ import { gridExpandedSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
-import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
 var getSelectionModelPropValue = function getSelectionModelPropValue(selectionModelProp, prevSelectionModel) {
@@ -63,8 +63,6 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
   var checkboxSelection = props.checkboxSelection,
     disableMultipleRowSelection = props.disableMultipleRowSelection,
     disableRowSelectionOnClick = props.disableRowSelectionOnClick,
-    pagination = props.pagination,
-    paginationMode = props.paginationMode,
     propIsRowSelectable = props.isRowSelectable;
   var canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
   var visibleRows = useGridVisibleRows(apiRef, props);
@@ -408,30 +406,13 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
     }
   }, [apiRef, isRowSelectable, isStateControlled, props.rowSelection]);
   React.useEffect(function () {
-    if (!props.rowSelection) {
+    if (!props.rowSelection || isStateControlled) {
       return;
     }
     var currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
-      var _getVisibleRows = getVisibleRows(apiRef, {
-          pagination: pagination,
-          paginationMode: paginationMode
-        }),
-        currentPageRows = _getVisibleRows.rows;
-      var currentPageRowsLookup = currentPageRows.reduce(function (acc, _ref4) {
-        var id = _ref4.id;
-        acc[id] = true;
-        return acc;
-      }, {});
-      var firstSelectableRow = currentSelection.find(function (id) {
-        var isSelectable = true;
-        if (isRowSelectable) {
-          isSelectable = isRowSelectable(id);
-        }
-        return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
-      });
-
-      apiRef.current.setRowSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+      // See https://github.com/mui/mui-x/issues/8455
+      apiRef.current.setRowSelectionModel([]);
     }
-  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleRowSelection, isRowSelectable, pagination, paginationMode, props.rowSelection]);
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
 };

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -186,11 +186,13 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       height: rootRef.current.clientHeight
     });
   }, [rowsMeta.currentPageTotalHeight]);
-  var handleResize = React.useCallback(function (params) {
-    setContainerDimensions({
-      width: params.width,
-      height: params.height
-    });
+  var handleResize = React.useCallback(function () {
+    if (rootRef.current) {
+      setContainerDimensions({
+        width: rootRef.current.clientWidth,
+        height: rootRef.current.clientHeight
+      });
+    }
   }, []);
   useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
@@ -323,7 +325,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
     };
-    var nextRenderContext = params.renderContext,
+    var onRowRender = params.onRowRender,
+      nextRenderContext = params.renderContext,
       _params$minFirstColum = params.minFirstColumn,
       minFirstColumn = _params$minFirstColum === void 0 ? renderZoneMinColumnIndex : _params$minFirstColum,
       _params$maxLastColumn = params.maxLastColumn,
@@ -414,6 +417,9 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       } else {
         isSelected = apiRef.current.isRowSelectable(_id);
       }
+      if (onRowRender) {
+        onRowRender(_id);
+      }
       var focusedCell = cellFocus !== null && cellFocus.id === _id ? cellFocus.field : null;
       var tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === _id) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.1.0
+ * @mui/x-data-grid v6.2.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/joy/index.js

@@ -0,0 +1,2 @@
+import joySlots from './joySlots';
+export { joySlots as unstable_joySlots };

package/legacy/joy/joySlots.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
+import * as React from 'react';
+import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyInput from '@mui/joy/Input';
+import JoyFormControl from '@mui/joy/FormControl';
+import JoyFormLabel from '@mui/joy/FormLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var touchRippleRef = _ref.touchRippleRef,
+    inputProps = _ref.inputProps,
+    onChange = _ref.onChange,
+    color = _ref.color,
+    size = _ref.size,
+    checked = _ref.checked,
+    sx = _ref.sx,
+    value = _ref.value,
+    inputRef = _ref.inputRef,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(JoyCheckbox, _extends({}, props, {
+    slotProps: {
+      input: _extends({}, inputProps, {
+        ref: inputRef
+      })
+    },
+    ref: ref,
+    checked: checked,
+    onChange: onChange
+  }));
+});
+var TextField = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var onChange = _ref2.onChange,
+    label = _ref2.label,
+    placeholder = _ref2.placeholder,
+    value = _ref2.value,
+    inputRef = _ref2.inputRef,
+    type = _ref2.type;
+  return /*#__PURE__*/_jsxs(JoyFormControl, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(JoyFormLabel, {
+      sx: {
+        fontSize: 12
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(JoyInput, {
+      type: type,
+      value: value,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: "sm",
+      slotProps: {
+        input: {
+          ref: inputRef
+        }
+      }
+    })]
+  });
+});
+var joySlots = {
+  baseCheckbox: Checkbox,
+  baseTextField: TextField
+  // BaseFormControl: MUIFormControl,
+  // BaseSelect: MUISelect,
+  // BaseSwitch: MUISwitch,
+  // BaseButton: MUIButton,
+  // BaseIconButton: MUIIconButton,
+  // BaseTooltip: MUITooltip,
+  // BasePopper: MUIPopper,
+};
+
+export default joySlots;

package/legacy/locales/frFR.js

@@ -123,15 +123,13 @@ var frFRGrid = {
   expandDetailPanel: 'Afficher',
   collapseDetailPanel: 'Masquer',
   // Row reordering text
-  rowReorderingHeaderName: 'Positionnement des lignes'
-
+  rowReorderingHeaderName: 'Positionnement des lignes',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agrégation',
+  aggregationFunctionLabelSum: 'Somme',
+  aggregationFunctionLabelAvg: 'Moyenne',
+  aggregationFunctionLabelMin: 'Minimum',
+  aggregationFunctionLabelMax: 'Maximum',
+  aggregationFunctionLabelSize: "Nombre d'éléments"
 };
-
 export var frFR = getGridLocalization(frFRGrid, frFRCore);

package/legacy/locales/urPK.js

@@ -125,11 +125,11 @@ var urPKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'قطاروں کی ترتیب تبدیل کریں',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
-  aggregationFunctionLabelSum: 'sum',
-  aggregationFunctionLabelAvg: 'avg',
-  aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max',
-  aggregationFunctionLabelSize: 'size'
+  aggregationMenuItemHeader: 'ایگریگیشن',
+  aggregationFunctionLabelSum: 'کل',
+  aggregationFunctionLabelAvg: 'اوسط',
+  aggregationFunctionLabelMin: 'کم از کم',
+  aggregationFunctionLabelMax: 'زیادہ سے زیادہ',
+  aggregationFunctionLabelSize: 'سائز'
 };
 export var urPK = getGridLocalization(urPKGrid, urPKCore);

package/legacy/utils/utils.js

@@ -36,7 +36,7 @@ export var clamp = function clamp(value, min, max) {
 /**
  * Based on `fast-deep-equal`
  *
- *  MIT License
+ * MIT License
  *
  * Copyright (c) 2017 Evgeny Poberezkin
  *

package/locales/frFR.js

@@ -111,15 +111,13 @@ const frFRGrid = {
   expandDetailPanel: 'Afficher',
   collapseDetailPanel: 'Masquer',
   // Row reordering text
-  rowReorderingHeaderName: 'Positionnement des lignes'
-
+  rowReorderingHeaderName: 'Positionnement des lignes',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agrégation',
+  aggregationFunctionLabelSum: 'Somme',
+  aggregationFunctionLabelAvg: 'Moyenne',
+  aggregationFunctionLabelMin: 'Minimum',
+  aggregationFunctionLabelMax: 'Maximum',
+  aggregationFunctionLabelSize: "Nombre d'éléments"
 };
-
 export const frFR = getGridLocalization(frFRGrid, frFRCore);

package/locales/urPK.js

@@ -113,11 +113,11 @@ const urPKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'قطاروں کی ترتیب تبدیل کریں',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
-  aggregationFunctionLabelSum: 'sum',
-  aggregationFunctionLabelAvg: 'avg',
-  aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max',
-  aggregationFunctionLabelSize: 'size'
+  aggregationMenuItemHeader: 'ایگریگیشن',
+  aggregationFunctionLabelSum: 'کل',
+  aggregationFunctionLabelAvg: 'اوسط',
+  aggregationFunctionLabelMin: 'کم از کم',
+  aggregationFunctionLabelMax: 'زیادہ سے زیادہ',
+  aggregationFunctionLabelSize: 'سائز'
 };
 export const urPK = getGridLocalization(urPKGrid, urPKCore);

package/material/index.d.ts

@@ -20,7 +20,7 @@ declare const materialSlots: {
             Root?: import("react").ElementType<any> | undefined;
         } | undefined;
         componentsProps?: {
-            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnerState> | undefined;
+            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnProps> | undefined;
         } | undefined;
         sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/models/gridSlotsComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UncapitalizeObjectKeys } from '../internals/utils';
-import { GridIconSlotsComponent } from './gridIconSlotsComponent';
+import type { UncapitalizeObjectKeys } from '../internals/utils';
+import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
 /**
  * Grid components React prop interface containing all the overridable components.
  */

package/modern/components/GridHeader.js

@@ -3,11 +3,9 @@ import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+export function GridHeader() {
   const rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, rootProps.slotProps?.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
-  }));
-});
+  });
+}

package/modern/components/base/GridBody.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMainContainer } from '../containers/GridMainContainer';
-import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -17,12 +17,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
-    children,
     VirtualScrollerComponent,
     ColumnHeadersProps
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
+  const rootRef = React.useRef(null);
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
@@ -39,6 +39,24 @@ function GridBody(props) {
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
+  useEnhancedEffect(() => {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    const observer = new ResizeObserver(() => {
+      apiRef.current.computeSizeAndPublishResizeEvent();
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
@@ -65,10 +83,9 @@ function GridBody(props) {
     columnHeadersElementRef: columnHeadersRef,
     virtualScrollerRef
   });
-  const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent('resize', size);
-  }, [apiRef]);
+  const hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {
+    ref: rootRef,
     children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
       ref: columnsContainerRef,
       innerRef: columnHeadersRef,
@@ -86,15 +103,16 @@ function GridBody(props) {
       columnVisibility: columnVisibility,
       columnGroupsHeaderStructure: columnGroupsHeaderStructure,
       hasOtherElementInTabSequence: hasOtherElementInTabSequence
-    }, ColumnHeadersProps)), /*#__PURE__*/_jsx(GridAutoSizer, {
-      nonce: rootProps.nonce,
-      disableHeight: rootProps.autoHeight,
-      onResize: handleResize,
-      children: /*#__PURE__*/_jsx(VirtualScrollerComponent, {
-        ref: virtualScrollerRef,
-        disableVirtualization: isVirtualizationDisabled
-      })
-    }), children]
+    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
+    // The content is only rendered after dimensions are computed because
+    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
+    // but only does something if the dimensions are also available.
+    // If this event is published while dimensions haven't been computed,
+    // the `onFetchRows` prop won't be called during mount.
+    , {
+      ref: virtualScrollerRef,
+      disableVirtualization: isVirtualizationDisabled
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
@@ -102,7 +120,6 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -35,7 +35,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   };
   const classes = useUtilityClasses(ownerState);
   const checkboxElement = React.useRef(null);
-  const rippleRef = React.useRef();
+  const rippleRef = React.useRef(null);
   const handleRef = useForkRef(checkboxElement, ref);
   const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {

package/modern/components/containers/GridMainContainer.js

@@ -24,12 +24,13 @@ const GridMainContainerRoot = styled('div', {
   flexDirection: 'column',
   overflow: 'hidden'
 }));
-export function GridMainContainer(props) {
+export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridMainContainerRoot, {
+    ref: ref,
     className: classes.root,
     ownerState: rootProps,
     children: props.children
   });
-}
+});

package/modern/components/containers/GridRoot.js

@@ -54,11 +54,6 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   useEnhancedEffect(() => {
     setMountedState(true);
   }, []);
-  useEnhancedEffect(() => {
-    if (mountedState) {
-      apiRef.current.updateGridDimensionsRef();
-    }
-  }, [apiRef, mountedState]);
   if (!mountedState) {
     return null;
   }

package/modern/components/index.js

@@ -8,7 +8,6 @@ export * from './menu';
 export * from './panel';
 export * from './toolbar';
 export * from './GridApiContext';
-export * from './GridAutoSizer';
 export * from './GridFooter';
 export * from './GridHeader';
 export * from './GridLoadingOverlay';

package/modern/components/panel/GridColumnsPanel.js

@@ -94,8 +94,9 @@ function GridColumnsPanel(props) {
   const toggleAllColumns = React.useCallback(isVisible => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     const newModel = _extends({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
     columns.forEach(col => {
-      if (col.hideable) {
+      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
         if (isVisible) {
           // delete the key from the model instead of setting it to `true`
           delete newModel[col.field];
@@ -105,7 +106,7 @@ function GridColumnsPanel(props) {
       }
     });
     return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns]);
+  }, [apiRef, columns, getTogglableColumns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);
   }, []);

package/modern/components/panel/GridPanel.js

@@ -115,6 +115,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   /**
    * If `true`, the component is shown.
    */
-  open: PropTypes.bool.isRequired
+  open: PropTypes.bool.isRequired,
+  ownerState: PropTypes.object
 } : void 0;
 export { GridPanel };

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,6 +16,8 @@ export function GridFilterInputBoolean(props) {
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = useGridRootProps();
+  const labelId = useId();
+  const selectId = useId();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -28,34 +31,39 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
-    // TODO: use baseSelect slot
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    select: true,
-    variant: "standard",
-    SelectProps: _extends({
+  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
+      id: labelId,
+      shrink: true,
+      variant: "standard",
+      children: label
+    })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+      labelId: labelId,
+      id: selectId,
+      label: label,
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
       native: isSelectNative,
-      displayEmpty: true
-    }, rootProps.slotProps?.baseSelect),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "",
-      children: apiRef.current.getLocaleText('filterValueAny')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "true",
-      children: apiRef.current.getLocaleText('filterValueTrue')
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-      native: isSelectNative,
-      value: "false",
-      children: apiRef.current.getLocaleText('filterValueFalse')
+      displayEmpty: true,
+      inputProps: {
+        ref: focusElementRef
+      }
+    }, others, baseSelectProps, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "",
+        children: apiRef.current.getLocaleText('filterValueAny')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "true",
+        children: apiRef.current.getLocaleText('filterValueTrue')
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        native: isSelectNative,
+        value: "false",
+        children: apiRef.current.getLocaleText('filterValueFalse')
+      }))]
     }))]
-  }));
+  });
 }