@mui/x-data-grid 8.28.6 → 8.29.0

package/components/cell/GridLongTextCell.mjs

@@ -0,0 +1,246 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { gridRowHeightSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
+import { NotRendered } from "../../utils/assert.mjs";
+import { vars } from "../../constants/cssVariables.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['longTextCell'],
+    content: ['longTextCellContent'],
+    expandButton: ['longTextCellExpandButton'],
+    collapseButton: ['longTextCellCollapseButton'],
+    popup: ['longTextCellPopup'],
+    popperContent: ['longTextCellPopperContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridLongTextCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCell'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+});
+const GridLongTextCellContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellContent'
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flex: 1
+});
+const GridLongTextCellPopperContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopperContent'
+})(({
+  theme
+}) => _extends({}, theme.typography.body2, {
+  letterSpacing: 'normal',
+  paddingBlock: 15.5,
+  paddingInline: 9,
+  maxHeight: 52 * 3,
+  overflow: 'auto',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  width: 'var(--_width)',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  boxSizing: 'border-box'
+}));
+const GridLongTextCellCornerButton = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellCornerButton'
+})(({
+  theme
+}) => ({
+  lineHeight: 0,
+  position: 'absolute',
+  bottom: 1,
+  right: 0,
+  border: '1px solid',
+  color: (theme.vars || theme).palette.text.secondary,
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  borderRadius: 0,
+  fontSize: '0.875rem',
+  padding: 2,
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary
+  },
+  [`&.${gridClasses.longTextCellExpandButton}`]: {
+    right: -9,
+    opacity: 0,
+    [`.${gridClasses.longTextCell}:hover &, .${gridClasses.longTextCell}.Mui-focused &`]: {
+      opacity: 1
+    }
+  },
+  [`&.${gridClasses.longTextCellCollapseButton}`]: {
+    bottom: 2,
+    right: 2,
+    border: 'none'
+  }
+}));
+const GridLongTextCellPopper = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopper'
+})(({
+  theme
+}) => ({
+  zIndex: vars.zIndex.menu,
+  background: (theme.vars || theme).palette.background.paper,
+  '&[data-popper-reference-hidden]': {
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  }
+}));
+function GridLongTextCell(props) {
+  const {
+    id,
+    value = '',
+    colDef,
+    hasFocus,
+    slotProps,
+    renderContent
+  } = props;
+  const popupId = `${id}-${colDef.field}-longtext-popup`;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const classes = useUtilityClasses(rootProps);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
+  const [popupOpen, setPopupOpen] = React.useState(false);
+  const cellRef = React.useRef(null);
+  const cornerButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (hasFocus && !popupOpen) {
+      if (cornerButtonRef.current && cornerButtonRef.current !== document.activeElement) {
+        cornerButtonRef.current.focus();
+      }
+    }
+    if (!hasFocus) {
+      setPopupOpen(false);
+    }
+  }, [hasFocus, popupOpen]);
+  const handleExpandClick = event => {
+    // event.detail === 0 means keyboard-triggered click (Enter keyup on focused button)
+    // Ignore these to prevent popup from opening when focus moves to this cell via Enter
+    if (event.detail === 0) {
+      return;
+    }
+    event.stopPropagation();
+    setPopupOpen(true);
+  };
+  const handleExpandKeyDown = event => {
+    if (event.key === ' ' && !event.shiftKey) {
+      event.preventDefault(); // Prevent native button click on keyup
+      event.stopPropagation(); // Prevent grid row selection
+      setPopupOpen(prev => !prev);
+    }
+    if (event.key === 'Escape' && popupOpen) {
+      event.stopPropagation(); // Prevent grid cell navigation
+      setPopupOpen(false);
+    }
+  };
+  const handleClickAway = () => {
+    setPopupOpen(false);
+  };
+  const handleCollapseClick = event => {
+    event.stopPropagation();
+    setPopupOpen(false);
+    apiRef.current.getCellElement(id, colDef.field)?.focus();
+  };
+  return /*#__PURE__*/_jsxs(GridLongTextCellRoot, _extends({
+    ref: cellRef
+  }, slotProps?.root, {
+    className: clsx(classes.root, slotProps?.root?.className, hasFocus && 'Mui-focused'),
+    children: [/*#__PURE__*/_jsx(GridLongTextCellContent, _extends({}, slotProps?.content, {
+      className: clsx(classes.content, slotProps?.content?.className),
+      children: value
+    })), /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
+      ref: cornerButtonRef,
+      "aria-label": `${value}, ${apiRef.current.getLocaleText('longTextCellExpandLabel')}`,
+      "aria-haspopup": "dialog",
+      "aria-controls": popupOpen ? popupId : undefined,
+      "aria-expanded": popupOpen,
+      "aria-keyshortcuts": "Space",
+      tabIndex: 0
+    }, slotProps?.expandButton, {
+      className: clsx(classes.expandButton, slotProps?.expandButton?.className),
+      onClick: handleExpandClick,
+      onKeyDown: handleExpandKeyDown,
+      children: /*#__PURE__*/_jsx(rootProps.slots.longTextCellExpandIcon, {
+        fontSize: "inherit"
+      })
+    })), /*#__PURE__*/_jsx(GridLongTextCellPopper, _extends({
+      id: popupId,
+      role: "dialog",
+      "aria-label": colDef.headerName || colDef.field,
+      as: rootProps.slots.basePopper,
+      ownerState: rootProps,
+      open: popupOpen,
+      target: cellRef.current,
+      placement: "bottom-start",
+      onClickAway: handleClickAway,
+      clickAwayMouseEvent: "onMouseDown",
+      flip: true,
+      material: {
+        container: cellRef.current?.closest('[role="row"]'),
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [-10, -rowHeight]
+          }
+        }]
+      }
+    }, slotProps?.popper, {
+      className: clsx(classes.popup, slotProps?.popper?.className),
+      children: /*#__PURE__*/_jsxs(GridLongTextCellPopperContent, _extends({
+        tabIndex: -1,
+        onKeyDown: event => {
+          if (event.key === 'Escape') {
+            event.stopPropagation();
+            setPopupOpen(false);
+            apiRef.current.getCellElement(id, colDef.field)?.focus();
+          }
+        }
+      }, slotProps?.popperContent, {
+        className: clsx(classes.popperContent, slotProps?.popperContent?.className),
+        style: _extends({
+          '--_width': `${colDef.computedWidth}px`
+        }, slotProps?.popperContent?.style),
+        children: [renderContent ? renderContent(value) : value, /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('longTextCellCollapseLabel'),
+          "aria-keyshortcuts": "Escape"
+        }, slotProps?.collapseButton, {
+          className: clsx(classes.collapseButton, slotProps?.collapseButton?.className),
+          onClick: handleCollapseClick,
+          children: /*#__PURE__*/_jsx(rootProps.slots.longTextCellCollapseIcon, {
+            fontSize: "inherit"
+          })
+        }))]
+      }))
+    }))]
+  }));
+}
+export { GridLongTextCell };
+export const renderLongTextCell = params => /*#__PURE__*/_jsx(GridLongTextCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderLongTextCell.displayName = "renderLongTextCell";

package/components/cell/GridSkeletonCell.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { GridColType } from "../../models/index.mjs";
+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): import("react/jsx-runtime").JSX.Element;
+declare namespace GridSkeletonCell {
+  var propTypes: any;
+}
+declare const Memoized: typeof GridSkeletonCell;
+export { Memoized as GridSkeletonCell };

package/components/cell/GridSkeletonCell.mjs

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { createRandomNumberGenerator } from "../../utils/utils.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CIRCULAR_CONTENT_SIZE = '1.3em';
+const CONTENT_HEIGHT = '1.2em';
+const DEFAULT_CONTENT_WIDTH_RANGE = [40, 80];
+const CONTENT_WIDTH_RANGE_BY_TYPE = {
+  number: [40, 60],
+  string: [40, 80],
+  date: [40, 60],
+  dateTime: [60, 80],
+  singleSelect: [40, 80]
+};
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    classes,
+    empty
+  } = ownerState;
+  const slots = {
+    root: ['cell', 'cellSkeleton', `cell--text${align ? capitalize(align) : 'Left'}`, empty && 'cellEmpty']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const randomNumberGenerator = createRandomNumberGenerator(12345);
+function GridSkeletonCell(props) {
+  const {
+      field,
+      type,
+      align,
+      width,
+      height,
+      empty = false,
+      style,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    align,
+    empty
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  // Memo prevents the non-circular skeleton widths changing to random widths on every render
+  const skeletonProps = React.useMemo(() => {
+    const isCircularContent = type === 'boolean' || type === 'actions';
+    if (isCircularContent) {
+      return {
+        variant: 'circular',
+        width: CIRCULAR_CONTENT_SIZE,
+        height: CIRCULAR_CONTENT_SIZE
+      };
+    }
+
+    // The width of the skeleton is a random number between the min and max values
+    // The min and max values are determined by the type of the column
+    const [min, max] = type ? CONTENT_WIDTH_RANGE_BY_TYPE[type] ?? DEFAULT_CONTENT_WIDTH_RANGE : DEFAULT_CONTENT_WIDTH_RANGE;
+    return {
+      variant: 'text',
+      width: `${Math.round(randomNumberGenerator(min, max))}%`,
+      height: CONTENT_HEIGHT
+    };
+  }, [type]);
+  return /*#__PURE__*/_jsx("div", _extends({
+    "data-field": field,
+    className: clsx(classes.root, className),
+    style: _extends({
+      height,
+      maxWidth: width,
+      minWidth: width
+    }, style)
+  }, other, {
+    children: !empty && /*#__PURE__*/_jsx(rootProps.slots.baseSkeleton, _extends({}, skeletonProps))
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.string,
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty: PropTypes.bool,
+  field: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+} : void 0;
+const Memoized = fastMemo(GridSkeletonCell);
+export { Memoized as GridSkeletonCell };

package/components/cell/index.d.mts

@@ -0,0 +1,12 @@
+export { GridCell } from "./GridCell.mjs";
+export type { GridCellProps } from "./GridCell.mjs";
+export * from "./GridBooleanCell.mjs";
+export * from "./GridEditBooleanCell.mjs";
+export * from "./GridEditDateCell.mjs";
+export * from "./GridEditInputCell.mjs";
+export * from "./GridEditSingleSelectCell.mjs";
+export * from "./GridActionsCell.mjs";
+export * from "./GridActionsCellItem.mjs";
+export * from "./GridSkeletonCell.mjs";
+export * from "./GridLongTextCell.mjs";
+export * from "./GridEditLongTextCell.mjs";

package/components/cell/index.mjs

@@ -0,0 +1,11 @@
+export { GridCell } from "./GridCell.mjs";
+export * from "./GridBooleanCell.mjs";
+export * from "./GridEditBooleanCell.mjs";
+export * from "./GridEditDateCell.mjs";
+export * from "./GridEditInputCell.mjs";
+export * from "./GridEditSingleSelectCell.mjs";
+export * from "./GridActionsCell.mjs";
+export * from "./GridActionsCellItem.mjs";
+export * from "./GridSkeletonCell.mjs";
+export * from "./GridLongTextCell.mjs";
+export * from "./GridEditLongTextCell.mjs";

package/components/columnHeaders/ColumnHeaderMenuIcon.d.mts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridStateColDef } from "../../models/colDef/gridColDef.mjs";
+export interface ColumnHeaderMenuIconProps {
+  colDef: GridStateColDef;
+  columnMenuId: string;
+  columnMenuButtonId: string;
+  open: boolean;
+  iconButtonRef: React.RefObject<HTMLButtonElement | null>;
+}
+export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => import("react/jsx-runtime").JSX.Element>;

package/components/columnHeaders/ColumnHeaderMenuIcon.mjs

@@ -0,0 +1,66 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    open
+  } = ownerState;
+  const slots = {
+    root: ['menuIcon', open && 'menuOpen'],
+    button: ['menuIconButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
+  const {
+    colDef,
+    open,
+    columnMenuId,
+    columnMenuButtonId,
+    iconButtonRef
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleMenuIconClick = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    apiRef.current.toggleColumnMenu(colDef.field);
+  }, [apiRef, colDef.field]);
+  const columnName = colDef.headerName ?? colDef.field;
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('columnMenuLabel'),
+      enterDelay: 1000
+    }, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuAriaLabel')(columnName),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
+        id: columnMenuButtonId
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "inherit"
+        })
+      }))
+    }))
+  });
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

package/components/columnHeaders/GridBaseColumnHeaders.mjs

@@ -0,0 +1,47 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaders']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnHeadersRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaders'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
+});
+export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other, {
+    role: "presentation",
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridBaseColumnHeaders.displayName = "GridBaseColumnHeaders";

package/components/columnHeaders/GridColumnGroupHeader.d.mts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PinnedColumnPosition } from "../../internals/constants.mjs";
+interface GridColumnGroupHeaderProps {
+  groupId: string | null;
+  width: number;
+  fields: string[];
+  colIndex: number;
+  isLastColumn: boolean;
+  depth: number;
+  maxDepth: number;
+  height: number;
+  hasFocus?: boolean;
+  tabIndex: 0 | -1;
+  style?: React.CSSProperties;
+  showLeftBorder: boolean;
+  showRightBorder: boolean;
+  pinnedPosition: PinnedColumnPosition | undefined;
+  pinnedOffset?: number;
+}
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { GridColumnGroupHeader };