@mui/x-data-grid 7.0.0-alpha.9 → 7.0.0-beta.0

package/hooks/core/useGridApiInitialization.js

@@ -69,6 +69,7 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
+  var _inputApiRef$current;
   const publicApiRef = React.useRef();
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -99,6 +100,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;

package/hooks/features/rows/gridRowsUtils.js

@@ -131,7 +131,10 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
     if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[child])) {
       validDescendants.push(child);
     }
-    validDescendants.push(...getTreeNodeDescendants(tree, child, skipAutoGeneratedRows));
+    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);
+    for (let j = 0; j < childDescendants.length; j += 1) {
+      validDescendants.push(childDescendants[j]);
+    }
   }
   if (!skipAutoGeneratedRows && node.footerId != null) {
     validDescendants.push(node.footerId);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.9
+ * @mui/x-data-grid v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/components/GridRow.js

@@ -438,106 +438,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  pinnedColumns: PropTypes.shape({
-    left: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired,
-    right: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired
-  }).isRequired,
+  pinnedColumns: PropTypes.object.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,

package/legacy/components/columnsManagement/GridColumnsManagement.js

@@ -0,0 +1,300 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useLazyRef } from '../../hooks/utils/useLazyRef';
+import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['columnsManagement'],
+    header: ['columnsManagementHeader'],
+    footer: ['columnsManagementFooter'],
+    row: ['columnsManagementRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var collator = new Intl.Collator();
+function GridColumnsManagement(props) {
+  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
+  var apiRef = useGridApiContext();
+  var searchInputRef = React.useRef(null);
+  var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  var initialColumnVisibilityModel = useLazyRef(function () {
+    return gridColumnVisibilityModelSelector(apiRef);
+  }).current;
+  var columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var rootProps = useGridRootProps();
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchValue = _React$useState2[0],
+    setSearchValue = _React$useState2[1];
+  var classes = useUtilityClasses(rootProps);
+  var sort = props.sort,
+    _props$searchPredicat = props.searchPredicate,
+    searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
+    _props$autoFocusSearc = props.autoFocusSearchField,
+    autoFocusSearchField = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc,
+    _props$disableShowHid = props.disableShowHideToggle,
+    disableShowHideToggle = _props$disableShowHid === void 0 ? false : _props$disableShowHid,
+    _props$disableResetBu = props.disableResetButton,
+    disableResetButton = _props$disableResetBu === void 0 ? false : _props$disableResetBu,
+    getTogglableColumns = props.getTogglableColumns;
+  var isResetDisabled = React.useMemo(function () {
+    return checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel);
+  }, [columnVisibilityModel, initialColumnVisibilityModel]);
+  var sortedColumns = React.useMemo(function () {
+    switch (sort) {
+      case 'asc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+      case 'desc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return -collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+  var toggleColumn = function toggleColumn(event) {
+    var _ref = event.target,
+      field = _ref.name;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+  var toggleAllColumns = React.useCallback(function (isVisible) {
+    var currentModel = gridColumnVisibilityModelSelector(apiRef);
+    var newModel = _extends({}, currentModel);
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    columns.forEach(function (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]);
+  var handleSearchValueChange = React.useCallback(function (event) {
+    setSearchValue(event.target.value);
+  }, []);
+  var currentColumns = React.useMemo(function () {
+    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref2) {
+      var field = _ref2.field;
+      return togglableColumns.includes(field);
+    }) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(function (column) {
+      return searchPredicate(column, searchValue.toLowerCase());
+    });
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  var hideableColumns = React.useMemo(function () {
+    return currentColumns.filter(function (col) {
+      return col.hideable;
+    });
+  }, [currentColumns]);
+  var allHideableColumnsVisible = React.useMemo(function () {
+    return hideableColumns.every(function (column) {
+      return columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false;
+    });
+  }, [columnVisibilityModel, hideableColumns]);
+  var allHideableColumnsHidden = React.useMemo(function () {
+    return hideableColumns.every(function (column) {
+      return columnVisibilityModel[column.field] === false;
+    });
+  }, [columnVisibilityModel, hideableColumns]);
+  var firstSwitchRef = React.useRef(null);
+  React.useEffect(function () {
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  var firstHideableColumnFound = false;
+  var isFirstHideableColumn = function isFirstHideableColumn(column) {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+    return false;
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+        placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "outlined",
+        size: "small",
+        InputProps: {
+          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+          }),
+          sx: {
+            pl: 1.5
+          }
+        },
+        fullWidth: true
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
+    }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+      className: classes.root,
+      ownerState: rootProps,
+      children: [currentColumns.map(function (column) {
+        var _rootProps$slotProps2;
+        return /*#__PURE__*/_jsx(FormControlLabel, {
+          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$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseCheckbox)),
+          label: column.headerName || column.field
+        }, column.field);
+      }), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+        ownerState: rootProps,
+        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+      })]
+    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/_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: function onClick() {
+            return toggleAllColumns(!allHideableColumnsVisible);
+          },
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
+        sx: _defineProperty({}, ".MuiFormControlLabel-label", {
+          textTransform: 'uppercase',
+          fontSize: '14px'
+        }),
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+      }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: function onClick() {
+          return apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel);
+        },
+        disabled: isResetDisabled
+      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
+        children: "Reset"
+      })) : 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 "yarn 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,
+  searchPredicate: PropTypes.func,
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+var GridColumnsManagementBody = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagement',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnsManagement;
+  }
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    padding: theme.spacing(0, 3, 1.5),
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'auto',
+    flex: '1 1',
+    maxHeight: 400,
+    alignItems: 'flex-start'
+  };
+});
+var GridColumnsManagementHeader = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementHeader',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnsManagementHeader;
+  }
+})(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    padding: theme.spacing(1.5, 3)
+  };
+});
+var GridColumnsManagementFooter = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementFooter',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnsManagementFooter;
+  }
+})(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    padding: theme.spacing(0.5, 1, 0.5, 2.4),
+    display: 'flex',
+    justifyContent: 'space-between',
+    borderTop: "1px solid ".concat(theme.palette.divider)
+  };
+});
+var GridColumnsManagementEmptyText = styled('div')(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    padding: theme.spacing(0.5, 0),
+    color: theme.palette.grey[500]
+  };
+});
+export { GridColumnsManagement };

package/legacy/components/columnsManagement/index.js

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

package/legacy/components/columnsManagement/utils.js

@@ -0,0 +1,22 @@
+export var checkColumnVisibilityModelsSame = function checkColumnVisibilityModelsSame(a, b) {
+  // Filter `false` values only, as `true` and not having a key are the same
+  var aFalseValues = new Set(Object.keys(a).filter(function (key) {
+    return a[key] === false;
+  }));
+  var bFalseValues = new Set(Object.keys(b).filter(function (key) {
+    return b[key] === false;
+  }));
+  if (aFalseValues.size !== bFalseValues.size) {
+    return false;
+  }
+  var result = true;
+  aFalseValues.forEach(function (key) {
+    if (!bFalseValues.has(key)) {
+      result = false;
+    }
+  });
+  return result;
+};
+export var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};

package/legacy/components/index.js

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';