@mui/x-data-grid-pro 7.0.0-beta.6 → 7.0.0

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -1,547 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { gridClasses, GridPinnedColumnPosition, useGridApiEventHandler, useGridApiOptionHandler, useGridApiMethod, useGridNativeEventListener, useGridLogger, useGridSelector, gridVirtualizationColumnEnabledSelector } from '@mui/x-data-grid';
-import { clamp, findParentElementFromClassName, gridColumnsStateSelector, useOnMount, useTimeout, createControllablePromise } from '@mui/x-data-grid/internals';
-import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, findGridHeader, findGridCells } from '../../../utils/domUtils';
-import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone = false;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
-function trackFinger(event, currentTouchId) {
-  if (currentTouchId !== undefined && event.changedTouches) {
-    for (let i = 0; i < event.changedTouches.length; i += 1) {
-      const touch = event.changedTouches[i];
-      if (touch.identifier === currentTouchId) {
-        return {
-          x: touch.clientX,
-          y: touch.clientY
-        };
-      }
-    }
-    return false;
-  }
-  return {
-    x: event.clientX,
-    y: event.clientY
-  };
-}
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
-  let newWidth = initialOffsetToSeparator;
-  if (resizeDirection === 'Right') {
-    newWidth += clickX - columnBounds.left;
-  } else {
-    newWidth += columnBounds.right - clickX;
-  }
-  return newWidth;
-}
-function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
-  if (resizeDirection === 'Left') {
-    return clickX - columnBounds.left;
-  }
-  return columnBounds.right - clickX;
-}
-function flipResizeDirection(side) {
-  if (side === 'Right') {
-    return 'Left';
-  }
-  return 'Right';
-}
-function getResizeDirection(separator, direction) {
-  const side = separator.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
-  if (direction === 'rtl') {
-    // Resizing logic should be mirrored in the RTL case
-    return flipResizeDirection(side);
-  }
-  return side;
-}
-function preventClick(event) {
-  event.preventDefault();
-  event.stopImmediatePropagation();
-}
-
-/**
- * Checker that returns a promise that resolves when the column virtualization
- * is disabled.
- */
-function useColumnVirtualizationDisabled(apiRef) {
-  const promise = React.useRef();
-  const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
-  const value = useGridSelector(apiRef, selector);
-  React.useEffect(() => {
-    if (promise.current && value === false) {
-      promise.current.resolve();
-      promise.current = undefined;
-    }
-  });
-  const asyncCheck = () => {
-    if (!promise.current) {
-      if (selector() === false) {
-        return Promise.resolve();
-      }
-      promise.current = createControllablePromise();
-    }
-    return promise.current;
-  };
-  return asyncCheck;
-}
-
-/**
- * Basic statistical outlier detection, checks if the value is `F * IQR` away from
- * the Q1 and Q3 boundaries. IQR: interquartile range.
- */
-function excludeOutliers(inputValues, factor) {
-  if (inputValues.length < 4) {
-    return inputValues;
-  }
-  const values = inputValues.slice();
-  values.sort((a, b) => a - b);
-  const q1 = values[Math.floor(values.length * 0.25)];
-  const q3 = values[Math.floor(values.length * 0.75) - 1];
-  const iqr = q3 - q1;
-
-  // We make a small adjustment if `iqr < 5` for the cases where the IQR is
-  // very small (e.g. zero) due to very close by values in the input data.
-  // Otherwise, with an IQR of `0`, anything outside that would be considered
-  // an outlier, but it makes more sense visually to allow for this 5px variance
-  // rather than showing a cropped cell.
-  const deviation = iqr < 5 ? 5 : iqr * factor;
-  return values.filter(v => v > q1 - deviation && v < q3 + deviation);
-}
-function extractColumnWidths(apiRef, options, columns) {
-  const widthByField = {};
-  const root = apiRef.current.rootElementRef.current;
-  root.classList.add(gridClasses.autosizing);
-  columns.forEach(column => {
-    const cells = findGridCells(apiRef.current, column.field);
-    const widths = cells.map(cell => {
-      var _cell$getBoundingClie;
-      return (_cell$getBoundingClie = cell.getBoundingClientRect().width) != null ? _cell$getBoundingClie : 0;
-    });
-    const filteredWidths = options.includeOutliers ? widths : excludeOutliers(widths, options.outliersFactor);
-    if (options.includeHeaders) {
-      const header = findGridHeader(apiRef.current, column.field);
-      if (header) {
-        var _iconContainer$client, _menuContainer$client;
-        const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
-        const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
-        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
-        const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
-        const element = title != null ? title : content;
-        const style = window.getComputedStyle(header, null);
-        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-        const contentWidth = element.scrollWidth + 1;
-        const width = contentWidth + paddingWidth + ((_iconContainer$client = iconContainer == null ? void 0 : iconContainer.clientWidth) != null ? _iconContainer$client : 0) + ((_menuContainer$client = menuContainer == null ? void 0 : menuContainer.clientWidth) != null ? _menuContainer$client : 0);
-        filteredWidths.push(width);
-      }
-    }
-    const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined;
-    const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined;
-    const min = hasColumnMin ? column.minWidth : 0;
-    const max = hasColumnMax ? column.maxWidth : Infinity;
-    const maxContent = filteredWidths.length === 0 ? 0 : Math.max(...filteredWidths);
-    widthByField[column.field] = clamp(maxContent, min, max);
-  });
-  root.classList.remove(gridClasses.autosizing);
-  return widthByField;
-}
-export const columnResizeStateInitializer = state => _extends({}, state, {
-  columnResize: {
-    resizingColumnField: ''
-  }
-});
-/**
- * @requires useGridColumns (method, event)
- * TODO: improve experience for last column
- */
-export const useGridColumnResize = (apiRef, props) => {
-  const theme = useTheme();
-  const logger = useGridLogger(apiRef, 'useGridColumnResize');
-  const colDefRef = React.useRef();
-  const previousMouseClickEvent = React.useRef();
-  const columnHeaderElementRef = React.useRef();
-  const headerFilterElementRef = React.useRef();
-  const groupHeaderElementsRef = React.useRef([]);
-  const cellElementsRef = React.useRef([]);
-  const leftPinnedCellsAfterRef = React.useRef([]);
-  const rightPinnedCellsBeforeRef = React.useRef([]);
-  const fillerLeftRef = React.useRef();
-  const fillerRightRef = React.useRef();
-
-  // To improve accessibility, the separator has padding on both sides.
-  // Clicking inside the padding area should be treated as a click in the separator.
-  // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef();
-  const resizeDirection = React.useRef();
-  const stopResizeEventTimeout = useTimeout();
-  const touchId = React.useRef();
-  const updateWidth = newWidth => {
-    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
-    const prevWidth = columnHeaderElementRef.current.offsetWidth;
-    const widthDiff = newWidth - prevWidth;
-    colDefRef.current.computedWidth = newWidth;
-    colDefRef.current.width = newWidth;
-    colDefRef.current.flex = 0;
-    columnHeaderElementRef.current.style.width = `${newWidth}px`;
-    columnHeaderElementRef.current.style.minWidth = `${newWidth}px`;
-    columnHeaderElementRef.current.style.maxWidth = `${newWidth}px`;
-    const headerFilterElement = headerFilterElementRef.current;
-    if (headerFilterElement) {
-      headerFilterElement.style.width = `${newWidth}px`;
-      headerFilterElement.style.minWidth = `${newWidth}px`;
-      headerFilterElement.style.maxWidth = `${newWidth}px`;
-    }
-    groupHeaderElementsRef.current.forEach(element => {
-      const div = element;
-      let finalWidth;
-      if (div.getAttribute('aria-colspan') === '1') {
-        finalWidth = `${newWidth}px`;
-      } else {
-        // Cell with colspan > 1 cannot be just updated width new width.
-        // Instead, we add width diff to the current width.
-        finalWidth = `${div.offsetWidth + widthDiff}px`;
-      }
-      div.style.width = finalWidth;
-      div.style.minWidth = finalWidth;
-      div.style.maxWidth = finalWidth;
-    });
-    cellElementsRef.current.forEach(element => {
-      const div = element;
-      let finalWidth;
-      if (div.getAttribute('aria-colspan') === '1') {
-        finalWidth = `${newWidth}px`;
-      } else {
-        // Cell with colspan > 1 cannot be just updated width new width.
-        // Instead, we add width diff to the current width.
-        finalWidth = `${div.offsetWidth + widthDiff}px`;
-      }
-      div.style.setProperty('--width', finalWidth);
-    });
-    const pinnedPosition = apiRef.current.isColumnPinned(colDefRef.current.field);
-    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
-      updateProperty(fillerLeftRef.current, 'width', widthDiff);
-      leftPinnedCellsAfterRef.current.forEach(cell => {
-        updateProperty(cell, 'left', widthDiff);
-      });
-    }
-    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
-      updateProperty(fillerRightRef.current, 'width', widthDiff);
-      rightPinnedCellsBeforeRef.current.forEach(cell => {
-        updateProperty(cell, 'right', widthDiff);
-      });
-    }
-  };
-  const finishResize = nativeEvent => {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-
-    // Prevent double-clicks from being interpreted as two separate clicks
-    if (previousMouseClickEvent.current) {
-      const prevEvent = previousMouseClickEvent.current;
-      const prevTimeStamp = prevEvent.timeStamp;
-      const prevClientX = prevEvent.clientX;
-      const prevClientY = prevEvent.clientY;
-
-      // Check if the current event is part of a double-click
-      if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
-        previousMouseClickEvent.current = undefined;
-        return;
-      }
-    }
-    if (colDefRef.current) {
-      apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
-      logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
-    }
-    stopResizeEventTimeout.start(0, () => {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-  };
-  const storeReferences = (colDef, separator, xStart) => {
-    var _apiRef$current$colum;
-    const root = apiRef.current.rootElementRef.current;
-    colDefRef.current = colDef;
-    columnHeaderElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersContainerElementRef.current, colDef.field);
-    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
-    if (headerFilterElement) {
-      headerFilterElementRef.current = headerFilterElement;
-    }
-    groupHeaderElementsRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current, colDef.field);
-    cellElementsRef.current = findGridCellElementsFromCol(columnHeaderElementRef.current, apiRef.current);
-    fillerLeftRef.current = findGridElement(apiRef.current, 'filler--pinnedLeft');
-    fillerRightRef.current = findGridElement(apiRef.current, 'filler--pinnedRight');
-    const pinnedPosition = apiRef.current.isColumnPinned(colDef.field);
-    leftPinnedCellsAfterRef.current = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedCellsBeforeRef.current = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, columnHeaderElementRef.current);
-    resizeDirection.current = getResizeDirection(separator, theme.direction);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-  };
-  const handleResizeMouseUp = useEventCallback(finishResize);
-  const handleResizeMouseMove = useEventCallback(nativeEvent => {
-    // Cancel move in case some other element consumed a mouseup event and it was not fired.
-    if (nativeEvent.buttons === 0) {
-      handleResizeMouseUp(nativeEvent);
-      return;
-    }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
-    updateWidth(newWidth);
-    const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
-      width: newWidth
-    };
-    apiRef.current.publishEvent('columnResize', params, nativeEvent);
-  });
-  const handleTouchEnd = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId.current);
-    if (!finger) {
-      return;
-    }
-    finishResize(nativeEvent);
-  });
-  const handleTouchMove = useEventCallback(nativeEvent => {
-    const finger = trackFinger(nativeEvent, touchId.current);
-    if (!finger) {
-      return;
-    }
-
-    // Cancel move in case some other element consumed a touchmove event and it was not fired.
-    if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
-      handleTouchEnd(nativeEvent);
-      return;
-    }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
-    updateWidth(newWidth);
-    const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
-      width: newWidth
-    };
-    apiRef.current.publishEvent('columnResize', params, nativeEvent);
-  });
-  const handleTouchStart = useEventCallback(event => {
-    const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']);
-    // Let the event bubble if the target is not a col separator
-    if (!cellSeparator) {
-      return;
-    }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
-    }
-    const touch = event.changedTouches[0];
-    if (touch != null) {
-      // A number that uniquely identifies the current finger in the touch session.
-      touchId.current = touch.identifier;
-    }
-    const columnHeaderElement = findParentElementFromClassName(event.target, gridClasses.columnHeader);
-    const field = getFieldFromHeaderElem(columnHeaderElement);
-    const colDef = apiRef.current.getColumn(field);
-    logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent('columnResizeStart', {
-      field
-    }, event);
-    storeReferences(colDef, cellSeparator, touch.clientX);
-    const doc = ownerDocument(event.currentTarget);
-    doc.addEventListener('touchmove', handleTouchMove);
-    doc.addEventListener('touchend', handleTouchEnd);
-  });
-  const stopListening = React.useCallback(() => {
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.body.style.removeProperty('cursor');
-    doc.removeEventListener('mousemove', handleResizeMouseMove);
-    doc.removeEventListener('mouseup', handleResizeMouseUp);
-    doc.removeEventListener('touchmove', handleTouchMove);
-    doc.removeEventListener('touchend', handleTouchEnd);
-    // The click event runs right after the mouseup event, we want to wait until it
-    // has been canceled before removing our handler.
-    setTimeout(() => {
-      doc.removeEventListener('click', preventClick, true);
-    }, 100);
-    if (columnHeaderElementRef.current) {
-      columnHeaderElementRef.current.style.pointerEvents = 'unset';
-    }
-  }, [apiRef, columnHeaderElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
-  const handleResizeStart = React.useCallback(({
-    field
-  }) => {
-    apiRef.current.setState(state => _extends({}, state, {
-      columnResize: _extends({}, state.columnResize, {
-        resizingColumnField: field
-      })
-    }));
-    apiRef.current.forceUpdate();
-  }, [apiRef]);
-  const handleResizeStop = React.useCallback(() => {
-    apiRef.current.setState(state => _extends({}, state, {
-      columnResize: _extends({}, state.columnResize, {
-        resizingColumnField: ''
-      })
-    }));
-    apiRef.current.forceUpdate();
-  }, [apiRef]);
-  const handleColumnResizeMouseDown = useEventCallback(({
-    colDef
-  }, event) => {
-    // Only handle left clicks
-    if (event.button !== 0) {
-      return;
-    }
-
-    // Skip if the column isn't resizable
-    if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
-      return;
-    }
-
-    // Avoid text selection
-    event.preventDefault();
-    logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent('columnResizeStart', {
-      field: colDef.field
-    }, event);
-    storeReferences(colDef, event.currentTarget, event.clientX);
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.body.style.cursor = 'col-resize';
-    previousMouseClickEvent.current = event.nativeEvent;
-    doc.addEventListener('mousemove', handleResizeMouseMove);
-    doc.addEventListener('mouseup', handleResizeMouseUp);
-
-    // Prevent the click event if we have resized the column.
-    // Fixes https://github.com/mui/mui-x/issues/4777
-    doc.addEventListener('click', preventClick, true);
-  });
-  const handleColumnSeparatorDoubleClick = useEventCallback((params, event) => {
-    if (props.disableAutosize) {
-      return;
-    }
-
-    // Only handle left clicks
-    if (event.button !== 0) {
-      return;
-    }
-    const column = apiRef.current.state.columns.lookup[params.field];
-    if (column.resizable === false) {
-      return;
-    }
-    apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
-      columns: [column.field]
-    }));
-  });
-
-  /**
-   * API METHODS
-   */
-
-  const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef);
-  const isAutosizingRef = React.useRef(false);
-  const autosizeColumns = React.useCallback(async userOptions => {
-    var _apiRef$current$rootE, _userOptions$columns;
-    const root = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
-    if (!root) {
-      return;
-    }
-    if (isAutosizingRef.current) {
-      return;
-    }
-    isAutosizingRef.current = true;
-    const state = gridColumnsStateSelector(apiRef.current.state);
-    const options = _extends({}, DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
-      columns: (_userOptions$columns = userOptions == null ? void 0 : userOptions.columns) != null ? _userOptions$columns : state.orderedFields
-    });
-    options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
-    const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
-    try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
-      const widthByField = extractColumnWidths(apiRef, options, columns);
-      const newColumns = columns.map(column => _extends({}, column, {
-        width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
-      }));
-      if (options.expand) {
-        const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
-        const totalWidth = visibleColumns.reduce((total, column) => {
-          var _ref, _widthByField$column$;
-          return total + ((_ref = (_widthByField$column$ = widthByField[column.field]) != null ? _widthByField$column$ : column.computedWidth) != null ? _ref : column.width);
-        }, 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
-        const remainingWidth = availableWidth - totalWidth;
-        if (remainingWidth > 0) {
-          const widthPerColumn = remainingWidth / (newColumns.length || 1);
-          newColumns.forEach(column => {
-            column.width += widthPerColumn;
-            column.computedWidth += widthPerColumn;
-          });
-        }
-      }
-      apiRef.current.updateColumns(newColumns);
-      newColumns.forEach((newColumn, index) => {
-        if (newColumn.width !== columns[index].width) {
-          const width = newColumn.width;
-          apiRef.current.publishEvent('columnWidthChange', {
-            element: apiRef.current.getColumnHeaderElement(newColumn.field),
-            colDef: newColumn,
-            width
-          });
-        }
-      });
-    } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
-      isAutosizingRef.current = false;
-    }
-  }, [apiRef, columnVirtualizationDisabled]);
-
-  /**
-   * EFFECTS
-   */
-
-  React.useEffect(() => stopListening, [stopListening]);
-  useOnMount(() => {
-    if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
-        apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
-    }
-  });
-  useGridNativeEventListener(apiRef, () => {
-    var _apiRef$current$colum2;
-    return (_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current;
-  }, 'touchstart', handleTouchStart, {
-    passive: doesSupportTouchActionNone()
-  });
-  useGridApiMethod(apiRef, {
-    autosizeColumns
-  }, 'public');
-  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
-  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
-  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
-  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
-};
-function updateProperty(element, property, delta) {
-  if (!element) {
-    return;
-  }
-  element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
-}

package/esm/utils/domUtils.js

@@ -1,109 +0,0 @@
-import { gridClasses } from '@mui/x-data-grid';
-import { findParentElementFromClassName } from '@mui/x-data-grid/internals';
-export function getFieldFromHeaderElem(colCellEl) {
-  return colCellEl.getAttribute('data-field');
-}
-export function findHeaderElementFromField(elem, field) {
-  return elem.querySelector(`[data-field="${field}"]`);
-}
-export function findGroupHeaderElementsFromField(elem, field) {
-  var _elem$querySelectorAl;
-  return Array.from((_elem$querySelectorAl = elem.querySelectorAll(`[data-fields*="|-${field}-|"]`)) != null ? _elem$querySelectorAl : []);
-}
-export function findGridCellElementsFromCol(col, api) {
-  var _api$virtualScrollerR;
-  const root = findParentElementFromClassName(col, gridClasses.root);
-  if (!root) {
-    throw new Error('MUI X: The root element is not found.');
-  }
-  const ariaColIndex = col.getAttribute('aria-colindex');
-  if (!ariaColIndex) {
-    return [];
-  }
-  const colIndex = Number(ariaColIndex) - 1;
-  const cells = [];
-  if (!((_api$virtualScrollerR = api.virtualScrollerRef) != null && _api$virtualScrollerR.current)) {
-    return [];
-  }
-  queryRows(api).forEach(rowElement => {
-    const rowId = rowElement.getAttribute('data-id');
-    if (!rowId) {
-      return;
-    }
-    let columnIndex = colIndex;
-    const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex);
-    if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
-      columnIndex = cellColSpanInfo.leftVisibleCellIndex;
-    }
-    const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`);
-    if (cell) {
-      cells.push(cell);
-    }
-  });
-  return cells;
-}
-export function findGridElement(api, klass) {
-  return api.rootElementRef.current.querySelector(`.${gridClasses[klass]}`);
-}
-export function findLeftPinnedCellsAfterCol(api, col) {
-  const colIndex = parseCellColIndex(col);
-  if (colIndex === null) {
-    return [];
-  }
-  const cells = [];
-  queryRows(api).forEach(rowElement => {
-    const rowId = rowElement.getAttribute('data-id');
-    if (!rowId) {
-      return;
-    }
-    const rightPinnedCells = rowElement.querySelectorAll(`.${gridClasses['cell--pinnedLeft']}`);
-    rightPinnedCells.forEach(cell => {
-      const currentColIndex = parseCellColIndex(cell);
-      if (currentColIndex !== null && currentColIndex > colIndex) {
-        cells.push(cell);
-      }
-    });
-  });
-  return cells;
-}
-export function findRightPinnedCellsBeforeCol(api, col) {
-  const colIndex = parseCellColIndex(col);
-  if (colIndex === null) {
-    return [];
-  }
-  const cells = [];
-  queryRows(api).forEach(rowElement => {
-    const rowId = rowElement.getAttribute('data-id');
-    if (!rowId) {
-      return;
-    }
-    const rightPinnedCells = rowElement.querySelectorAll(`.${gridClasses['cell--pinnedRight']}`);
-    rightPinnedCells.forEach(cell => {
-      const currentColIndex = parseCellColIndex(cell);
-      if (currentColIndex !== null && currentColIndex < colIndex) {
-        cells.push(cell);
-      }
-    });
-  });
-  return cells;
-}
-export function findGridHeader(api, field) {
-  const headers = api.columnHeadersContainerElementRef.current;
-  return headers.querySelector(`:scope > div > div > [data-field="${field}"][role="columnheader"]`);
-}
-export function findGridCells(api, field) {
-  const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
-}
-function queryRows(api) {
-  return api.virtualScrollerRef.current.querySelectorAll(
-  // Use > to ignore rows from nested data grids (e.g. in detail panel)
-  `:scope > div > div > .${gridClasses.row}`);
-}
-function parseCellColIndex(col) {
-  const ariaColIndex = col.getAttribute('aria-colindex');
-  if (!ariaColIndex) {
-    return null;
-  }
-  return Number(ariaColIndex) - 1;
-}

package/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -1,3 +0,0 @@
-import { GridStatePro } from '../../../models/gridStatePro';
-export declare const gridColumnResizeSelector: (state: GridStatePro) => import("./columnResizeState").GridColumnResizeState;
-export declare const gridResizingColumnFieldSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, string>;

package/hooks/features/columnResize/columnResizeSelector.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.gridResizingColumnFieldSelector = exports.gridColumnResizeSelector = void 0;
-var _internals = require("@mui/x-data-grid/internals");
-const gridColumnResizeSelector = state => state.columnResize;
-exports.gridColumnResizeSelector = gridColumnResizeSelector;
-const gridResizingColumnFieldSelector = exports.gridResizingColumnFieldSelector = (0, _internals.createSelector)(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/hooks/features/columnResize/columnResizeState.d.ts

@@ -1,3 +0,0 @@
-export interface GridColumnResizeState {
-    resizingColumnField: string;
-}

package/hooks/features/columnResize/columnResizeState.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});