@mui/x-data-grid 7.0.0-beta.2 → 7.0.0-beta.4

package/legacy/components/cell/GridSkeletonCell.js

@@ -1,52 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["field", "align", "width", "contentWidth"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Skeleton from '@mui/material/Skeleton';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var align = ownerState.align,
-    classes = ownerState.classes;
-  var slots = {
-    root: ['cell', 'cellSkeleton', "cell--text".concat(capitalize(align)), 'withBorderColor']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridSkeletonCell(props) {
-  var field = props.field,
-    align = props.align,
-    width = props.width,
-    contentWidth = props.contentWidth,
-    other = _objectWithoutProperties(props, _excluded);
-  var rootProps = useGridRootProps();
-  var ownerState = {
-    classes: rootProps.classes,
-    align: align
-  };
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx("div", _extends({
-    className: classes.root,
-    style: {
-      width: width
-    }
-  }, other, {
-    children: /*#__PURE__*/_jsx(Skeleton, {
-      width: "".concat(contentWidth, "%")
-    })
-  }));
-}
-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 "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  align: PropTypes.string.isRequired,
-  contentWidth: PropTypes.number.isRequired,
-  field: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired
-} : void 0;
-export { GridSkeletonCell };

package/legacy/components/cell/index.js

@@ -1,9 +0,0 @@
-export { GridCell } from './GridCell';
-export * from './GridBooleanCell';
-export * from './GridEditBooleanCell';
-export * from './GridEditDateCell';
-export * from './GridEditInputCell';
-export * from './GridEditSingleSelectCell';
-export * from './GridActionsCell';
-export * from './GridActionsCellItem';
-export * from './GridSkeletonCell';

package/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -1,59 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    open = ownerState.open;
-  var slots = {
-    root: ['menuIcon', open && 'menuOpen'],
-    button: ['menuIconButton']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
-  var colDef = props.colDef,
-    open = props.open,
-    columnMenuId = props.columnMenuId,
-    columnMenuButtonId = props.columnMenuButtonId,
-    iconButtonRef = props.iconButtonRef;
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var ownerState = _extends({}, props, {
-    classes: rootProps.classes
-  });
-  var classes = useUtilityClasses(ownerState);
-  var handleMenuIconClick = React.useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    apiRef.current.toggleColumnMenu(colDef.field);
-  }, [apiRef, 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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        ref: iconButtonRef,
-        tabIndex: -1,
-        className: classes.button,
-        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
-        size: "small",
-        onClick: handleMenuIconClick,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        "aria-controls": open ? columnMenuId : undefined,
-        id: columnMenuButtonId
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
-          fontSize: "small"
-        })
-      }))
-    }))
-  });
-});

package/legacy/components/columnHeaders/GridBaseColumnHeaders.js

@@ -1,41 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['columnHeaders']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridColumnHeadersRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnHeaders',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.columnHeaders;
-  }
-})({
-  display: 'flex',
-  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
-  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
-});
-export var GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
-  var className = props.className,
-    other = _objectWithoutProperties(props, _excluded);
-  var rootProps = useGridRootProps();
-  var classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
-    ref: ref,
-    className: clsx(className, classes.root),
-    ownerState: rootProps
-  }, other, {
-    role: "presentation"
-  }));
-});

package/legacy/components/columnHeaders/GridColumnGroupHeader.js

@@ -1,132 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_useId as useId, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
-import { isEventTargetInPortal } from '../../utils/domUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    headerAlign = ownerState.headerAlign,
-    isDragging = ownerState.isDragging,
-    showColumnBorder = ownerState.showColumnBorder,
-    groupId = ownerState.groupId;
-  var slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
-    draggableContainer: ['columnHeaderDraggableContainer'],
-    titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
-    titleContainerContent: ['columnHeaderTitleContainerContent']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridColumnGroupHeader(props) {
-  var _columnGroupsLookup$g;
-  var groupId = props.groupId,
-    width = props.width,
-    depth = props.depth,
-    maxDepth = props.maxDepth,
-    fields = props.fields,
-    height = props.height,
-    colIndex = props.colIndex,
-    hasFocus = props.hasFocus,
-    tabIndex = props.tabIndex,
-    isLastColumn = props.isLastColumn;
-  var rootProps = useGridRootProps();
-  var headerCellRef = React.useRef(null);
-  var apiRef = useGridApiContext();
-  var columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
-  var group = groupId ? columnGroupsLookup[groupId] : {};
-  var _group$headerName = group.headerName,
-    headerName = _group$headerName === void 0 ? groupId != null ? groupId : '' : _group$headerName,
-    _group$description = group.description,
-    description = _group$description === void 0 ? '' : _group$description,
-    _group$headerAlign = group.headerAlign,
-    headerAlign = _group$headerAlign === void 0 ? undefined : _group$headerAlign;
-  var headerComponent;
-  var render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
-  var renderParams = React.useMemo(function () {
-    return {
-      groupId: groupId,
-      headerName: headerName,
-      description: description,
-      depth: depth,
-      maxDepth: maxDepth,
-      fields: fields,
-      colIndex: colIndex,
-      isLastColumn: isLastColumn
-    };
-  }, [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
-  if (groupId && render) {
-    headerComponent = render(renderParams);
-  }
-  var showColumnBorder = rootProps.showColumnVerticalBorder;
-  var ownerState = _extends({}, props, {
-    classes: rootProps.classes,
-    showColumnBorder: showColumnBorder,
-    headerAlign: headerAlign,
-    depth: depth,
-    isDragging: false
-  });
-  var label = headerName != null ? headerName : groupId;
-  var id = useId();
-  var elementId = groupId === null ? "empty-group-cell-".concat(id) : groupId;
-  var classes = useUtilityClasses(ownerState);
-  React.useLayoutEffect(function () {
-    if (hasFocus) {
-      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-      var elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
-    }
-  }, [apiRef, hasFocus]);
-  var publish = React.useCallback(function (eventName) {
-    return function (event) {
-      // Ignore portal
-      // See https://github.com/mui/mui-x/issues/1721
-      if (isEventTargetInPortal(event)) {
-        return;
-      }
-      apiRef.current.publishEvent(eventName, renderParams, event);
-    };
-  },
-  // For now this is stupid, because renderParams change all the time.
-  // Need to move it's computation in the api, such that for a given depth+columnField, I can get the group parameters
-  [apiRef, renderParams]);
-  var mouseEventsHandlers = React.useMemo(function () {
-    return {
-      onKeyDown: publish('columnGroupHeaderKeyDown'),
-      onFocus: publish('columnGroupHeaderFocus'),
-      onBlur: publish('columnGroupHeaderBlur')
-    };
-  }, [publish]);
-  var headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
-    ref: headerCellRef,
-    classes: classes,
-    columnMenuOpen: false,
-    colIndex: colIndex,
-    height: height,
-    isResizing: false,
-    sortDirection: null,
-    hasFocus: false,
-    tabIndex: tabIndex,
-    isDraggable: false,
-    headerComponent: headerComponent,
-    headerClassName: headerClassName,
-    description: description,
-    elementId: elementId,
-    width: width,
-    columnMenuIconButton: null,
-    columnTitleIconButtons: null,
-    resizable: false,
-    label: label,
-    "aria-colspan": fields.length
-    // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
-    ,
-    "data-fields": "|-".concat(fields.join('-|-'), "-|")
-  }, mouseEventsHandlers));
-}
-export { GridColumnGroupHeader };

package/legacy/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -1,93 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
-import { useGridSelector } from '../../hooks';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridIconButtonContainer } from './GridIconButtonContainer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    icon: ['filterIcon']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridColumnHeaderFilterIconButton(props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
-  var counter = props.counter,
-    field = props.field,
-    onClick = props.onClick;
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var ownerState = _extends({}, props, {
-    classes: rootProps.classes
-  });
-  var classes = useUtilityClasses(ownerState);
-  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  var labelId = useId();
-  var panelId = useId();
-  var toggleFilter = React.useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    var _gridPreferencePanelS = gridPreferencePanelStateSelector(apiRef.current.state),
-      open = _gridPreferencePanelS.open,
-      openedPanelValue = _gridPreferencePanelS.openedPanelValue;
-    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
-      apiRef.current.hideFilterPanel();
-    } else {
-      apiRef.current.showFilterPanel(undefined, panelId, labelId);
-    }
-    if (onClick) {
-      onClick(apiRef.current.getColumnHeaderParams(field), event);
-    }
-  }, [apiRef, field, onClick, panelId, labelId]);
-  if (!counter) {
-    return null;
-  }
-  var open = preferencePanel.open && preferencePanel.labelId === labelId;
-  var iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-    id: labelId,
-    onClick: toggleFilter,
-    color: "default",
-    "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
-    size: "small",
-    tabIndex: -1,
-    "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
-      className: classes.icon,
-      fontSize: "small"
-    })
-  }));
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
-    title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
-    enterDelay: 1000
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
-    children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
-        badgeContent: counter,
-        color: "default",
-        children: iconButton
-      }), counter === 1 && iconButton]
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  counter: PropTypes.number,
-  field: PropTypes.string.isRequired,
-  onClick: PropTypes.func
-} : void 0;
-export { GridColumnHeaderFilterIconButton };

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,212 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
-import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
-import { isEventTargetInPortal } from '../../utils/domUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var colDef = ownerState.colDef,
-    classes = ownerState.classes,
-    isDragging = ownerState.isDragging,
-    sortDirection = ownerState.sortDirection,
-    showRightBorder = ownerState.showRightBorder,
-    filterItemsCounter = ownerState.filterItemsCounter;
-  var isColumnSorted = sortDirection != null;
-  var isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
-  // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
-  var isColumnNumeric = colDef.type === 'number';
-  var slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder'],
-    draggableContainer: ['columnHeaderDraggableContainer'],
-    titleContainer: ['columnHeaderTitleContainer'],
-    titleContainerContent: ['columnHeaderTitleContainerContent']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridColumnHeaderItem(props) {
-  var _rootProps$slotProps, _colDef$sortingOrder, _rootProps$slotProps2, _colDef$headerName;
-  var colDef = props.colDef,
-    columnMenuOpen = props.columnMenuOpen,
-    colIndex = props.colIndex,
-    headerHeight = props.headerHeight,
-    isResizing = props.isResizing,
-    sortDirection = props.sortDirection,
-    sortIndex = props.sortIndex,
-    filterItemsCounter = props.filterItemsCounter,
-    hasFocus = props.hasFocus,
-    tabIndex = props.tabIndex,
-    disableReorder = props.disableReorder,
-    separatorSide = props.separatorSide;
-  var apiRef = useGridPrivateApiContext();
-  var rootProps = useGridRootProps();
-  var headerCellRef = React.useRef(null);
-  var columnMenuId = useId();
-  var columnMenuButtonId = useId();
-  var iconButtonRef = React.useRef(null);
-  var _React$useState = React.useState(columnMenuOpen),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    showColumnMenuIcon = _React$useState2[0],
-    setShowColumnMenuIcon = _React$useState2[1];
-  var isDraggable = React.useMemo(function () {
-    return !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder;
-  }, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
-  var headerComponent;
-  if (colDef.renderHeader) {
-    headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
-  }
-  var ownerState = _extends({}, props, {
-    classes: rootProps.classes,
-    showRightBorder: rootProps.showColumnVerticalBorder
-  });
-  var classes = useUtilityClasses(ownerState);
-  var publish = React.useCallback(function (eventName) {
-    return function (event) {
-      // Ignore portal
-      // See https://github.com/mui/mui-x/issues/1721
-      if (isEventTargetInPortal(event)) {
-        return;
-      }
-      apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
-    };
-  }, [apiRef, colDef.field]);
-  var mouseEventsHandlers = React.useMemo(function () {
-    return {
-      onClick: publish('columnHeaderClick'),
-      onDoubleClick: publish('columnHeaderDoubleClick'),
-      onMouseOver: publish('columnHeaderOver'),
-      // TODO remove as it's not used
-      onMouseOut: publish('columnHeaderOut'),
-      // TODO remove as it's not used
-      onMouseEnter: publish('columnHeaderEnter'),
-      // TODO remove as it's not used
-      onMouseLeave: publish('columnHeaderLeave'),
-      // TODO remove as it's not used
-      onKeyDown: publish('columnHeaderKeyDown'),
-      onFocus: publish('columnHeaderFocus'),
-      onBlur: publish('columnHeaderBlur')
-    };
-  }, [publish]);
-  var draggableEventHandlers = React.useMemo(function () {
-    return isDraggable ? {
-      onDragStart: publish('columnHeaderDragStart'),
-      onDragEnter: publish('columnHeaderDragEnter'),
-      onDragOver: publish('columnHeaderDragOver'),
-      onDragEnd: publish('columnHeaderDragEnd')
-    } : {};
-  }, [isDraggable, publish]);
-  var columnHeaderSeparatorProps = React.useMemo(function () {
-    return {
-      onMouseDown: publish('columnSeparatorMouseDown'),
-      onDoubleClick: publish('columnSeparatorDoubleClick')
-    };
-  }, [publish]);
-  React.useEffect(function () {
-    if (!showColumnMenuIcon) {
-      setShowColumnMenuIcon(columnMenuOpen);
-    }
-  }, [showColumnMenuIcon, columnMenuOpen]);
-  var handleExited = React.useCallback(function () {
-    setShowColumnMenuIcon(false);
-  }, []);
-  var columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && /*#__PURE__*/_jsx(ColumnHeaderMenuIcon, {
-    colDef: colDef,
-    columnMenuId: columnMenuId,
-    columnMenuButtonId: columnMenuButtonId,
-    open: showColumnMenuIcon,
-    iconButtonRef: iconButtonRef
-  });
-  var columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
-    columnMenuId: columnMenuId,
-    columnMenuButtonId: columnMenuButtonId,
-    field: colDef.field,
-    open: columnMenuOpen,
-    target: iconButtonRef.current,
-    ContentComponent: rootProps.slots.columnMenu,
-    contentComponentProps: (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnMenu,
-    onExited: handleExited
-  });
-  var sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
-  var showSortIcon = (colDef.sortable || sortDirection != null) && !colDef.hideSortIcons && !rootProps.disableColumnSorting;
-  var columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
-      field: colDef.field,
-      counter: filterItemsCounter
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
-      direction: sortDirection,
-      index: sortIndex,
-      sortingOrder: sortingOrder,
-      disabled: !colDef.sortable
-    })]
-  });
-  React.useLayoutEffect(function () {
-    var columnMenuState = apiRef.current.state.columnMenu;
-    if (hasFocus && !columnMenuState.open) {
-      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-      var elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus == null || elementToFocus.focus();
-      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-    }
-  }, [apiRef, hasFocus]);
-  var headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
-    field: colDef.field,
-    colDef: colDef
-  }) : colDef.headerClassName;
-  var label = (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field;
-  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
-    ref: headerCellRef,
-    classes: classes,
-    columnMenuOpen: columnMenuOpen,
-    colIndex: colIndex,
-    height: headerHeight,
-    isResizing: isResizing,
-    sortDirection: sortDirection,
-    hasFocus: hasFocus,
-    tabIndex: tabIndex,
-    separatorSide: separatorSide,
-    isDraggable: isDraggable,
-    headerComponent: headerComponent,
-    description: colDef.description,
-    elementId: colDef.field,
-    width: colDef.computedWidth,
-    columnMenuIconButton: columnMenuIconButton,
-    columnTitleIconButtons: columnTitleIconButtons,
-    headerClassName: headerClassName,
-    label: label,
-    resizable: !rootProps.disableColumnResize && !!colDef.resizable,
-    "data-field": colDef.field,
-    columnMenu: columnMenu,
-    draggableContainerProps: draggableEventHandlers,
-    columnHeaderSeparatorProps: columnHeaderSeparatorProps
-  }, mouseEventsHandlers));
-}
-process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  colDef: PropTypes.object.isRequired,
-  colIndex: PropTypes.number.isRequired,
-  columnMenuOpen: PropTypes.bool.isRequired,
-  disableReorder: PropTypes.bool,
-  filterItemsCounter: PropTypes.number,
-  hasFocus: PropTypes.bool,
-  headerHeight: PropTypes.number.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  isResizing: PropTypes.bool.isRequired,
-  separatorSide: PropTypes.oneOf(['left', 'right']),
-  sortDirection: PropTypes.oneOf(['asc', 'desc']),
-  sortIndex: PropTypes.number,
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired
-} : void 0;
-var Memoized = fastMemo(GridColumnHeaderItem);
-export { Memoized as GridColumnHeaderItem };

package/legacy/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["resizable", "resizing", "height", "side"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-var GridColumnHeaderSeparatorSides = /*#__PURE__*/function (GridColumnHeaderSeparatorSides) {
-  GridColumnHeaderSeparatorSides["Left"] = "left";
-  GridColumnHeaderSeparatorSides["Right"] = "right";
-  return GridColumnHeaderSeparatorSides;
-}(GridColumnHeaderSeparatorSides || {});
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var resizable = ownerState.resizable,
-    resizing = ownerState.resizing,
-    classes = ownerState.classes,
-    side = ownerState.side;
-  var slots = {
-    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && "columnSeparator--side".concat(capitalize(side))],
-    icon: ['iconSeparator']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridColumnHeaderSeparatorRaw(props) {
-  var resizable = props.resizable,
-    resizing = props.resizing,
-    height = props.height,
-    _props$side = props.side,
-    side = _props$side === void 0 ? GridColumnHeaderSeparatorSides.Right : _props$side,
-    other = _objectWithoutProperties(props, _excluded);
-  var rootProps = useGridRootProps();
-  var ownerState = _extends({}, props, {
-    side: side,
-    classes: rootProps.classes
-  });
-  var classes = useUtilityClasses(ownerState);
-  var stopClick = React.useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    _jsx("div", _extends({
-      className: classes.root,
-      style: {
-        minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
-      }
-    }, other, {
-      onClick: stopClick,
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnResizeIcon, {
-        className: classes.icon
-      })
-    }))
-  );
-}
-var GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
-process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  height: PropTypes.number.isRequired,
-  resizable: PropTypes.bool.isRequired,
-  resizing: PropTypes.bool.isRequired,
-  side: PropTypes.oneOf(['left', 'right'])
-} : void 0;
-export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };