@mui/x-data-grid-pro 5.5.1 → 5.7.0

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
+import { gridColumnReorderDragColSelector } from './columnReorderSelector';
+const CURSOR_MOVE_DIRECTION_LEFT = 'left';
+const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
+
+const getCursorMoveDirectionX = (currentCoordinates, nextCoordinates) => {
+  return currentCoordinates.x <= nextCoordinates.x ? CURSOR_MOVE_DIRECTION_RIGHT : CURSOR_MOVE_DIRECTION_LEFT;
+};
+
+const hasCursorPositionChanged = (currentCoordinates, nextCoordinates) => currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y;
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    columnHeaderDragging: ['columnHeader--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export const columnReorderStateInitializer = state => _extends({}, state, {
+  columnReorder: {
+    dragCol: ''
+  }
+});
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method)
+ */
+
+export const useGridColumnReorder = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridColumnReorder');
+  const dragColNode = React.useRef(null);
+  const cursorPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const originColumnIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = React.useCallback((params, event) => {
+    if (props.disableColumnReorder || params.colDef.disableReorder) {
+      return;
+    }
+
+    logger.debug(`Start dragging col ${params.field}`); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragColNode.current = event.currentTarget;
+    dragColNode.current.classList.add(classes.columnHeaderDragging);
+    apiRef.current.setState(state => _extends({}, state, {
+      columnReorder: _extends({}, state.columnReorder, {
+        dragCol: params.field
+      })
+    }));
+    apiRef.current.forceUpdate();
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    });
+    originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+  }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
+  const handleDragEnter = React.useCallback((params, event) => {
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+  }, []);
+  const handleDragOver = React.useCallback((params, event) => {
+    const dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (!dragColField) {
+      return;
+    }
+
+    logger.debug(`Dragging over col ${params.field}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    if (params.field !== dragColField && hasCursorPositionChanged(cursorPosition.current, coordinates)) {
+      const targetColIndex = apiRef.current.getColumnIndex(params.field, false);
+      const targetColVisibleIndex = apiRef.current.getColumnIndex(params.field, true);
+      const targetCol = apiRef.current.getColumn(params.field);
+      const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
+      const visibleColumns = apiRef.current.getVisibleColumns();
+      const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
+
+      if (hasMovedLeft || hasMovedRight) {
+        let canBeReordered;
+
+        if (!targetCol.disableReorder) {
+          canBeReordered = true;
+        } else if (hasMovedLeft) {
+          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+        } else {
+          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+        }
+
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+          targetIndex: targetColVisibleIndex
+        });
+
+        if (canBeReorderedProcessed) {
+          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+        }
+      }
+
+      cursorPosition.current = coordinates;
+    }
+  }, [apiRef, logger]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    const dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (props.disableColumnReorder || !dragColField) {
+      return;
+    }
+
+    logger.debug('End dragging col');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragColNode.current = null; // Check if the column was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
+      originColumnIndex.current = null;
+    }
+
+    apiRef.current.setState(state => _extends({}, state, {
+      columnReorder: _extends({}, state.columnReorder, {
+        dragCol: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [props.disableColumnReorder, logger, apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,3 @@
+import { createSelector } from '@mui/x-data-grid/internals';
+export const gridColumnResizeSelector = state => state.columnResize;
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

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

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

package/hooks/features/columnResize/columnResizeState.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';

package/hooks/features/columnResize/index.js

@@ -0,0 +1,2 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const columnResizeStateInitializer: GridStateInitializer;
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onColumnResize' | 'onColumnWidthChange'>) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -0,0 +1,305 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+// 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, separatorSide) {
+  let newWidth = initialOffsetToSeparator;
+
+  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+    newWidth += clickX - columnBounds.left;
+  } else {
+    newWidth += columnBounds.right - clickX;
+  }
+
+  return newWidth;
+}
+
+function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
+  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+    return clickX - columnBounds.left;
+  }
+
+  return columnBounds.right - clickX;
+}
+
+function getSeparatorSide(element) {
+  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+}
+
+export const columnResizeStateInitializer = state => _extends({}, state, {
+  columnResize: {
+    resizingColumnField: ''
+  }
+});
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+
+export const useGridColumnResize = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridColumnResize');
+  const colDefRef = React.useRef();
+  const colElementRef = React.useRef();
+  const colCellElementsRef = 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 separatorSide = React.useRef();
+  const stopResizeEventTimeout = React.useRef();
+  const touchId = React.useRef();
+
+  const updateWidth = newWidth => {
+    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    colDefRef.current.computedWidth = newWidth;
+    colDefRef.current.width = newWidth;
+    colDefRef.current.flex = undefined;
+    colElementRef.current.style.width = `${newWidth}px`;
+    colElementRef.current.style.minWidth = `${newWidth}px`;
+    colElementRef.current.style.maxWidth = `${newWidth}px`;
+    colCellElementsRef.current.forEach(element => {
+      const div = element;
+      div.style.width = `${newWidth}px`;
+      div.style.minWidth = `${newWidth}px`;
+      div.style.maxWidth = `${newWidth}px`;
+    });
+  };
+
+  const handleResizeMouseUp = useEventCallback(nativeEvent => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+
+      if (colDefRef.current) {
+        var _colDefRef$current;
+
+        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+          element: colElementRef.current,
+          colDef: colDefRef.current,
+          width: (_colDefRef$current = colDefRef.current) == null ? void 0 : _colDefRef$current.computedWidth
+        }, nativeEvent);
+      }
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  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, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleColumnResizeMouseDown = useEventCallback(({
+    colDef
+  }, event) => {
+    var _apiRef$current$colum;
+
+    // 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(GridEvents.columnResizeStart, {
+      field: colDef.field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    doc.body.style.cursor = 'col-resize';
+    separatorSide.current = getSeparatorSide(event.currentTarget);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    doc.addEventListener('mousemove', handleResizeMouseMove);
+    doc.addEventListener('mouseup', handleResizeMouseUp);
+  });
+  const handleTouchEnd = useEventCallback(nativeEvent => {
+    const finger = trackFinger(nativeEvent, touchId.current);
+
+    if (!finger) {
+      return;
+    } // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+
+    stopListening();
+    apiRef.current.updateColumn(colDefRef.current);
+    clearTimeout(stopResizeEventTimeout.current);
+    stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+    });
+    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+  });
+  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, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    updateWidth(newWidth);
+    const params = {
+      element: colElementRef.current,
+      colDef: colDefRef.current,
+      width: newWidth
+    };
+    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+  });
+  const handleTouchStart = useEventCallback(event => {
+    var _apiRef$current$colum2;
+
+    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;
+    }
+
+    colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
+    const field = getFieldFromHeaderElem(colElementRef.current);
+    const colDef = apiRef.current.getColumn(field);
+    logger.debug(`Start Resize on col ${colDef.field}`);
+    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+      field
+    }, event);
+    colDefRef.current = colDef;
+    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    separatorSide.current = getSeparatorSide(event.target);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    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);
+  }, [apiRef, 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]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(stopResizeEventTimeout.current);
+      stopListening();
+    };
+  }, [apiRef, handleTouchStart, stopListening]);
+  useGridNativeEventListener(apiRef, () => {
+    var _apiRef$current$colum3;
+
+    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+  }, 'touchstart', handleTouchStart, {
+    passive: doesSupportTouchActionNone()
+  });
+  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
+  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
+  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+};

package/hooks/features/detailPanel/gridDetailPanelInterface.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { GridRowId } from '@mui/x-data-grid';
+/**
+ * The master/detail API interface that is available in the grid [[apiRef]].
+ */
+export interface GridDetailPanelApi {
+    /**
+     * Expands or collapses the detail panel of a row.
+     * @param {string} id The row id to toggle the panel.
+     */
+    toggleDetailPanel: (id: GridRowId) => void;
+    /**
+     * Returns the rows whose detail panel is open.
+     * @returns {GridRowId[]} An array of row ids.
+     */
+    getExpandedDetailPanels: () => GridRowId[];
+    /**
+     * Changes which rows to expand the detail panel.
+     * @param {GridRowId[]} ids The ids of the rows to open the detail panel.
+     */
+    setExpandedDetailPanels: (ids: GridRowId[]) => void;
+}
+export interface GridDetailPanelState {
+    expandedRowIds: GridRowId[];
+    contentCache: Record<GridRowId, React.ReactNode>;
+    heightCache: Record<GridRowId, number>;
+}
+export declare type GridDetailPanelInitialState = Pick<GridDetailPanelState, 'expandedRowIds'>;

package/hooks/features/detailPanel/gridDetailPanelInterface.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/detailPanel/gridDetailPanelSelector.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GridStatePro } from '../../../models/gridStatePro';
+export declare const gridDetailPanelExpandedRowIdsSelector: (state: GridStatePro) => import("@mui/x-data-grid").GridRowId[];
+export declare const gridDetailPanelExpandedRowsContentCacheSelector: (state: GridStatePro) => Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>;
+export declare const gridDetailPanelExpandedRowsHeightCacheSelector: (state: GridStatePro) => Record<import("@mui/x-data-grid").GridRowId, number>;

package/hooks/features/detailPanel/gridDetailPanelSelector.js

@@ -0,0 +1,3 @@
+export const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
+export const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPanel.contentCache;
+export const gridDetailPanelExpandedRowsHeightCacheSelector = state => state.detailPanel.heightCache;

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.d.ts

@@ -0,0 +1,3 @@
+import { GridColDef } from '@mui/x-data-grid';
+export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";
+export declare const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef;

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  headerName: '',
+  type: 'detailPanelToggle',
+  editable: false,
+  sortable: false,
+  filterable: false,
+  resizable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  disableExport: true,
+  align: 'left',
+  width: 40,
+  valueGetter: params => {
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(params.api.state);
+    return expandedRowIds.includes(params.id);
+  },
+  renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params))
+});

package/hooks/features/detailPanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './gridDetailPanelToggleColDef';
+export * from './gridDetailPanelSelector';
+export * from './gridDetailPanelInterface';

package/hooks/features/detailPanel/index.js

@@ -0,0 +1,3 @@
+export * from './gridDetailPanelToggleColDef';
+export * from './gridDetailPanelSelector';
+export * from './gridDetailPanelInterface';

package/hooks/features/detailPanel/useGridDetailPanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const detailPanelStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>>;
+export declare const useGridDetailPanel: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'initialState' | 'getDetailPanelContent' | 'getDetailPanelHeight' | 'detailPanelExpandedRowIds' | 'onDetailPanelExpandedRowIdsChange' | 'pagination' | 'paginationMode'>) => void;