@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/modern/components/cell/GridEditDateCell.js

@@ -1,193 +0,0 @@
-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", "inputProps", "isValidating", "isProcessingProps", "onValueChange", "slotProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { styled } from '@mui/material/styles';
-import { NotRendered } from "../../utils/assert.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledInputBase = styled(NotRendered)({
-  fontSize: 'inherit'
-});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['editInputCell']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridEditDateCell(props) {
-  const {
-      id,
-      value: valueProp,
-      field,
-      colDef,
-      hasFocus,
-      onValueChange,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isDateTime = colDef.type === 'dateTime';
-  const apiRef = useGridApiContext();
-  const inputRef = React.useRef(null);
-  const valueTransformed = React.useMemo(() => {
-    let parsedDate;
-    if (valueProp == null) {
-      parsedDate = null;
-    } else if (valueProp instanceof Date) {
-      parsedDate = valueProp;
-    } else {
-      parsedDate = new Date((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 parseValueToDate = React.useCallback(value => {
-    if (value === '') {
-      return null;
-    }
-    const [date, time] = value.split('T');
-    const [year, month, day] = date.split('-');
-    const parsedDate = new Date();
-    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
-    parsedDate.setHours(0, 0, 0, 0);
-    if (time) {
-      const [hours, minutes] = time.split(':');
-      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-    }
-    return parsedDate;
-  }, []);
-  const handleChange = React.useCallback(async event => {
-    const newFormattedDate = event.target.value;
-    const newParsedDate = parseValueToDate(newFormattedDate);
-    if (onValueChange) {
-      await onValueChange(event, newParsedDate);
-    }
-    setValueState({
-      parsed: newParsedDate,
-      formatted: newFormattedDate
-    });
-    apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: newParsedDate
-    }, event);
-  }, [apiRef, field, id, onValueChange, parseValueToDate]);
-  React.useEffect(() => {
-    setValueState(state => {
-      if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
-        return valueTransformed;
-      }
-      return state;
-    });
-  }, [valueTransformed]);
-  useEnhancedEffect(() => {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
-  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    as: rootProps.slots.baseInput,
-    inputRef: inputRef,
-    fullWidth: true,
-    className: classes.root,
-    type: isDateTime ? 'datetime-local' : 'date',
-    value: valueState.formatted,
-    onChange: handleChange
-  }, other, slotProps?.root, {
-    slotProps: {
-      htmlInput: _extends({
-        max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
-      }, slotProps?.root?.slotProps?.htmlInput)
-    }
-  }));
-}
-process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm 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 {Date | null} 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,
-  slotProps: PropTypes.object,
-  /**
-   * 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 { GridEditDateCell };
-export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));

package/modern/components/cell/GridEditInputCell.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { GridSlotProps } from "../../models/gridSlotsComponent.js";
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditInputCellProps extends GridRenderEditCellParams {
-  debounceMs?: number;
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * @param {Date | null} 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?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
-  slotProps?: {
-    root?: Partial<GridSlotProps['baseInput']>;
-  };
-}
-declare const GridEditInputCell: React.ForwardRefExoticComponent<GridEditInputCellProps> | React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { GridEditInputCell };
-export declare const renderEditInputCell: (params: GridEditInputCellProps) => React.JSX.Element;

package/modern/components/cell/GridEditInputCell.js

@@ -1,168 +0,0 @@
-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", "isValidating", "debounceMs", "isProcessingProps", "onValueChange", "slotProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { styled } from '@mui/material/styles';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { NotRendered } from "../../utils/assert.js";
-import { vars } from "../../constants/cssVariables.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-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(NotRendered, {
-  name: 'MuiDataGrid',
-  slot: 'EditInputCell'
-})({
-  font: vars.typography.font.body,
-  padding: '1px 0',
-  '& input': {
-    padding: '0 16px',
-    height: '100%'
-  }
-});
-const GridEditInputCell = forwardRef((props, ref) => {
-  const rootProps = useGridRootProps();
-  const {
-      id,
-      value,
-      field,
-      colDef,
-      hasFocus,
-      debounceMs = 200,
-      isProcessingProps,
-      onValueChange,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const inputRef = React.useRef(null);
-  const [valueState, setValueState] = React.useState(value);
-  const classes = useUtilityClasses(rootProps);
-  const handleChange = React.useCallback(async event => {
-    const newValue = event.target.value;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
-    const column = apiRef.current.getColumn(field);
-    let parsedValue = newValue;
-    if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
-    }
-    setValueState(parsedValue);
-    apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: parsedValue,
-      debounceMs,
-      unstable_skipValueParser: true
-    }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  React.useEffect(() => {
-    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
-      setValueState(value);
-    }
-  }, [meta, value]);
-  useEnhancedEffect(() => {
-    if (hasFocus) {
-      inputRef.current.focus();
-    }
-  }, [hasFocus]);
-  return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
-    as: rootProps.slots.baseInput,
-    inputRef: inputRef,
-    className: classes.root,
-    ownerState: rootProps,
-    fullWidth: true,
-    type: colDef.type === 'number' ? colDef.type : 'text',
-    value: valueState ?? '',
-    onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-      fontSize: "small",
-      color: "action"
-    }) : undefined
-  }, other, slotProps?.root, {
-    ref: ref
-  }));
-});
-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 "pnpm 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,
-  debounceMs: PropTypes.number,
-  /**
-   * 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 {Date | null} 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,
-  slotProps: PropTypes.object,
-  /**
-   * 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 { GridEditInputCell };
-export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {Event<any>} event The event source of the callback.
-   * @param {any} 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?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
-  /**
-   * If true, the select opens by default.
-   */
-  initialOpen?: boolean;
-}
-declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): React.JSX.Element | null;
-declare namespace GridEditSingleSelectCell {
-  var propTypes: any;
-}
-export { GridEditSingleSelectCell };
-export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => React.JSX.Element;

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,189 +0,0 @@
-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", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "slotProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { GridCellEditStopReasons } from "../../models/params/gridEditCellParams.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { GridEditModes } from "../../models/gridEditRowModel.js";
-import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "../panel/filterPanel/filterPanelUtils.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-function isKeyboardEvent(event) {
-  return !!event.key;
-}
-function GridEditSingleSelectCell(props) {
-  const rootProps = useGridRootProps();
-  const {
-      id,
-      value: valueProp,
-      field,
-      row,
-      colDef,
-      hasFocus,
-      error,
-      onValueChange,
-      initialOpen = rootProps.editMode === GridEditModes.Cell,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const ref = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const [open, setOpen] = React.useState(initialOpen);
-  const baseSelectProps = rootProps.slotProps?.baseSelect || {};
-  const isSelectNative = baseSelectProps.native ?? false;
-  useEnhancedEffect(() => {
-    if (hasFocus) {
-      inputRef.current?.focus();
-    }
-  }, [hasFocus]);
-  if (!isSingleSelectColDef(colDef)) {
-    return null;
-  }
-  const valueOptions = getValueOptions(colDef, {
-    id,
-    row
-  });
-  if (!valueOptions) {
-    return null;
-  }
-  const getOptionValue = colDef.getOptionValue;
-  const getOptionLabel = colDef.getOptionLabel;
-  const handleChange = async event => {
-    if (!isSingleSelectColDef(colDef) || !valueOptions) {
-      return;
-    }
-    setOpen(false);
-    const target = event.target;
-    // NativeSelect casts the value to a string.
-    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
-    if (onValueChange) {
-      await onValueChange(event, formattedTargetValue);
-    }
-    await apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: formattedTargetValue
-    }, event);
-  };
-  const handleClose = (event, reason) => {
-    if (rootProps.editMode === GridEditModes.Row) {
-      setOpen(false);
-      return;
-    }
-    if (reason === 'backdropClick' || event.key === 'Escape') {
-      const params = apiRef.current.getCellParams(id, field);
-      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
-        reason: event.key === 'Escape' ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
-      }));
-    }
-  };
-  const handleOpen = event => {
-    if (isKeyboardEvent(event) && event.key === 'Enter') {
-      return;
-    }
-    setOpen(true);
-  };
-  if (!valueOptions || !colDef) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-    ref: ref,
-    value: valueProp,
-    onChange: handleChange,
-    open: open,
-    onOpen: handleOpen,
-    onClose: handleClose,
-    error: error,
-    native: isSelectNative,
-    fullWidth: true,
-    slotProps: {
-      htmlInput: {
-        ref: inputRef
-      }
-    }
-  }, other, slotProps?.root, rootProps.slotProps?.baseSelect, {
-    children: valueOptions.map(valueOption => {
-      const value = getOptionValue(valueOption);
-      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {
-        native: isSelectNative,
-        key: value,
-        value: value
-      }), getOptionLabel(valueOption));
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm 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 select opens by default.
-   */
-  initialOpen: PropTypes.bool,
-  /**
-   * 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 {Event<any>} event The event source of the callback.
-   * @param {any} 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 { GridEditSingleSelectCell };
-export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

package/modern/components/cell/GridSkeletonCell.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { GridColType } from "../../models/index.js";
-export interface GridSkeletonCellProps extends React.HTMLAttributes<HTMLDivElement> {
-  type?: GridColType;
-  width?: number | string;
-  height?: number | 'auto';
-  field?: string;
-  align?: string;
-  /**
-   * If `true`, the cell will not display the skeleton but still reserve the cell space.
-   * @default false
-   */
-  empty?: boolean;
-}
-declare function GridSkeletonCell(props: GridSkeletonCellProps): React.JSX.Element;
-declare namespace GridSkeletonCell {
-  var propTypes: any;
-}
-declare const Memoized: typeof GridSkeletonCell;
-export { Memoized as GridSkeletonCell };