@mui/x-data-grid 7.0.0-beta.3 → 7.0.0-beta.4

package/legacy/components/columnsManagement/GridColumnsManagement.js

@@ -1,307 +0,0 @@
-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,
-    _props$toggleAllMode = props.toggleAllMode,
-    toggleAllMode = _props$toggleAllMode === void 0 ? 'all' : _props$toggleAllMode,
-    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 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 toggleAllColumns = React.useCallback(function (isVisible) {
-    var currentModel = gridColumnVisibilityModelSelector(apiRef);
-    var newModel = _extends({}, currentModel);
-    var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    (toggleAllMode === 'filteredOnly' ? currentColumns : 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, toggleAllMode, currentColumns]);
-  var handleSearchValueChange = React.useCallback(function (event) {
-    setSearchValue(event.target.value);
-  }, []);
-  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'),
-          sx: {
-            p: 0.5
-          }
-        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
-        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']),
-  /**
-   * 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;
-var GridColumnsManagementBody = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsManagement',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.columnsManagement;
-  }
-})(function (_ref3) {
-  var theme = _ref3.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 (_ref4) {
-  var theme = _ref4.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 (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    padding: theme.spacing(0.5, 1, 0.5, 3),
-    display: 'flex',
-    justifyContent: 'space-between',
-    borderTop: "1px solid ".concat(theme.palette.divider)
-  };
-});
-var GridColumnsManagementEmptyText = styled('div')(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    padding: theme.spacing(0.5, 0),
-    color: theme.palette.grey[500]
-  };
-});
-export { GridColumnsManagement };

package/legacy/components/columnsManagement/index.js

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

package/legacy/components/columnsManagement/utils.js

@@ -1,22 +0,0 @@
-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/containers/GridFooterContainer.js

@@ -1,50 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['footerContainer', 'withBorderColor']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridFooterContainerRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'FooterContainer',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.footerContainer;
-  }
-})({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  minHeight: 52,
-  borderTop: '1px solid'
-});
-var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
-  var className = props.className,
-    other = _objectWithoutProperties(props, _excluded);
-  var rootProps = useGridRootProps();
-  var classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
-    ref: ref,
-    className: clsx(classes.root, className),
-    ownerState: rootProps
-  }, other));
-});
-process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { GridFooterContainer };

package/legacy/components/containers/GridOverlay.js

@@ -1,52 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['overlay']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridOverlayRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'Overlay',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.overlay;
-  }
-})({
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignSelf: 'center',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
-});
-var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
-  var className = props.className,
-    other = _objectWithoutProperties(props, _excluded);
-  var rootProps = useGridRootProps();
-  var classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
-    ref: ref,
-    className: clsx(classes.root, className),
-    ownerState: rootProps
-  }, other));
-});
-process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { GridOverlay };

package/legacy/components/containers/GridRoot.js

@@ -1,79 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { GridRootStyles } from './GridRootStyles';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var autoHeight = ownerState.autoHeight,
-    density = ownerState.density,
-    classes = ownerState.classes,
-    showCellVerticalBorder = ownerState.showCellVerticalBorder;
-  var slots = {
-    root: ['root', autoHeight && 'autoHeight', "root--density".concat(capitalize(density)), 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridPanelAnchor = styled('div')({
-  position: 'absolute',
-  top: "var(--DataGrid-headersTotalHeight)",
-  left: 0
-});
-var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
-  var rootProps = useGridRootProps();
-  var children = props.children,
-    className = props.className,
-    other = _objectWithoutProperties(props, _excluded);
-  var apiRef = useGridPrivateApiContext();
-  var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
-  var rootElementRef = apiRef.current.rootElementRef;
-  var handleRef = useForkRef(rootElementRef, ref);
-  var ownerState = _extends({}, rootProps, {
-    density: densityValue
-  });
-  var classes = useUtilityClasses(ownerState);
-
-  // Our implementation of <NoSsr />
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    mountedState = _React$useState2[0],
-    setMountedState = _React$useState2[1];
-  useEnhancedEffect(function () {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
-    ref: handleRef,
-    className: clsx(className, classes.root),
-    ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
-      role: "presentation",
-      "data-id": "gridPanelAnchor"
-    }), children]
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { GridRoot };