@mui/x-data-grid 5.4.0 → 5.6.0

package/components/cell/GridCell.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { GridCellMode, GridCellValue, GridRowId } from '../../models';
+import { GridAlignment } from '../../models/colDef/gridColDef';
+export interface GridCellProps {
+    align: GridAlignment;
+    className?: string;
+    colIndex: number;
+    field: string;
+    rowId: GridRowId;
+    formattedValue?: GridCellValue;
+    hasFocus?: boolean;
+    height: number;
+    isEditable?: boolean;
+    showRightBorder?: boolean;
+    value?: GridCellValue;
+    width: number;
+    cellMode?: GridCellMode;
+    children: React.ReactNode;
+    tabIndex: 0 | -1;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+    onDragOver?: React.DragEventHandler<HTMLDivElement>;
+    [x: string]: any;
+}
+declare function GridCell(props: GridCellProps): JSX.Element;
+declare namespace GridCell {
+    var propTypes: any;
+}
+export { GridCell };

package/components/cell/GridCell.js

@@ -0,0 +1,216 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["align", "children", "colIndex", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { ownerDocument, capitalize } from '@mui/material/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { GridEvents, GridCellModes } from '../../models';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Based on https://stackoverflow.com/a/59518678
+let cachedSupportsPreventScroll;
+
+function doesSupportPreventScroll() {
+  if (cachedSupportsPreventScroll === undefined) {
+    document.createElement('div').focus({
+      get preventScroll() {
+        cachedSupportsPreventScroll = true;
+        return false;
+      }
+
+    });
+  }
+
+  return cachedSupportsPreventScroll;
+}
+
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    showRightBorder,
+    isEditable,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', `cell--text${capitalize(align)}`, isEditable && 'cell--editable', showRightBorder && 'withBorder'],
+    content: ['cellContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+let warnedOnce = false;
+
+function GridCell(props) {
+  const {
+    align,
+    children,
+    colIndex,
+    cellMode,
+    field,
+    formattedValue,
+    hasFocus,
+    height,
+    isEditable,
+    rowId,
+    tabIndex,
+    value,
+    width,
+    className,
+    showRightBorder,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    onMouseUp,
+    onKeyDown,
+    onDragEnter,
+    onDragOver
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const valueToRender = formattedValue == null ? value : formattedValue;
+  const cellRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    align,
+    showRightBorder,
+    isEditable,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publishMouseUp = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+
+    if (onMouseUp) {
+      onMouseUp(event);
+    }
+  }, [apiRef, field, onMouseUp, rowId]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // The row might have been deleted during the click
+
+
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
+
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, field, rowId]);
+  const style = {
+    minWidth: width,
+    maxWidth: width,
+    minHeight: height,
+    maxHeight: height
+  };
+  React.useLayoutEffect(() => {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || cellRef.current;
+
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  let handleFocus = other.onFocus;
+
+  if (process.env.NODE_ENV === 'test') {
+    handleFocus = event => {
+      const 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.error([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, 'In the next render, the focus will be changed to match the state.', 'Call `fireEvent.mouseUp` and `fireEvent.click` before to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+
+  return /*#__PURE__*/_jsx("div", _extends({
+    ref: cellRef,
+    className: clsx(className, classes.root),
+    role: "cell",
+    "data-field": field,
+    "data-colindex": colIndex,
+    "aria-colindex": colIndex + 1,
+    style: style,
+    tabIndex: cellMode === 'view' || !isEditable ? tabIndex : -1,
+    onClick: publish(GridEvents.cellClick, onClick),
+    onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
+    onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
+    onMouseUp: publishMouseUp(GridEvents.cellMouseUp),
+    onKeyDown: publish(GridEvents.cellKeyDown, onKeyDown),
+    onDragEnter: publish(GridEvents.cellDragEnter, onDragEnter),
+    onDragOver: publish(GridEvents.cellDragOver, onDragOver)
+  }, other, {
+    onFocus: handleFocus,
+    children: children != null ? children : /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      children: valueToRender == null ? void 0 : valueToRender.toString()
+    })
+  }));
+}
+
+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,
+  cellMode: PropTypes.oneOf(['edit', 'view']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  colIndex: PropTypes.number.isRequired,
+  field: PropTypes.string.isRequired,
+  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  hasFocus: PropTypes.bool,
+  height: PropTypes.number.isRequired,
+  isEditable: PropTypes.bool,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  showRightBorder: PropTypes.bool,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridCell };

package/components/cell/GridEditBooleanCell.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+export declare function GridEditBooleanCell(props: GridRenderEditCellParams & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id'>): JSX.Element;
+export declare const renderEditBooleanCell: (params: any) => JSX.Element;

package/components/cell/GridEditBooleanCell.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editBooleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export function GridEditBooleanCell(props) {
+  var _rootProps$components;
+
+  const {
+    id: idProp,
+    value,
+    api,
+    field,
+    className,
+    hasFocus
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const inputRef = React.useRef(null);
+  const id = useId();
+  const [valueState, setValueState] = React.useState(value);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const handleChange = React.useCallback(event => {
+    const newValue = event.target.checked;
+    setValueState(newValue);
+    api.setEditCellValue({
+      id: idProp,
+      field,
+      value: newValue
+    }, event);
+  }, [api, field, idProp]);
+  React.useEffect(() => {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx("label", _extends({
+    htmlFor: id,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
+      id: id,
+      inputRef: inputRef,
+      checked: Boolean(valueState),
+      onChange: handleChange,
+      size: "small"
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseCheckbox))
+  }));
+}
+export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));

package/components/cell/GridEditDateCell.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+export declare function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
+export declare const renderEditDateCell: (params: any) => JSX.Element;

package/components/cell/GridEditDateCell.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export function GridEditDateCell(props) {
+  const {
+    id,
+    value: valueProp,
+    api,
+    field,
+    colDef,
+    hasFocus,
+    inputProps
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const isDateTime = colDef.type === 'dateTime';
+  const inputRef = React.useRef();
+  const valueTransformed = React.useMemo(() => {
+    let parsedDate;
+
+    if (valueProp == null) {
+      parsedDate = null;
+    } else if (valueProp instanceof Date) {
+      parsedDate = valueProp;
+    } else {
+      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+    }
+
+    let formattedDate;
+
+    if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
+      formattedDate = '';
+    } else {
+      const localDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60 * 1000);
+      formattedDate = localDate.toISOString().substr(0, isDateTime ? 16 : 10);
+    }
+
+    return {
+      parsed: parsedDate,
+      formatted: formattedDate
+    };
+  }, [valueProp, isDateTime]);
+  const [valueState, setValueState] = React.useState(valueTransformed);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const handleChange = React.useCallback(event => {
+    const newFormattedDate = event.target.value;
+    let newParsedDate;
+
+    if (newFormattedDate === '') {
+      newParsedDate = null;
+    } else {
+      const [date, time] = newFormattedDate.split('T');
+      const [year, month, day] = date.split('-');
+      newParsedDate = new Date();
+      newParsedDate.setFullYear(year, Number(month) - 1, day);
+      newParsedDate.setHours(0, 0, 0, 0);
+
+      if (time) {
+        const [hours, minutes] = time.split(':');
+        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+      }
+    }
+
+    setValueState({
+      parsed: newParsedDate,
+      formatted: newFormattedDate
+    });
+    api.setEditCellValue({
+      id,
+      field,
+      value: newParsedDate
+    }, event);
+  }, [api, field, id]);
+  React.useEffect(() => {
+    setValueState(state => {
+      var _valueTransformed$par, _state$parsed;
+
+      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+        return valueTransformed;
+      }
+
+      return state;
+    });
+  }, [valueTransformed]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(InputBase, _extends({
+    inputRef: inputRef,
+    fullWidth: true,
+    className: classes.root,
+    type: isDateTime ? 'datetime-local' : 'date',
+    inputProps: _extends({
+      max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
+    }, inputProps),
+    value: valueState.formatted,
+    onChange: handleChange
+  }, other));
+}
+export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));

package/components/cell/GridEditInputCell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+interface GridEditInputCellProps {
+    debounceMs?: number;
+}
+declare function GridEditInputCell(props: GridEditInputCellProps & GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
+declare namespace GridEditInputCell {
+    var propTypes: any;
+}
+export { GridEditInputCell };
+export declare const renderEditInputCell: (params: any) => JSX.Element;

package/components/cell/GridEditInputCell.js

@@ -0,0 +1,101 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridEditInputCellRoot = styled(InputBase, {
+  name: 'MuiDataGrid',
+  slot: 'EditInputCell',
+  overridesResolver: (props, styles) => styles.editInputCell
+})(({
+  theme
+}) => _extends({}, theme.typography.body2, {
+  padding: '1px 0',
+  '& input': {
+    padding: '0 16px',
+    height: '100%'
+  }
+}));
+
+function GridEditInputCell(props) {
+  const {
+    id,
+    value,
+    api,
+    field,
+    colDef,
+    hasFocus,
+    debounceMs = SUBMIT_FILTER_STROKE_TIME
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const inputRef = React.useRef();
+  const [valueState, setValueState] = React.useState(value);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const handleChange = React.useCallback(event => {
+    const newValue = event.target.value;
+    setValueState(newValue);
+    api.setEditCellValue({
+      id,
+      field,
+      value: newValue,
+      debounceMs
+    }, event);
+  }, [api, debounceMs, field, id]);
+  React.useEffect(() => {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    inputRef: inputRef,
+    className: classes.root,
+    fullWidth: true,
+    type: colDef.type === 'number' ? colDef.type : 'text',
+    value: valueState != null ? valueState : '',
+    onChange: handleChange
+  }, other));
+}
+
+process.env.NODE_ENV !== "production" ? GridEditInputCell.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.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+  debounceMs: PropTypes.number,
+  isValidating: PropTypes.bool
+} : void 0;
+export { GridEditInputCell };
+export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SelectProps } from '@mui/material/Select';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+declare function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectProps, 'id'>): JSX.Element;
+declare namespace GridEditSingleSelectCell {
+    var propTypes: any;
+}
+export { GridEditSingleSelectCell };
+export declare const renderEditSingleSelectCell: (params: any) => JSX.Element;