@mui/x-data-grid 5.5.1 → 5.7.0

package/components/cell/GridActionsCellItem.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["label", "icon", "showInMenu", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const GridActionsCellItem = props => {
+  const {
+    label,
+    icon,
+    showInMenu,
+    onClick
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const handleClick = event => {
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  if (!showInMenu) {
+    return /*#__PURE__*/_jsx(IconButton, _extends({
+      size: "small",
+      "aria-label": label
+    }, other, {
+      onClick: handleClick,
+      children: /*#__PURE__*/React.cloneElement(icon, {
+        fontSize: 'small'
+      })
+    }));
+  }
+
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({}, other, {
+    onClick: onClick,
+    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: icon
+    }), label]
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  icon: PropTypes.element,
+  label: PropTypes.string.isRequired,
+  showInMenu: PropTypes.bool
+} : void 0;
+export { GridActionsCellItem };

package/components/cell/GridBooleanCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
+interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+}
+export declare const GridBooleanCell: React.MemoExoticComponent<(props: GridBooleanCellProps) => JSX.Element>;
+export declare const renderBooleanCell: GridColDef['renderCell'];
+export {};

package/components/cell/GridBooleanCell.js

@@ -0,0 +1,46 @@
+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", "hasFocus", "tabIndex", "getValue"];
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+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: ['booleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
+  const {
+    value,
+    api
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Icon = React.useMemo(() => value ? rootProps.components.BooleanCellTrueIcon : rootProps.components.BooleanCellFalseIcon, [rootProps.components.BooleanCellFalseIcon, rootProps.components.BooleanCellTrueIcon, value]);
+  return /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: classes.root,
+    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    "data-value": Boolean(value)
+  }, other));
+});
+export const renderBooleanCell = params => {
+  if (params.rowNode.isAutoGenerated) {
+    return '';
+  }
+
+  return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
+};

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,218 @@
+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) {
+  var _rootProps$experiment;
+
+  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' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
+    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.warn([`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}.`, "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;
+      }
+    };
+  }
+
+  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,5 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
+export declare function GridEditBooleanCell(props: GridRenderEditCellParams & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id'>): JSX.Element;
+export declare const renderEditBooleanCell: GridColDef['renderEditCell'];

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", "isProcessingProps", "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,6 @@
+/// <reference types="react" />
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
+export declare function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
+export declare const renderEditDateCell: GridColDef['renderEditCell'];

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", "isProcessingProps"];
+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,13 @@
+/// <reference types="react" />
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
+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: GridColDef['renderEditCell'];