@mui/x-data-grid 5.4.0 → 5.6.0

package/legacy/hooks/core/useGridLoggerFactory.js

@@ -0,0 +1,59 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from 'react';
+import { localStorageAvailable } from '../../utils/utils';
+var forceDebug = localStorageAvailable() && window.localStorage.getItem('DEBUG') != null;
+
+var noop = function noop() {};
+
+var noopLogger = {
+  debug: noop,
+  info: noop,
+  warn: noop,
+  error: noop
+};
+var LOG_LEVELS = ['debug', 'info', 'warn', 'error'];
+
+function getAppender(name, logLevel) {
+  var appender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : console;
+  var minLogLevelIdx = LOG_LEVELS.indexOf(logLevel);
+
+  if (minLogLevelIdx === -1) {
+    throw new Error("MUI: Log level ".concat(logLevel, " not recognized."));
+  }
+
+  var logger = LOG_LEVELS.reduce(function (loggerObj, method, idx) {
+    if (idx >= minLogLevelIdx) {
+      loggerObj[method] = function () {
+        var _ref;
+
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        var message = args[0],
+            other = args.slice(1);
+
+        (_ref = appender)[method].apply(_ref, ["MUI: ".concat(name, " - ").concat(message)].concat(_toConsumableArray(other)));
+      };
+    } else {
+      loggerObj[method] = noop;
+    }
+
+    return loggerObj;
+  }, {});
+  return logger;
+}
+
+export var useGridLoggerFactory = function useGridLoggerFactory(apiRef, props) {
+  apiRef.current.getLogger = React.useCallback(function (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/legacy/hooks/core/useGridStateInitialization.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _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 var useGridStateInitialization = function useGridStateInitialization(apiRef, props) {
+  var controlStateMapRef = React.useRef({});
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rawForceUpdate = _React$useState2[1];
+
+  var updateControlState = React.useCallback(function (controlStateItem) {
+    var stateId = controlStateItem.stateId,
+        others = _objectWithoutProperties(controlStateItem, _excluded);
+
+    controlStateMapRef.current[stateId] = _extends({}, others, {
+      stateId: stateId
+    });
+  }, []);
+  var setState = React.useCallback(function (state) {
+    var newState;
+
+    if (isFunction(state)) {
+      newState = state(apiRef.current.state);
+    } else {
+      newState = state;
+    }
+
+    if (apiRef.current.state === newState) {
+      return false;
+    }
+
+    var ignoreSetState = false; // Apply the control state constraints
+
+    var updatedControlStateIds = [];
+    Object.keys(controlStateMapRef.current).forEach(function (stateId) {
+      var controlState = controlStateMapRef.current[stateId];
+      var oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
+      var 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 ".concat(updatedControlStateIds[0].stateId, ", therefore, you're not allowed to update ").concat(updatedControlStateIds.map(function (el) {
+        return 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) {
+      var _updatedControlStateI = updatedControlStateIds[0],
+          stateId = _updatedControlStateI.stateId,
+          hasPropChanged = _updatedControlStateI.hasPropChanged;
+      var controlState = controlStateMapRef.current[stateId];
+      var model = controlState.stateSelector(newState, apiRef.current.instanceId);
+
+      if (controlState.propOnChange && hasPropChanged) {
+        var 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]);
+  var forceUpdate = React.useCallback(function () {
+    return rawForceUpdate(function () {
+      return apiRef.current.state;
+    });
+  }, [apiRef]);
+  var stateApi = {
+    setState: setState,
+    forceUpdate: forceUpdate,
+    unstable_updateControlState: updateControlState
+  };
+  useGridApiMethod(apiRef, stateApi, 'GridStateApi');
+};

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+
+function writeToClipboardPolyfill(data) {
+  var span = document.createElement('span');
+  span.style.whiteSpace = 'pre';
+  span.style.userSelect = 'all';
+  span.style.opacity = '0px';
+  span.textContent = data;
+  document.body.appendChild(span);
+  var range = document.createRange();
+  range.selectNode(span);
+  var selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.body.removeChild(span);
+  }
+}
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+
+
+export var useGridClipboard = function useGridClipboard(apiRef) {
+  var copySelectedRowsToClipboard = React.useCallback(function () {
+    var includeHeaders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+    if (apiRef.current.getSelectedRows().size === 0) {
+      return;
+    }
+
+    var data = apiRef.current.getDataAsCsv({
+      includeHeaders: includeHeaders,
+      delimiter: '\t'
+    });
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(data).catch(function () {
+        writeToClipboardPolyfill(data);
+      });
+    } else {
+      writeToClipboardPolyfill(data);
+    }
+  }, [apiRef]);
+  var handleKeydown = React.useCallback(function (event) {
+    var _window$getSelection;
+
+    var 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]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
+  var clipboardApi = {
+    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
+  };
+  useGridApiMethod(apiRef, clipboardApi, 'GridClipboardApi');
+};

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

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 var useGridColumnHeaders = function useGridColumnHeaders(props) {
+  var innerRefProp = props.innerRef,
+      _props$minColumnIndex = props.minColumnIndex,
+      minColumnIndex = _props$minColumnIndex === void 0 ? 0 : _props$minColumnIndex;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dragCol = _React$useState2[0],
+      setDragCol = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      resizeCol = _React$useState4[0],
+      setResizeCol = _React$useState4[1];
+
+  var apiRef = useGridApiContext();
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  var tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  var rootProps = useGridRootProps();
+  var innerRef = React.useRef(null);
+  var handleInnerRef = useForkRef(innerRefProp, innerRef);
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      renderContext = _React$useState6[0],
+      setRenderContext = _React$useState6[1];
+
+  var prevRenderContext = React.useRef(renderContext);
+  var prevScrollLeft = React.useRef(0);
+  React.useEffect(function () {
+    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+  }, [apiRef]);
+  var updateInnerPosition = React.useCallback(function (nextRenderContext) {
+    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    var offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
+    innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  var handleScroll = React.useCallback(function (_ref) {
+    var _prevRenderContext$cu, _prevRenderContext$cu2;
+
+    var left = _ref.left,
+        _ref$renderContext = _ref.renderContext,
+        nextRenderContext = _ref$renderContext === void 0 ? null : _ref$renderContext;
+
+    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]);
+  var handleColumnResizeStart = React.useCallback(function (params) {
+    return setResizeCol(params.field);
+  }, []);
+  var handleColumnResizeStop = React.useCallback(function () {
+    return setResizeCol('');
+  }, []);
+  var handleColumnReorderStart = React.useCallback(function (params) {
+    return setDragCol(params.field);
+  }, []);
+  var handleColumnReorderStop = React.useCallback(function () {
+    return 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);
+
+  var getColumns = function getColumns(params) {
+    var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    var _ref2 = params || {},
+        _ref2$renderContext = _ref2.renderContext,
+        nextRenderContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
+        _ref2$minFirstColumn = _ref2.minFirstColumn,
+        minFirstColumn = _ref2$minFirstColumn === void 0 ? minColumnIndex : _ref2$minFirstColumn,
+        _ref2$maxLastColumn = _ref2.maxLastColumn,
+        maxLastColumn = _ref2$maxLastColumn === void 0 ? visibleColumns.length : _ref2$maxLastColumn;
+
+    if (!nextRenderContext) {
+      return null;
+    }
+
+    var columns = [];
+    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+
+    for (var i = 0; i < renderedColumns.length; i += 1) {
+      var column = renderedColumns[i];
+      var columnIndex = firstColumnToRender + i;
+      var isFirstColumn = columnIndex === 0;
+      var hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
+      var tabIndex = tabIndexState !== null && tabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      var hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
+      var 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;
+  };
+
+  var rootStyle = {
+    minHeight: headerHeight,
+    maxHeight: headerHeight,
+    lineHeight: "".concat(headerHeight, "px")
+  };
+  return {
+    renderContext: renderContext,
+    getColumns: getColumns,
+    isDragging: !!dragCol,
+    updateInnerPosition: updateInnerPosition,
+    getRootProps: function getRootProps() {
+      var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return _extends({
+        style: rootStyle
+      }, other);
+    },
+    getInnerProps: function getInnerProps() {
+      return {
+        ref: handleInnerRef,
+        'aria-rowindex': 1,
+        role: 'row'
+      };
+    }
+  };
+};

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

@@ -0,0 +1,3 @@
+export var gridColumnMenuSelector = function gridColumnMenuSelector(state) {
+  return state.columnMenu;
+};

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

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

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

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

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

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridStateInit } from '../../utils/useGridStateInit';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { gridColumnMenuSelector } from './columnMenuSelector';
+
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
+  var logger = useGridLogger(apiRef, 'useGridColumnMenu');
+  useGridStateInit(apiRef, function (state) {
+    return _extends({}, state, {
+      columnMenu: {
+        open: false
+      }
+    });
+  });
+  /**
+   * API METHODS
+   */
+
+  var showColumnMenu = React.useCallback(function (field) {
+    var shouldUpdate = apiRef.current.setState(function (state) {
+      if (state.columnMenu.open && state.columnMenu.field === field) {
+        return state;
+      }
+
+      logger.debug('Opening Column Menu');
+      return _extends({}, state, {
+        columnMenu: {
+          open: true,
+          field: field
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.hidePreferences();
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  var hideColumnMenu = React.useCallback(function () {
+    var shouldUpdate = apiRef.current.setState(function (state) {
+      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
+        return state;
+      }
+
+      logger.debug('Hiding Column Menu');
+      return _extends({}, state, {
+        columnMenu: _extends({}, state.columnMenu, {
+          open: false,
+          field: undefined
+        })
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  var toggleColumnMenu = React.useCallback(function (field) {
+    logger.debug('Toggle Column Menu');
+    var columnMenu = gridColumnMenuSelector(apiRef.current.state);
+
+    if (!columnMenu.open || columnMenu.field !== field) {
+      showColumnMenu(field);
+    } else {
+      hideColumnMenu();
+    }
+  }, [apiRef, logger, showColumnMenu, hideColumnMenu]);
+  var columnMenuApi = {
+    showColumnMenu: showColumnMenu,
+    hideColumnMenu: hideColumnMenu,
+    toggleColumnMenu: toggleColumnMenu
+  };
+  useGridApiMethod(apiRef, columnMenuApi, 'GridColumnMenuApi');
+  /**
+   * EVENTS
+   */
+
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+};

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

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