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

package/components/columnSelection/GridHeaderCheckbox.js

@@ -1,20 +1,28 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderCheckbox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _utils = require("../../hooks/features/rowSelection/utils");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
+var _gridRowSelectionSelector = require("../../hooks/features/rowSelection/gridRowSelectionSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
+var _gridPaginationSelector = require("../../hooks/features/pagination/gridPaginationSelector");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "colDef"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { isMultipleRowSelectionEnabled } from "../../hooks/features/rowSelection/utils.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { gridTabIndexColumnHeaderSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
-import { gridRowSelectionStateSelector } from "../../hooks/features/rowSelection/gridRowSelectionSelector.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { gridExpandedSortedRowIdsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
-import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../../hooks/features/pagination/gridPaginationSelector.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -22,21 +30,21 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['checkboxInput']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
+const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardRef)(function GridHeaderCheckbox(props, ref) {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [, forceUpdate] = React.useState(false);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
-  const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
-  const paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
+  const tabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
+  const selection = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.gridRowSelectionStateSelector);
+  const visibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowIdsSelector);
+  const paginatedVisibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginatedVisibleSortedGridRowIdsSelector);
   const filteredSelection = React.useMemo(() => {
     if (typeof rootProps.isRowSelectable !== 'function') {
       return selection;
@@ -100,18 +108,20 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
-  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     indeterminate: isIndeterminate,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     className: classes.root,
-    inputProps: {
-      'aria-label': label,
-      name: 'select_all_rows'
+    slotProps: {
+      htmlInput: {
+        'aria-label': label,
+        name: 'select_all_rows'
+      }
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
-    disabled: !isMultipleRowSelectionEnabled(rootProps)
+    disabled: !(0, _utils.isMultipleRowSelectionEnabled)(rootProps)
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));
@@ -124,10 +134,9 @@ process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   /**
    * The column of the current header component.
    */
-  colDef: PropTypes.object.isRequired,
+  colDef: _propTypes.default.object.isRequired,
   /**
    * The column field of the column that triggered the event
    */
-  field: PropTypes.string.isRequired
-} : void 0;
-export { GridHeaderCheckbox };
+  field: _propTypes.default.string.isRequired
+} : void 0;

package/components/columnSelection/index.d.ts

@@ -1,2 +1,2 @@
-export * from './GridCellCheckboxRenderer';
-export * from './GridHeaderCheckbox';
+export * from "./GridCellCheckboxRenderer.js";
+export * from "./GridHeaderCheckbox.js";

package/components/columnSelection/index.js

@@ -1,2 +1,27 @@
-export * from "./GridCellCheckboxRenderer.js";
-export * from "./GridHeaderCheckbox.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridCellCheckboxRenderer = require("./GridCellCheckboxRenderer");
+Object.keys(_GridCellCheckboxRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridCellCheckboxRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridCellCheckboxRenderer[key];
+    }
+  });
+});
+var _GridHeaderCheckbox = require("./GridHeaderCheckbox");
+Object.keys(_GridHeaderCheckbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridHeaderCheckbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridHeaderCheckbox[key];
+    }
+  });
+});

package/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,45 +1,45 @@
 import * as React from 'react';
-import { TextFieldProps } from '../../models/gridBaseSlots';
+import { TextFieldProps } from "../../models/gridBaseSlots.js";
 import type { GridColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsManagementProps {
-    sort?: 'asc' | 'desc';
-    searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
-    searchInputProps?: Partial<TextFieldProps>;
-    /**
-     * If `true`, the column search field will be focused automatically.
-     * If `false`, the first column switch input will be focused automatically.
-     * This helps to avoid input keyboard panel to popup automatically on touch devices.
-     * @default true
-     */
-    autoFocusSearchField?: boolean;
-    /**
-     * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
-     * @default false
-     */
-    disableShowHideToggle?: boolean;
-    /**
-     * If `true`, the `Reset` button will not be disabled
-     * @default false
-     */
-    disableResetButton?: boolean;
-    /**
-     * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
-     * - `all`: Will toggle all columns.
-     * - `filteredOnly`: Will only toggle columns that match the search criteria.
-     * @default 'all'
-     */
-    toggleAllMode?: 'all' | 'filteredOnly';
-    /**
-     * Returns the list of togglable columns.
-     * If used, only those columns will be displayed in the panel
-     * which are passed as the return value of the function.
-     * @param {GridColDef[]} columns The `ColDef` list of all columns.
-     * @returns {GridColDef['field'][]} The list of togglable columns' field names.
-     */
-    getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
+  sort?: 'asc' | 'desc';
+  searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+  searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField?: boolean;
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle?: boolean;
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton?: boolean;
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode?: 'all' | 'filteredOnly';
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
 declare function GridColumnsManagement(props: GridColumnsManagementProps): React.JSX.Element;
 declare namespace GridColumnsManagement {
-    var propTypes: any;
+  var propTypes: any;
 }
-export { GridColumnsManagement };
+export { GridColumnsManagement };

package/components/columnsManagement/GridColumnsManagement.js

@@ -1,20 +1,28 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnsManagement = GridColumnsManagement;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _InputBase = require("@mui/material/InputBase");
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _useLazyRef = require("../../hooks/utils/useLazyRef");
+var _utils = require("./utils");
+var _assert = require("../../utils/assert");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import * as React from 'react';
-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";
-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 {
     classes
@@ -26,21 +34,21 @@ const useUtilityClasses = ownerState => {
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
-  const apiRef = useGridApiContext();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = useLazyRef(() => gridColumnVisibilityModelSelector(apiRef)).current;
-  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  const rootProps = useGridRootProps();
+  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const initialColumnVisibilityModel = (0, _useLazyRef.useLazyRef)(() => (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef)).current;
+  const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [searchValue, setSearchValue] = React.useState('');
   const classes = useUtilityClasses(rootProps);
   const {
     sort,
-    searchPredicate = defaultSearchPredicate,
+    searchPredicate = _utils.defaultSearchPredicate,
     autoFocusSearchField = true,
     disableShowHideToggle = false,
     disableResetButton = false,
@@ -48,7 +56,7 @@ function GridColumnsManagement(props) {
     getTogglableColumns,
     searchInputProps
   } = props;
-  const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
+  const isResetDisabled = React.useMemo(() => (0, _utils.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
     switch (sort) {
       case 'asc':
@@ -76,8 +84,8 @@ function GridColumnsManagement(props) {
     return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
   }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const toggleAllColumns = React.useCallback(isVisible => {
-    const currentModel = gridColumnVisibilityModelSelector(apiRef);
-    const newModel = _extends({}, currentModel);
+    const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const newModel = (0, _extends2.default)({}, currentModel);
     const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
     (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
       if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
@@ -117,11 +125,11 @@ function GridColumnsManagement(props) {
     setSearchValue('');
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(SearchInput, _extends({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInput, (0, _extends2.default)({
         as: rootProps.slots.baseTextField,
         ownerState: rootProps,
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
@@ -133,11 +141,11 @@ function GridColumnsManagement(props) {
         type: "search",
         slotProps: {
           input: {
-            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
               position: "start",
-              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
             }),
-            endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
               "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               size: "small",
               style: searchValue ? {
@@ -148,7 +156,7 @@ function GridColumnsManagement(props) {
               tabIndex: -1,
               onClick: handleSearchReset
             }, rootProps.slotProps?.baseIconButton, {
-              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
                 fontSize: "small"
               })
             }))
@@ -160,42 +168,35 @@ function GridColumnsManagement(props) {
         autoComplete: "off",
         fullWidth: true
       }, rootProps.slotProps?.baseTextField, searchInputProps))
-    }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
-      children: [currentColumns.map(column => /*#__PURE__*/_jsx(FormControlLabel, {
+      children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
         className: classes.row,
-        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-          disabled: column.hideable === false,
-          checked: columnVisibilityModel[column.field] !== false,
-          onClick: toggleColumn,
-          name: column.field,
-          sx: {
-            p: 0.5
-          },
-          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-        }, rootProps.slotProps?.baseCheckbox)),
-        label: column.headerName || column.field
-      }, column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+        disabled: column.hideable === false,
+        checked: columnVisibilityModel[column.field] !== false,
+        onClick: toggleColumn,
+        name: column.field,
+        inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+        label: column.headerName || column.field,
+        size: "medium",
+        density: "compact",
+        fullWidth: true
+      }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
-    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
-      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {
-        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-          disabled: hideableColumns.length === 0,
-          checked: allHideableColumnsVisible,
-          indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-          onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-          sx: {
-            p: 0.5
-          }
-        }, rootProps.slotProps?.baseCheckbox)),
+      children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+        disabled: hideableColumns.length === 0,
+        checked: allHideableColumnsVisible,
+        indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
+        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+        name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
-      }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
       }, rootProps.slotProps?.baseButton, {
@@ -215,17 +216,17 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * This helps to avoid input keyboard panel to popup automatically on touch devices.
    * @default true
    */
-  autoFocusSearchField: PropTypes.bool,
+  autoFocusSearchField: _propTypes.default.bool,
   /**
    * If `true`, the `Reset` button will not be disabled
    * @default false
    */
-  disableResetButton: PropTypes.bool,
+  disableResetButton: _propTypes.default.bool,
   /**
    * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
    * @default false
    */
-  disableShowHideToggle: PropTypes.bool,
+  disableShowHideToggle: _propTypes.default.bool,
   /**
    * Returns the list of togglable columns.
    * If used, only those columns will be displayed in the panel
@@ -233,48 +234,47 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @param {GridColDef[]} columns The `ColDef` list of all columns.
    * @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
+  getTogglableColumns: _propTypes.default.func,
+  searchInputProps: _propTypes.default.shape({
+    autoComplete: _propTypes.default.string,
+    className: _propTypes.default.string,
+    color: _propTypes.default.oneOf(['error', 'primary']),
+    disabled: _propTypes.default.bool,
+    error: _propTypes.default.bool,
+    fullWidth: _propTypes.default.bool,
+    helperText: _propTypes.default.string,
+    id: _propTypes.default.string,
+    inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.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
+    label: _propTypes.default.node,
+    onChange: _propTypes.default.func,
+    onKeyDown: _propTypes.default.func,
+    placeholder: _propTypes.default.string,
+    size: _propTypes.default.oneOf(['medium', 'small']),
+    slotProps: _propTypes.default.object,
+    style: _propTypes.default.object,
+    tabIndex: _propTypes.default.number,
+    type: _propTypes.default.oneOfType([_propTypes.default.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.default.object]),
+    value: _propTypes.default.string
   }),
-  searchPredicate: PropTypes.func,
-  sort: PropTypes.oneOf(['asc', 'desc']),
+  searchPredicate: _propTypes.default.func,
+  sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
    * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
    * - `all`: Will toggle all columns.
    * - `filteredOnly`: Will only toggle columns that match the search criteria.
    * @default 'all'
    */
-  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
+  toggleAllMode: _propTypes.default.oneOf(['all', 'filteredOnly'])
 } : void 0;
-const GridColumnsManagementBody = styled('div', {
+const GridColumnsManagementBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagement',
-  overridesResolver: (props, styles) => styles.columnsManagement
+  slot: 'ColumnsManagement'
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0, 3, 1.5),
+  padding: theme.spacing(0, 2, 1.5),
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
@@ -282,37 +282,34 @@ const GridColumnsManagementBody = styled('div', {
   maxHeight: 400,
   alignItems: 'flex-start'
 }));
-const GridColumnsManagementHeader = styled('div', {
+const GridColumnsManagementHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementHeader',
-  overridesResolver: (props, styles) => styles.columnsManagementHeader
+  slot: 'ColumnsManagementHeader'
 })(({
   theme
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
-const SearchInput = styled(NotRendered, {
+const SearchInput = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementSearchInput',
-  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+  slot: 'ColumnsManagementSearchInput'
 })(({
   theme
 }) => ({
-  [`& .${inputBaseClasses.root}`]: {
+  [`& .${_InputBase.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`]: {
+  [`& .${_InputBase.inputBaseClasses.input}::-webkit-search-decoration,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
 }));
-const GridColumnsManagementFooter = styled('div', {
+const GridColumnsManagementFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementFooter',
-  overridesResolver: (props, styles) => styles.columnsManagementFooter
+  slot: 'ColumnsManagementFooter'
 })(({
   theme
 }) => ({
@@ -321,10 +318,9 @@ const GridColumnsManagementFooter = styled('div', {
   justifyContent: 'space-between',
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-const GridColumnsManagementEmptyText = styled('div')(({
+const GridColumnsManagementEmptyText = (0, _styles.styled)('div')(({
   theme
 }) => ({
   padding: theme.spacing(0.5, 0),
   color: theme.palette.grey[500]
-}));
-export { GridColumnsManagement };
+}));

package/components/columnsManagement/index.d.ts

@@ -1 +1 @@
-export * from './GridColumnsManagement';
+export * from "./GridColumnsManagement.js";

package/components/columnsManagement/index.js

@@ -1 +1,16 @@
-export * from "./GridColumnsManagement.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridColumnsManagement = require("./GridColumnsManagement");
+Object.keys(_GridColumnsManagement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnsManagement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnsManagement[key];
+    }
+  });
+});

package/components/columnsManagement/utils.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
+import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import type { GridColumnsManagementProps } from './GridColumnsManagement';
 export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
-export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;
+export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/components/columnsManagement/utils.js

@@ -1,4 +1,10 @@
-export const checkColumnVisibilityModelsSame = (a, b) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSearchPredicate = exports.checkColumnVisibilityModelsSame = void 0;
+const checkColumnVisibilityModelsSame = (a, b) => {
   // Filter `false` values only, as `true` and not having a key are the same
   const aFalseValues = new Set(Object.keys(a).filter(key => a[key] === false));
   const bFalseValues = new Set(Object.keys(b).filter(key => b[key] === false));
@@ -13,4 +19,6 @@ export const checkColumnVisibilityModelsSame = (a, b) => {
   });
   return result;
 };
-export const defaultSearchPredicate = (column, searchValue) => (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+exports.checkColumnVisibilityModelsSame = checkColumnVisibilityModelsSame;
+const defaultSearchPredicate = (column, searchValue) => (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+exports.defaultSearchPredicate = defaultSearchPredicate;