@mui/x-data-grid 5.5.1 → 5.7.0

package/modern/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -0,0 +1,112 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+export const GRID_DEFAULT_STRATEGY = 'none';
+export const GRID_STRATEGIES_PROCESSORS = {
+  rowTreeCreation: 'rowTree',
+  filtering: 'rowTree',
+  sorting: 'rowTree'
+};
+
+/**
+ * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
+ *
+ * Some plugins contain custom logic that must only be run if the right strategy is active.
+ * For instance, the tree data plugin has:
+ * - custom row tree creation algorithm.
+ * - custom sorting algorithm.
+ * - custom filtering algorithm.
+ *
+ * These plugins must use:
+ * - `apiRef.current.unstable_registerStrategyProcessor` to register their processors.
+ * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
+ *
+ * Some hooks need to run the custom logic of the active strategy.
+ * For instance, the `useGridFiltering` wants to run:
+ * - the tree data filtering if the tree data is the current way of grouping rows.
+ * - the row grouping filtering if the row grouping is the current way of grouping rows.
+ * - the flat filtering if there is no grouping of the rows (equivalent to the "none" strategy).
+ *
+ * These hooks must use:
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run a processor.
+ * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ *    Warning: Be careful not to apply the processor several times.
+ *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    So listening to both would most likely run your logic twice.
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes
+ *
+ * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ */
+export const useGridStrategyProcessing = apiRef => {
+  const availableStrategies = React.useRef(new Map());
+  const strategiesCache = React.useRef({});
+  const registerStrategyProcessor = React.useCallback((strategyName, processorName, processor) => {
+    const cleanup = () => {
+      const _ref = strategiesCache.current[processorName],
+            otherProcessors = _objectWithoutPropertiesLoose(_ref, [strategyName].map(_toPropertyKey));
+
+      strategiesCache.current[processorName] = otherProcessors;
+    };
+
+    if (!strategiesCache.current[processorName]) {
+      strategiesCache.current[processorName] = {};
+    }
+
+    const groupPreProcessors = strategiesCache.current[processorName];
+    const previousProcessor = groupPreProcessors[strategyName];
+    groupPreProcessors[strategyName] = processor;
+
+    if (!previousProcessor || previousProcessor === processor) {
+      return cleanup;
+    }
+
+    if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
+      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+    }
+
+    return cleanup;
+  }, [apiRef]);
+  const applyStrategyProcessor = React.useCallback((processorName, params) => {
+    const activeStrategy = apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName]);
+
+    if (activeStrategy == null) {
+      throw new Error("Can't apply a strategy processor before defining an active strategy");
+    }
+
+    const groupCache = strategiesCache.current[processorName];
+
+    if (!groupCache || !groupCache[activeStrategy]) {
+      throw new Error(`No processor found for processor "${processorName}" on strategy "${activeStrategy}"`);
+    }
+
+    const processor = groupCache[activeStrategy];
+    return processor(params);
+  }, [apiRef]);
+  const getActiveStrategy = React.useCallback(strategyGroup => {
+    const strategyEntries = Array.from(availableStrategies.current.entries());
+    const availableStrategyEntry = strategyEntries.find(([, strategy]) => {
+      if (strategy.group !== strategyGroup) {
+        return false;
+      }
+
+      return strategy.isAvailable();
+    });
+    return availableStrategyEntry?.[0] ?? GRID_DEFAULT_STRATEGY;
+  }, []);
+  const setStrategyAvailability = React.useCallback((strategyGroup, strategyName, isAvailable) => {
+    availableStrategies.current.set(strategyName, {
+      group: strategyGroup,
+      isAvailable
+    });
+    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  const strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  useGridApiMethod(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};

package/modern/hooks/core/useGridApiInitialization.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { GridEvents } from '../../models/events';
+import { useGridApiMethod } from '../utils/useGridApiMethod';
+import { GridSignature } from '../utils/useGridApiEventHandler';
+import { EventManager } from '../../utils/EventManager';
+
+const isSyntheticEvent = event => {
+  return event.isPropagationStopped !== undefined;
+};
+
+let globalId = 0;
+export function useGridApiInitialization(inputApiRef, props) {
+  const apiRef = React.useRef();
+
+  if (!apiRef.current) {
+    apiRef.current = {
+      unstable_eventManager: new EventManager(),
+      state: {},
+      instanceId: globalId
+    };
+    globalId += 1;
+  }
+
+  React.useImperativeHandle(inputApiRef, () => apiRef.current, [apiRef]);
+  const publishEvent = React.useCallback((...args) => {
+    const [name, params, event = {}] = args;
+    event.defaultMuiPrevented = false;
+
+    if (isSyntheticEvent(event) && event.isPropagationStopped()) {
+      return;
+    }
+
+    const details = props.signature === GridSignature.DataGridPro ? {
+      api: apiRef.current
+    } : {};
+    apiRef.current.unstable_eventManager.emit(name, params, event, details);
+  }, [apiRef, props.signature]);
+  const subscribeEvent = React.useCallback((event, handler, options) => {
+    apiRef.current.unstable_eventManager.on(event, handler, options);
+    const api = apiRef.current;
+    return () => {
+      api.unstable_eventManager.removeListener(event, handler);
+    };
+  }, [apiRef]);
+  const showError = React.useCallback(args => {
+    apiRef.current.publishEvent(GridEvents.componentError, args);
+  }, [apiRef]);
+  useGridApiMethod(apiRef, {
+    subscribeEvent,
+    publishEvent,
+    showError
+  }, 'GridCoreApi');
+  React.useEffect(() => {
+    const api = apiRef.current;
+    return () => {
+      api.publishEvent(GridEvents.unmount);
+    };
+  }, [apiRef]);
+  return apiRef;
+}

package/modern/hooks/core/useGridErrorHandler.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../models/events';
+import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
+export function useGridErrorHandler(apiRef, props) {
+  const handleError = React.useCallback(args => {
+    // We are handling error here, to set up the handler as early as possible and be able to catch error thrown at init time.
+    apiRef.current.setState(state => _extends({}, state, {
+      error: args
+    }));
+  }, [apiRef]);
+  React.useEffect(() => {
+    handleError(props.error);
+  }, [handleError, props.error]);
+  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+}

package/modern/hooks/core/useGridInitialization.js

@@ -0,0 +1,21 @@
+import { useGridLoggerFactory } from './useGridLoggerFactory';
+import { useGridApiInitialization } from './useGridApiInitialization';
+import { useGridErrorHandler } from './useGridErrorHandler';
+import { useGridLocaleText } from './useGridLocaleText';
+import { useGridPreProcessing } from './preProcessing';
+import { useGridStrategyProcessing } from './strategyProcessing';
+import { useGridStateInitialization } from './useGridStateInitialization';
+/**
+ * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
+ */
+
+export const useGridInitialization = (inputApiRef, props) => {
+  const apiRef = useGridApiInitialization(inputApiRef, props);
+  useGridLoggerFactory(apiRef, props);
+  useGridErrorHandler(apiRef, props);
+  useGridStateInitialization(apiRef, props);
+  useGridPreProcessing(apiRef);
+  useGridStrategyProcessing(apiRef);
+  useGridLocaleText(apiRef, props);
+  return apiRef;
+};

package/modern/hooks/core/useGridLocaleText.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useGridApiMethod } from '../utils/useGridApiMethod';
+export const useGridLocaleText = (apiRef, props) => {
+  const getLocaleText = React.useCallback(key => {
+    if (props.localeText[key] == null) {
+      throw new Error(`Missing translation for key ${key}.`);
+    }
+
+    return props.localeText[key];
+  }, [props.localeText]);
+  const localeTextApi = {
+    getLocaleText
+  };
+  useGridApiMethod(apiRef, localeTextApi, 'LocaleTextApi');
+};

package/modern/hooks/core/useGridLoggerFactory.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { localStorageAvailable } from '../../utils/utils';
+const forceDebug = localStorageAvailable() && window.localStorage.getItem('DEBUG') != null;
+
+const noop = () => {};
+
+const noopLogger = {
+  debug: noop,
+  info: noop,
+  warn: noop,
+  error: noop
+};
+const LOG_LEVELS = ['debug', 'info', 'warn', 'error'];
+
+function getAppender(name, logLevel, appender = console) {
+  const minLogLevelIdx = LOG_LEVELS.indexOf(logLevel);
+
+  if (minLogLevelIdx === -1) {
+    throw new Error(`MUI: Log level ${logLevel} not recognized.`);
+  }
+
+  const logger = LOG_LEVELS.reduce((loggerObj, method, idx) => {
+    if (idx >= minLogLevelIdx) {
+      loggerObj[method] = (...args) => {
+        const [message, ...other] = args;
+        appender[method](`MUI: ${name} - ${message}`, ...other);
+      };
+    } else {
+      loggerObj[method] = noop;
+    }
+
+    return loggerObj;
+  }, {});
+  return logger;
+}
+
+export const useGridLoggerFactory = (apiRef, props) => {
+  apiRef.current.getLogger = React.useCallback(name => {
+    if (forceDebug) {
+      return getAppender(name, 'debug', props.logger);
+    }
+
+    if (!props.logLevel) {
+      return noopLogger;
+    }
+
+    return getAppender(name, props.logLevel.toString(), props.logger);
+  }, [props.logLevel, props.logger]);
+};

package/modern/hooks/core/useGridStateInitialization.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["stateId"];
+import * as React from 'react';
+import { GridSignature } from '../utils/useGridApiEventHandler';
+import { GridEvents } from '../../models/events';
+import { useGridApiMethod } from '../utils';
+import { isFunction } from '../../utils/utils';
+export const useGridStateInitialization = (apiRef, props) => {
+  const controlStateMapRef = React.useRef({});
+  const [, rawForceUpdate] = React.useState();
+  const updateControlState = React.useCallback(controlStateItem => {
+    const {
+      stateId
+    } = controlStateItem,
+          others = _objectWithoutPropertiesLoose(controlStateItem, _excluded);
+
+    controlStateMapRef.current[stateId] = _extends({}, others, {
+      stateId
+    });
+  }, []);
+  const setState = React.useCallback(state => {
+    let newState;
+
+    if (isFunction(state)) {
+      newState = state(apiRef.current.state);
+    } else {
+      newState = state;
+    }
+
+    if (apiRef.current.state === newState) {
+      return false;
+    }
+
+    let ignoreSetState = false; // Apply the control state constraints
+
+    const updatedControlStateIds = [];
+    Object.keys(controlStateMapRef.current).forEach(stateId => {
+      const controlState = controlStateMapRef.current[stateId];
+      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+
+      if (newSubState === oldSubState) {
+        return;
+      }
+
+      updatedControlStateIds.push({
+        stateId: controlState.stateId,
+        hasPropChanged: newSubState !== controlState.propModel
+      }); // The state is controlled, the prop should always win
+
+      if (controlState.propModel !== undefined && newSubState !== controlState.propModel) {
+        ignoreSetState = true;
+      }
+    });
+
+    if (updatedControlStateIds.length > 1) {
+      // Each hook modify its own state, and it should not leak
+      // Events are here to forward to other hooks and apply changes.
+      // You are trying to update several states in a no isolated way.
+      throw new Error(`You're not allowed to update several sub-state in one transaction. You already updated ${updatedControlStateIds[0].stateId}, therefore, you're not allowed to update ${updatedControlStateIds.map(el => el.stateId).join(', ')} in the same transaction.`);
+    }
+
+    if (!ignoreSetState) {
+      // We always assign it as we mutate rows for perf reason.
+      apiRef.current.state = newState;
+
+      if (apiRef.current.publishEvent) {
+        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+      }
+    }
+
+    if (updatedControlStateIds.length === 1) {
+      const {
+        stateId,
+        hasPropChanged
+      } = updatedControlStateIds[0];
+      const controlState = controlStateMapRef.current[stateId];
+      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+
+      if (controlState.propOnChange && hasPropChanged) {
+        const details = props.signature === GridSignature.DataGridPro ? {
+          api: apiRef.current
+        } : {};
+        controlState.propOnChange(model, details);
+      }
+
+      if (!ignoreSetState) {
+        apiRef.current.publishEvent(controlState.changeEvent, model);
+      }
+    }
+
+    return !ignoreSetState;
+  }, [apiRef, props.signature]);
+  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const stateApi = {
+    setState,
+    forceUpdate,
+    unstable_updateControlState: updateControlState
+  };
+  useGridApiMethod(apiRef, stateApi, 'GridStateApi');
+};

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+
+function writeToClipboardPolyfill(data) {
+  const span = document.createElement('span');
+  span.style.whiteSpace = 'pre';
+  span.style.userSelect = 'all';
+  span.style.opacity = '0px';
+  span.textContent = data;
+  document.body.appendChild(span);
+  const range = document.createRange();
+  range.selectNode(span);
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.body.removeChild(span);
+  }
+}
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+
+
+export const useGridClipboard = apiRef => {
+  const copySelectedRowsToClipboard = React.useCallback((includeHeaders = false) => {
+    if (apiRef.current.getSelectedRows().size === 0) {
+      return;
+    }
+
+    const data = apiRef.current.getDataAsCsv({
+      includeHeaders,
+      delimiter: '\t'
+    });
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(data).catch(() => {
+        writeToClipboardPolyfill(data);
+      });
+    } else {
+      writeToClipboardPolyfill(data);
+    }
+  }, [apiRef]);
+  const handleKeydown = React.useCallback(event => {
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
+    // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
+    // be wrong with a Dvorak keyboard (as if pressing J).
+
+    if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) {
+      return;
+    } // Do nothing if there's a native selection
+
+
+    if (window.getSelection()?.toString() !== '') {
+      return;
+    }
+
+    apiRef.current.unstable_copySelectedRowsToClipboard(event.altKey);
+  }, [apiRef]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
+  const clipboardApi = {
+    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
+  };
+  useGridApiMethod(apiRef, clipboardApi, 'GridClipboardApi');
+};

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector } from '../focus/gridFocusStateSelector';
+import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
+import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events';
+import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridColumnHeaders = props => {
+  const {
+    innerRef: innerRefProp,
+    minColumnIndex = 0
+  } = props;
+  const [dragCol, setDragCol] = React.useState('');
+  const [resizeCol, setResizeCol] = React.useState('');
+  const apiRef = useGridApiContext();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const rootProps = useGridRootProps();
+  const innerRef = React.useRef(null);
+  const handleInnerRef = useForkRef(innerRefProp, innerRef);
+  const [renderContext, setRenderContext] = React.useState(null);
+  const prevRenderContext = React.useRef(renderContext);
+  const prevScrollLeft = React.useRef(0);
+  React.useEffect(() => {
+    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+  }, [apiRef]);
+  const updateInnerPosition = React.useCallback(nextRenderContext => {
+    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
+    innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  const handleScroll = React.useCallback(({
+    left,
+    renderContext: nextRenderContext = null
+  }) => {
+    if (!innerRef.current) {
+      return;
+    } // Ignore vertical scroll.
+    // Excepts the first event which sets the previous render context.
+
+
+    if (prevScrollLeft.current === left && prevRenderContext.current?.firstColumnIndex === nextRenderContext?.firstColumnIndex && prevRenderContext.current?.lastColumnIndex === nextRenderContext?.lastColumnIndex) {
+      return;
+    }
+
+    prevScrollLeft.current = left;
+
+    if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
+      setRenderContext(nextRenderContext);
+      prevRenderContext.current = nextRenderContext;
+    } // Pass directly the render context to avoid waiting for the next render
+
+
+    if (nextRenderContext) {
+      updateInnerPosition(nextRenderContext);
+    }
+  }, [updateInnerPosition]);
+  const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
+  const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
+  const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
+  const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+
+  const getColumns = (params, other = {}) => {
+    const {
+      renderContext: nextRenderContext = renderContext,
+      minFirstColumn = minColumnIndex,
+      maxLastColumn = visibleColumns.length
+    } = params || {};
+
+    if (!nextRenderContext) {
+      return null;
+    }
+
+    const columns = [];
+    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const column = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const isFirstColumn = columnIndex === 0;
+      const hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
+      const tabIndex = tabIndexState !== null && tabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
+      const open = columnMenuState.open && columnMenuState.field === column.field;
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[column.field], {
+        columnMenuOpen: open,
+        filterItemsCounter: filterColumnLookup[column.field] && filterColumnLookup[column.field].length,
+        headerHeight: headerHeight,
+        isDragging: column.field === dragCol,
+        column: column,
+        colIndex: columnIndex,
+        isResizing: resizeCol === column.field,
+        isLastColumn: columnIndex === columns.length - 1,
+        extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex
+      }, other), i));
+    }
+
+    return columns;
+  };
+
+  const rootStyle = {
+    minHeight: headerHeight,
+    maxHeight: headerHeight,
+    lineHeight: `${headerHeight}px`
+  };
+  return {
+    renderContext,
+    getColumns,
+    isDragging: !!dragCol,
+    updateInnerPosition,
+    getRootProps: (other = {}) => _extends({
+      style: rootStyle
+    }, other),
+    getInnerProps: () => ({
+      ref: handleInnerRef,
+      'aria-rowindex': 1,
+      role: 'row'
+    })
+  };
+};

package/modern/hooks/features/columnMenu/columnMenuSelector.js

@@ -0,0 +1 @@
+export const gridColumnMenuSelector = state => state.columnMenu;

package/modern/hooks/features/columnMenu/columnMenuState.js

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

package/modern/hooks/features/columnMenu/index.js

@@ -0,0 +1,2 @@
+export * from './columnMenuState';
+export * from './columnMenuSelector';