@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/components/columnSelection/GridHeaderCheckbox.js

@@ -1,20 +1,29 @@
-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 _gridRowSelectionManager = require("../../models/gridRowSelectionManager");
+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,55 +31,88 @@ 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') {
+    const isRowSelectable = rootProps.isRowSelectable;
+    if (typeof isRowSelectable !== 'function') {
       return selection;
     }
-    return selection.filter(id => {
+    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) {
-        return true;
+        selectionModel.ids.add(id);
       }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
-        return false;
+        continue;
       }
-      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
-    });
-  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
+      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 ? visibleRowIds : paginatedVisibleRowIds;
 
-    // Convert to an object to make O(1) checking if a row exists or not
-    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
-    return rowIds.reduce((acc, id) => {
-      if (!apiRef.current.isRowSelectable(id)) {
-        return acc;
+    // 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);
       }
-      acc[id] = true;
-      return acc;
-    }, {});
+    }
+    return candidates;
   }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
-  const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
-  const isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  const currentSelectionSize = React.useMemo(() => {
+    const selectionManager = (0, _gridRowSelectionManager.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 = (0, _gridRowSelectionManager.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 = {
@@ -100,18 +142,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 +168,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 };