@mui/x-data-grid 5.5.1 → 5.7.0

package/node/hooks/core/useGridStateInitialization.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridStateInitialization = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
+
+var _events = require("../../models/events");
+
+var _utils = require("../utils");
+
+var _utils2 = require("../../utils/utils");
+
+const _excluded = ["stateId"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridStateInitialization = (apiRef, props) => {
+  const controlStateMapRef = React.useRef({});
+  const [, rawForceUpdate] = React.useState();
+  const updateControlState = React.useCallback(controlStateItem => {
+    const {
+      stateId
+    } = controlStateItem,
+          others = (0, _objectWithoutPropertiesLoose2.default)(controlStateItem, _excluded);
+    controlStateMapRef.current[stateId] = (0, _extends2.default)({}, others, {
+      stateId
+    });
+  }, []);
+  const setState = React.useCallback(state => {
+    let newState;
+
+    if ((0, _utils2.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(_events.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 === _useGridApiEventHandler.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
+  };
+  (0, _utils.useGridApiMethod)(apiRef, stateApi, 'GridStateApi');
+};
+
+exports.useGridStateInitialization = useGridStateInitialization;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridClipboard = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("../../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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)
+ */
+
+
+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 => {
+    var _window$getSelection;
+
+    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 = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+      return;
+    }
+
+    apiRef.current.unstable_copySelectedRowsToClipboard(event.altKey);
+  }, [apiRef]);
+  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
+  const clipboardApi = {
+    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
+  };
+  (0, _utils.useGridApiMethod)(apiRef, clipboardApi, 'GridClipboardApi');
+};
+
+exports.useGridClipboard = useGridClipboard;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnHeaders = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("@mui/material/utils");
+
+var _useGridApiContext = require("../../utils/useGridApiContext");
+
+var _useGridSelector = require("../../utils/useGridSelector");
+
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+
+var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+
+var _densitySelector = require("../density/densitySelector");
+
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+
+var _gridSortingSelector = require("../sorting/gridSortingSelector");
+
+var _columnMenuSelector = require("../columnMenu/columnMenuSelector");
+
+var _useGridRootProps = require("../../utils/useGridRootProps");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _events = require("../../../models/events");
+
+var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridColumnHeaders = props => {
+  const {
+    innerRef: innerRefProp,
+    minColumnIndex = 0
+  } = props;
+  const [dragCol, setDragCol] = React.useState('');
+  const [resizeCol, setResizeCol] = React.useState('');
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
+  const tabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
+  const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
+  const headerHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderHeightSelector);
+  const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
+  const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const innerRef = React.useRef(null);
+  const handleInnerRef = (0, _utils.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
+  }) => {
+    var _prevRenderContext$cu, _prevRenderContext$cu2;
+
+    if (!innerRef.current) {
+      return;
+    } // Ignore vertical scroll.
+    // Excepts the first event which sets the previous render context.
+
+
+    if (prevScrollLeft.current === left && ((_prevRenderContext$cu = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu.firstColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.firstColumnIndex) && ((_prevRenderContext$cu2 = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu2.lastColumnIndex) === (nextRenderContext == null ? void 0 : 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(''), []);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnResizeStart, handleColumnResizeStart);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnResizeStop, handleColumnResizeStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderDragStart, handleColumnReorderStart);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.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__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, 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 = {}) => (0, _extends2.default)({
+      style: rootStyle
+    }, other),
+    getInnerProps: () => ({
+      ref: handleInnerRef,
+      'aria-rowindex': 1,
+      role: 'row'
+    })
+  };
+};
+
+exports.useGridColumnHeaders = useGridColumnHeaders;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridColumnMenuSelector = void 0;
+
+const gridColumnMenuSelector = state => state.columnMenu;
+
+exports.gridColumnMenuSelector = gridColumnMenuSelector;

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _columnMenuState = require("./columnMenuState");
+
+Object.keys(_columnMenuState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnMenuState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnMenuState[key];
+    }
+  });
+});
+
+var _columnMenuSelector = require("./columnMenuSelector");
+
+Object.keys(_columnMenuSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnMenuSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnMenuSelector[key];
+    }
+  });
+});

package/node/hooks/features/columnMenu/useGridColumnMenu.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnMenu = exports.columnMenuStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _events = require("../../../models/events");
+
+var _utils = require("../../utils");
+
+var _columnMenuSelector = require("./columnMenuSelector");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const columnMenuStateInitializer = state => (0, _extends2.default)({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+
+
+exports.columnMenuStateInitializer = columnMenuStateInitializer;
+
+const useGridColumnMenu = apiRef => {
+  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridColumnMenu');
+  /**
+   * API METHODS
+   */
+
+  const showColumnMenu = React.useCallback(field => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (state.columnMenu.open && state.columnMenu.field === field) {
+        return state;
+      }
+
+      logger.debug('Opening Column Menu');
+      return (0, _extends2.default)({}, state, {
+        columnMenu: {
+          open: true,
+          field
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.hidePreferences();
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const hideColumnMenu = React.useCallback(() => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
+        return state;
+      }
+
+      logger.debug('Hiding Column Menu');
+      return (0, _extends2.default)({}, state, {
+        columnMenu: (0, _extends2.default)({}, state.columnMenu, {
+          open: false,
+          field: undefined
+        })
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const toggleColumnMenu = React.useCallback(field => {
+    logger.debug('Toggle Column Menu');
+    const columnMenu = (0, _columnMenuSelector.gridColumnMenuSelector)(apiRef.current.state);
+
+    if (!columnMenu.open || columnMenu.field !== field) {
+      showColumnMenu(field);
+    } else {
+      hideColumnMenu();
+    }
+  }, [apiRef, logger, showColumnMenu, hideColumnMenu]);
+  const columnMenuApi = {
+    showColumnMenu,
+    hideColumnMenu,
+    toggleColumnMenu
+  };
+  (0, _utils.useGridApiMethod)(apiRef, columnMenuApi, 'GridColumnMenuApi');
+  /**
+   * EVENTS
+   */
+
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.columnResizeStart, hideColumnMenu);
+  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsScroll, hideColumnMenu);
+};
+
+exports.useGridColumnMenu = useGridColumnMenu;

package/node/hooks/features/columns/gridColumnsInterfaces.js

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