@mui/x-data-grid 8.0.0-beta.3 → 8.1.0

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,153 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { objectShallowCompare, useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { getCheckboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['checkboxInput']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(props, ref) {
-  const {
-      field,
-      id,
-      rowNode,
-      tabIndex
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
-  const handleChange = event => {
-    const params = {
-      value: event.target.checked,
-      id
-    };
-    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
-  };
-  React.useLayoutEffect(() => {
-    if (tabIndex === 0) {
-      const element = apiRef.current.getCellElement(id, field);
-      if (element) {
-        element.tabIndex = -1;
-      }
-    }
-  }, [apiRef, tabIndex, id, field]);
-  const handleKeyDown = React.useCallback(event => {
-    if (event.key === ' ') {
-      // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
-      // TODO: Remove and add a check inside useGridKeyboardNavigation
-      event.stopPropagation();
-    }
-  }, []);
-  const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = getCheckboxPropsSelector(id, rootProps.rowSelectionPropagation?.parents ?? false);
-  const {
-    isIndeterminate,
-    isChecked
-  } = useGridSelector(apiRef, checkboxPropsSelector, undefined, objectShallowCompare);
-  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
-    return null;
-  }
-  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    tabIndex: tabIndex,
-    checked: isChecked && !isIndeterminate,
-    onChange: handleChange,
-    className: classes.root,
-    slotProps: {
-      htmlInput: {
-        'aria-label': label,
-        name: 'select_row'
-      }
-    },
-    onKeyDown: handleKeyDown,
-    indeterminate: isIndeterminate,
-    disabled: !isSelectable
-  }, rootProps.slotProps?.baseCheckbox, other, {
-    ref: ref
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: PropTypes.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: PropTypes.any
-} : void 0;
-export { GridCellCheckboxForwardRef };
-export const GridCellCheckboxRenderer = GridCellCheckboxForwardRef;

package/modern/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
-export { GridHeaderCheckbox };

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -1,169 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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 { createRowSelectionManager } from "../../models/gridRowSelectionManager.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['checkboxInput']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [, forceUpdate] = React.useState(false);
-  const apiRef = useGridApiContext();
-  const rootProps = 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 filteredSelection = React.useMemo(() => {
-    const isRowSelectable = rootProps.isRowSelectable;
-    if (typeof isRowSelectable !== 'function') {
-      return selection;
-    }
-    if (selection.type === 'exclude') {
-      return selection;
-    }
-
-    // selection.type === 'include'
-    const selectionModel = {
-      type: 'include',
-      ids: new Set()
-    };
-    for (const id of selection.ids) {
-      if (rootProps.keepNonExistentRowsSelected) {
-        selectionModel.ids.add(id);
-      }
-      // The row might have been deleted
-      if (!apiRef.current.getRow(id)) {
-        continue;
-      }
-      if (isRowSelectable(apiRef.current.getRowParams(id))) {
-        selectionModel.ids.add(id);
-      }
-    }
-    return selectionModel;
-  }, [apiRef, rootProps.isRowSelectable, rootProps.keepNonExistentRowsSelected, selection]);
-
-  // All the rows that could be selected / unselected by toggling this checkbox
-  const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
-
-    // Convert to a Set to make O(1) checking if a row exists or not
-    const candidates = new Set();
-    for (let i = 0; i < rowIds.length; i += 1) {
-      const id = rowIds[i];
-      if (apiRef.current.isRowSelectable(id)) {
-        candidates.add(id);
-      }
-    }
-    return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
-
-  // Amount of rows selected and that are visible in the current page
-  const currentSelectionSize = React.useMemo(() => {
-    const selectionManager = createRowSelectionManager(filteredSelection);
-    let size = 0;
-    for (const id of selectionCandidates) {
-      if (selectionManager.has(id)) {
-        size += 1;
-      }
-    }
-    return size;
-  }, [filteredSelection, selectionCandidates]);
-  const isIndeterminate = React.useMemo(() => {
-    if (filteredSelection.ids.size === 0) {
-      return false;
-    }
-    const selectionManager = createRowSelectionManager(filteredSelection);
-    for (const rowId of selectionCandidates) {
-      if (!selectionManager.has(rowId)) {
-        return true;
-      }
-    }
-    return false;
-  }, [filteredSelection, selectionCandidates]);
-  const isChecked = currentSelectionSize > 0;
-  const handleChange = event => {
-    const params = {
-      value: event.target.checked
-    };
-    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
-  };
-  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
-  React.useLayoutEffect(() => {
-    const element = apiRef.current.getColumnHeaderElement(props.field);
-    if (tabIndex === 0 && element) {
-      element.tabIndex = -1;
-    }
-  }, [tabIndex, apiRef, props.field]);
-  const handleKeyDown = React.useCallback(event => {
-    if (event.key === ' ') {
-      // imperative toggle the checkbox because Space is disable by some preventDefault
-      apiRef.current.publishEvent('headerSelectionCheckboxChange', {
-        value: !isChecked
-      });
-    }
-  }, [apiRef, isChecked]);
-  const handleSelectionChange = React.useCallback(() => {
-    forceUpdate(p => !p);
-  }, []);
-  React.useEffect(() => {
-    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
-  }, [apiRef, handleSelectionChange]);
-  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
-  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    indeterminate: isIndeterminate,
-    checked: isChecked && !isIndeterminate,
-    onChange: handleChange,
-    className: classes.root,
-    slotProps: {
-      htmlInput: {
-        'aria-label': label,
-        name: 'select_all_rows'
-      }
-    },
-    tabIndex: tabIndex,
-    onKeyDown: handleKeyDown,
-    disabled: !isMultipleRowSelectionEnabled(rootProps)
-  }, rootProps.slotProps?.baseCheckbox, other, {
-    ref: ref
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The column of the current header component.
-   */
-  colDef: PropTypes.object.isRequired,
-  /**
-   * The column field of the column that triggered the event
-   */
-  field: PropTypes.string.isRequired
-} : void 0;
-export { GridHeaderCheckbox };

package/modern/components/columnSelection/index.d.ts

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

package/modern/components/columnSelection/index.js

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

package/modern/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-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'][];
-}
-declare function GridColumnsManagement(props: GridColumnsManagementProps): React.JSX.Element;
-declare namespace GridColumnsManagement {
-  var propTypes: any;
-}
-export { GridColumnsManagement };

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -1,294 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-/* 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 { styled } from '@mui/material/styles';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { vars } from "../../constants/cssVariables.js";
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridInitialColumnVisibilityModelSelector } 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 { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
-import { NotRendered } from "../../utils/assert.js";
-import { GridShadowScrollArea } from "../GridShadowScrollArea.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnsManagement'],
-    header: ['columnsManagementHeader'],
-    searchInput: ['columnsManagementSearchInput'],
-    footer: ['columnsManagementFooter'],
-    row: ['columnsManagementRow']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const collator = new Intl.Collator();
-function GridColumnsManagement(props) {
-  const apiRef = useGridApiContext();
-  const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
-  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
-  const classes = useUtilityClasses(rootProps);
-  const {
-    sort,
-    searchPredicate = defaultSearchPredicate,
-    autoFocusSearchField = true,
-    disableShowHideToggle = false,
-    disableResetButton = false,
-    toggleAllMode = 'all',
-    getTogglableColumns,
-    searchInputProps
-  } = props;
-  const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
-  const sortedColumns = React.useMemo(() => {
-    switch (sort) {
-      case 'asc':
-        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
-      case 'desc':
-        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
-      default:
-        return columns;
-    }
-  }, [columns, sort]);
-  const toggleColumn = event => {
-    const {
-      name: field
-    } = event.target;
-    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
-  };
-  const currentColumns = React.useMemo(() => {
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
-      field
-    }) => togglableColumns.includes(field)) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    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 togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
-      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];
-        } else {
-          newModel[col.field] = false;
-        }
-      }
-    });
-    return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
-  const handleSearchValueChange = React.useCallback(event => {
-    setSearchValue(event.target.value);
-  }, []);
-  const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
-  const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
-  const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
-  const firstSwitchRef = React.useRef(null);
-  React.useEffect(() => {
-    if (autoFocusSearchField) {
-      searchInputRef.current.focus();
-    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
-      firstSwitchRef.current.focus();
-    }
-  }, [autoFocusSearchField]);
-  let firstHideableColumnFound = false;
-  const isFirstHideableColumn = column => {
-    if (firstHideableColumnFound === false && column.hideable !== false) {
-      firstHideableColumnFound = true;
-      return true;
-    }
-    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(SearchInput, _extends({
-        as: rootProps.slots.baseTextField,
-        ownerState: rootProps,
-        placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
-        inputRef: searchInputRef,
-        className: classes.searchInput,
-        value: searchValue,
-        onChange: handleSearchValueChange,
-        size: "small",
-        type: "search",
-        slotProps: {
-          input: {
-            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
-              fontSize: "small"
-            }),
-            endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-              size: "small",
-              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
-              style: searchValue ? {
-                visibility: 'visible'
-              } : {
-                visibility: 'hidden'
-              },
-              tabIndex: -1,
-              onClick: handleSearchReset,
-              edge: "end"
-            }, 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, searchInputProps))
-    }), /*#__PURE__*/_jsx(GridColumnsManagementScrollArea, {
-      ownerState: rootProps,
-      children: /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-          className: classes.row,
-          disabled: column.hideable === false,
-          checked: columnVisibilityModel[column.field] !== false,
-          onClick: toggleColumn,
-          name: column.field,
-          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
-          label: column.headerName || column.field,
-          density: "compact",
-          fullWidth: true
-        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
-          ownerState: rootProps,
-          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
-        })]
-      })
-    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
-      ownerState: rootProps,
-      className: classes.footer,
-      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-        disabled: hideableColumns.length === 0,
-        checked: allHideableColumnsVisible,
-        indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-        name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-        density: "compact"
-      }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
-        disabled: isResetDisabled
-      }, rootProps.slotProps?.baseButton, {
-        children: apiRef.current.getLocaleText('columnsManagementReset')
-      })) : null]
-    }) : null]
-  });
-}
-process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * 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: PropTypes.bool,
-  /**
-   * If `true`, the `Reset` button will not be disabled
-   * @default false
-   */
-  disableResetButton: PropTypes.bool,
-  /**
-   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
-   * @default false
-   */
-  disableShowHideToggle: PropTypes.bool,
-  /**
-   * 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: PropTypes.func,
-  searchInputProps: PropTypes.object,
-  searchPredicate: PropTypes.func,
-  sort: PropTypes.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'])
-} : void 0;
-const GridColumnsManagementBody = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagement'
-})({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: vars.spacing(0.5, 1.5)
-});
-const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagementScrollArea'
-})({
-  maxHeight: 400
-});
-const GridColumnsManagementHeader = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagementHeader'
-})({
-  padding: vars.spacing(1.5, 2),
-  borderBottom: `1px solid ${vars.colors.border.base}`
-});
-const SearchInput = styled(NotRendered, {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagementSearchInput'
-})({
-  [`& .${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'
-})({
-  padding: vars.spacing(1, 1, 1, 1.5),
-  display: 'flex',
-  justifyContent: 'space-between',
-  borderTop: `1px solid ${vars.colors.border.base}`
-});
-const GridColumnsManagementEmptyText = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagementEmptyText'
-})({
-  padding: vars.spacing(1, 0),
-  alignSelf: 'center',
-  font: vars.typography.font.body
-});
-export { GridColumnsManagement };

package/modern/components/columnsManagement/index.d.ts

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

package/modern/components/columnsManagement/index.js

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