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

package/legacy/components/cell/GridCell.js

@@ -1,350 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
-import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
-import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
-import { GridCellModes } from '../../models';
-import { useGridSelector, objectShallowCompare } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
-  PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
-  PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
-  PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
-  return PinnedPosition;
-}({});
-var EMPTY_CELL_PARAMS = {
-  id: -1,
-  field: '__unset__',
-  row: {},
-  rowNode: {
-    id: -1,
-    depth: 0,
-    type: 'leaf',
-    parent: -1,
-    groupingKey: null
-  },
-  colDef: {
-    type: 'string',
-    field: '__unset__',
-    computedWidth: 0
-  },
-  cellMode: GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
-};
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var align = ownerState.align,
-    showLeftBorder = ownerState.showLeftBorder,
-    showRightBorder = ownerState.showRightBorder,
-    pinnedPosition = ownerState.pinnedPosition,
-    isEditable = ownerState.isEditable,
-    isSelected = ownerState.isSelected,
-    isSelectionMode = ownerState.isSelectionMode,
-    classes = ownerState.classes;
-  var slots = {
-    root: ['cell', "cell--text".concat(capitalize(align)), isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
-    content: ['cellContent']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var warnedOnce = false;
-
-// TODO(v7): Removing the wrapper will break the docs performance visualization demo.
-
-var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _getActions, _ref, _rootProps$cellSelect, _rootProps$experiment;
-  var column = props.column,
-    rowId = props.rowId,
-    editCellState = props.editCellState,
-    align = props.align,
-    childrenProp = props.children,
-    colIndex = props.colIndex,
-    height = props.height,
-    width = props.width,
-    className = props.className,
-    styleProp = props.style,
-    gridHasScrollX = props.gridHasScrollX,
-    colSpan = props.colSpan,
-    disableDragEvents = props.disableDragEvents,
-    isNotVisible = props.isNotVisible,
-    pinnedOffset = props.pinnedOffset,
-    pinnedPosition = props.pinnedPosition,
-    sectionIndex = props.sectionIndex,
-    sectionLength = props.sectionLength,
-    onClick = props.onClick,
-    onDoubleClick = props.onDoubleClick,
-    onMouseDown = props.onMouseDown,
-    onMouseUp = props.onMouseUp,
-    onMouseOver = props.onMouseOver,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
-    onDragEnter = props.onDragEnter,
-    onDragOver = props.onDragOver,
-    other = _objectWithoutProperties(props, _excluded);
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var field = column.field;
-  var cellParamsWithAPI = useGridSelector(apiRef, function () {
-    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
-    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
-    // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    try {
-      var cellParams = apiRef.current.getCellParams(rowId, field);
-      var result = cellParams;
-      result.api = apiRef.current;
-      return result;
-    } catch (e) {
-      if (e instanceof MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw e;
-    }
-  }, objectShallowCompare);
-  var isSelected = useGridSelector(apiRef, function () {
-    return apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-      id: rowId,
-      field: field
-    });
-  });
-  var cellMode = cellParamsWithAPI.cellMode,
-    hasFocus = cellParamsWithAPI.hasFocus,
-    _cellParamsWithAPI$is = cellParamsWithAPI.isEditable,
-    isEditable = _cellParamsWithAPI$is === void 0 ? false : _cellParamsWithAPI$is,
-    value = cellParamsWithAPI.value,
-    formattedValue = cellParamsWithAPI.formattedValue;
-  var canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(function (action) {
-    return !action.props.disabled;
-  }));
-  var tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
-  var rootClasses = rootProps.classes,
-    getCellClassName = rootProps.getCellClassName;
-  var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-    id: rowId,
-    field: field
-  });
-  if (column.cellClassName) {
-    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
-  }
-  if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
-  }
-  var valueToRender = formattedValue == null ? value : formattedValue;
-  var cellRef = React.useRef(null);
-  var handleRef = useForkRef(ref, cellRef);
-  var focusElementRef = React.useRef(null);
-  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
-  var isSelectionMode = (_rootProps$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : false;
-  var isSectionLastCell = sectionIndex === sectionLength - 1;
-  var showLeftBorder = pinnedPosition === PinnedPosition.RIGHT && sectionIndex === 0;
-  var showRightBorder = rootProps.showCellVerticalBorder && (pinnedPosition !== PinnedPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === PinnedPosition.LEFT && isSectionLastCell;
-  var ownerState = {
-    align: align,
-    showLeftBorder: showLeftBorder,
-    showRightBorder: showRightBorder,
-    isEditable: isEditable,
-    classes: rootProps.classes,
-    pinnedPosition: pinnedPosition,
-    isSelected: isSelected,
-    isSelectionMode: isSelectionMode
-  };
-  var classes = useUtilityClasses(ownerState);
-  var publishMouseUp = React.useCallback(function (eventName) {
-    return function (event) {
-      var params = apiRef.current.getCellParams(rowId, field || '');
-      apiRef.current.publishEvent(eventName, params, event);
-      if (onMouseUp) {
-        onMouseUp(event);
-      }
-    };
-  }, [apiRef, field, onMouseUp, rowId]);
-  var publishMouseDown = React.useCallback(function (eventName) {
-    return function (event) {
-      var params = apiRef.current.getCellParams(rowId, field || '');
-      apiRef.current.publishEvent(eventName, params, event);
-      if (onMouseDown) {
-        onMouseDown(event);
-      }
-    };
-  }, [apiRef, field, onMouseDown, rowId]);
-  var publish = React.useCallback(function (eventName, propHandler) {
-    return function (event) {
-      // The row might have been deleted during the click
-      if (!apiRef.current.getRow(rowId)) {
-        return;
-      }
-      var params = apiRef.current.getCellParams(rowId, field || '');
-      apiRef.current.publishEvent(eventName, params, event);
-      if (propHandler) {
-        propHandler(event);
-      }
-    };
-  }, [apiRef, field, rowId]);
-  var style = React.useMemo(function () {
-    if (isNotVisible) {
-      return {
-        padding: 0,
-        opacity: 0,
-        width: 0,
-        border: 0
-      };
-    }
-    var cellStyle = _extends({
-      '--width': "".concat(width, "px"),
-      '--height': typeof height === 'number' ? "".concat(height, "px") : height
-    }, styleProp);
-    if (pinnedPosition === PinnedPosition.LEFT) {
-      cellStyle.left = pinnedOffset;
-    }
-    if (pinnedPosition === PinnedPosition.RIGHT) {
-      cellStyle.right = pinnedOffset;
-    }
-    return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
-  React.useEffect(function () {
-    if (!hasFocus || cellMode === GridCellModes.Edit) {
-      return;
-    }
-    var doc = ownerDocument(apiRef.current.rootElementRef.current);
-    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
-      var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      var elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
-      if (doesSupportPreventScroll()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        var scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
-    }
-  }, [hasFocus, cellMode, apiRef]);
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
-    return null;
-  }
-  var handleFocus = other.onFocus;
-  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
-    handleFocus = function handleFocus(event) {
-      var focusedCell = gridFocusCellSelector(apiRef);
-      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
-        if (typeof other.onFocus === 'function') {
-          other.onFocus(event);
-        }
-        return;
-      }
-      if (!warnedOnce) {
-        console.warn(["MUI X: The cell with id=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(focusedCell == null ? void 0 : focusedCell.field, "."), "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
-        warnedOnce = true;
-      }
-    };
-  }
-  var children;
-  if (editCellState == null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
-    classNames.push(gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
-  }
-  if (editCellState != null && column.renderEditCell) {
-    var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
-
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var changeReason = editCellState.changeReason,
-      unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
-      editCellStateRest = _objectWithoutProperties(editCellState, _excluded2);
-    var params = _extends({}, cellParamsWithAPI, {
-      row: updatedRow
-    }, editCellStateRest);
-    children = column.renderEditCell(params);
-    classNames.push(gridClasses['cell--editing']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
-  }
-  if (children === undefined) {
-    var valueString = valueToRender == null ? void 0 : valueToRender.toString();
-    children = /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
-  }
-  if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
-    children = /*#__PURE__*/React.cloneElement(children, {
-      focusElementRef: focusElementRef
-    });
-  }
-  var draggableEventHandlers = disableDragEvents ? null : {
-    onDragEnter: publish('cellDragEnter', onDragEnter),
-    onDragOver: publish('cellDragOver', onDragOver)
-  };
-  return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
-    className: clsx(className, classNames, classes.root),
-    role: "gridcell",
-    "data-field": field,
-    "data-colindex": colIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-colspan": colSpan,
-    style: style,
-    tabIndex: tabIndex,
-    onClick: publish('cellClick', onClick),
-    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseOver: publish('cellMouseOver', onMouseOver),
-    onMouseDown: publishMouseDown('cellMouseDown'),
-    onMouseUp: publishMouseUp('cellMouseUp'),
-    onKeyDown: publish('cellKeyDown', onKeyDown),
-    onKeyUp: publish('cellKeyUp', onKeyUp)
-  }, draggableEventHandlers, other, {
-    onFocus: handleFocus,
-    children: children
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
-  className: PropTypes.string,
-  colIndex: PropTypes.number.isRequired,
-  colSpan: PropTypes.number,
-  column: PropTypes.object.isRequired,
-  disableDragEvents: PropTypes.bool,
-  editCellState: PropTypes.shape({
-    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: PropTypes.bool,
-    isValidating: PropTypes.bool,
-    value: PropTypes.any
-  }),
-  gridHasScrollX: PropTypes.bool.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  isNotVisible: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  pinnedOffset: PropTypes.number.isRequired,
-  pinnedPosition: PropTypes.oneOf([0, 1, 2]).isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  sectionIndex: PropTypes.number.isRequired,
-  sectionLength: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
-} : void 0;
-var MemoizedGridCell = fastMemo(GridCell);
-export { MemoizedGridCell as GridCell };

package/legacy/components/cell/GridEditBooleanCell.js

@@ -1,174 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['editBooleanCell']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridEditBooleanCell(props) {
-  var _rootProps$slotProps;
-  var idProp = props.id,
-    value = props.value,
-    formattedValue = props.formattedValue,
-    api = props.api,
-    field = props.field,
-    row = props.row,
-    rowNode = props.rowNode,
-    colDef = props.colDef,
-    cellMode = props.cellMode,
-    isEditable = props.isEditable,
-    tabIndex = props.tabIndex,
-    className = props.className,
-    hasFocus = props.hasFocus,
-    isValidating = props.isValidating,
-    isProcessingProps = props.isProcessingProps,
-    error = props.error,
-    onValueChange = props.onValueChange,
-    other = _objectWithoutProperties(props, _excluded);
-  var apiRef = useGridApiContext();
-  var inputRef = React.useRef(null);
-  var id = useId();
-  var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    valueState = _React$useState2[0],
-    setValueState = _React$useState2[1];
-  var rootProps = useGridRootProps();
-  var ownerState = {
-    classes: rootProps.classes
-  };
-  var classes = useUtilityClasses(ownerState);
-  var handleChange = React.useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var newValue;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            newValue = event.target.checked;
-            if (!onValueChange) {
-              _context.next = 4;
-              break;
-            }
-            _context.next = 4;
-            return onValueChange(event, newValue);
-          case 4:
-            setValueState(newValue);
-            _context.next = 7;
-            return apiRef.current.setEditCellValue({
-              id: idProp,
-              field: field,
-              value: newValue
-            }, event);
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [apiRef, field, idProp, onValueChange]);
-  React.useEffect(function () {
-    setValueState(value);
-  }, [value]);
-  useEnhancedEffect(function () {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
-  return /*#__PURE__*/_jsx("label", _extends({
-    htmlFor: id,
-    className: clsx(classes.root, className)
-  }, other, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-      id: id,
-      inputRef: inputRef,
-      checked: Boolean(valueState),
-      onChange: handleChange,
-      size: "small"
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
-  }));
-}
-process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-  /**
-   * 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,
-  /**
-   * 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,
-  isProcessingProps: PropTypes.bool,
-  isValidating: PropTypes.bool,
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
-   */
-  onValueChange: PropTypes.func,
-  /**
-   * 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 { GridEditBooleanCell };
-export var renderEditBooleanCell = function renderEditBooleanCell(params) {
-  return /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
-};