@mui/x-data-grid-pro 5.4.0 → 5.6.0

package/node/DataGridPro/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DATA_GRID_PRO_PROPS_DEFAULT_VALUES: true
+};
+Object.defineProperty(exports, "DATA_GRID_PRO_PROPS_DEFAULT_VALUES", {
+  enumerable: true,
+  get: function () {
+    return _useDataGridProProps.DATA_GRID_PRO_PROPS_DEFAULT_VALUES;
+  }
+});
+
+var _DataGridPro = require("./DataGridPro");
+
+Object.keys(_DataGridPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGridPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGridPro[key];
+    }
+  });
+});
+
+var _useDataGridProProps = require("./useDataGridProProps");

package/node/DataGridPro/useDataGridProComponent.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridProComponent = void 0;
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridInfiniteLoader");
+
+var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
+
+var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
+
+var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
+
+var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
+
+var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
+
+var _useGridRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridRowGroupingPreProcessors");
+
+var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
+
+var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");
+
+var _useGridDetailPanel = require("../hooks/features/detailPanel/useGridDetailPanel");
+
+var _useGridDetailPanelCache = require("../hooks/features/detailPanel/useGridDetailPanelCache");
+
+var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/useGridDetailPanelPreProcessors");
+
+// Pro-only features
+const useDataGridProComponent = (inputApiRef, props) => {
+  const apiRef = (0, _internals.useGridInitialization)(inputApiRef, props);
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+
+  (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
+  (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
+  (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
+  (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props); // Must be the last because it changes the order of the columns.
+
+  /**
+   * Register all state initializers here.
+   */
+
+  (0, _internals.useGridInitializeState)(_internals.filterStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.pageSizeStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.pageStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
+  (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
+
+  (0, _useGridTreeData.useGridTreeData)(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
+
+  (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
+  (0, _internals.useGridSelection)(apiRef, props);
+  (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
+  (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
+  (0, _internals.useGridColumns)(apiRef, props);
+  (0, _internals.useGridRows)(apiRef, props);
+  (0, _internals.useGridParamsApi)(apiRef);
+  (0, _useGridDetailPanelCache.useGridDetailPanelCache)(apiRef, props);
+  (0, _internals.useGridEditing)(apiRef, props);
+  (0, _internals.useGridFocus)(apiRef, props);
+  (0, _internals.useGridSorting)(apiRef, props);
+  (0, _internals.useGridPreferencesPanel)(apiRef, props);
+  (0, _internals.useGridFilter)(apiRef, props);
+  (0, _internals.useGridDensity)(apiRef, props);
+  (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
+  (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
+  (0, _internals.useGridPagination)(apiRef, props);
+  (0, _internals.useGridRowsMeta)(apiRef, props);
+  (0, _internals.useGridScroll)(apiRef, props);
+  (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
+  (0, _internals.useGridColumnMenu)(apiRef);
+  (0, _internals.useGridKeyboard)(apiRef);
+  (0, _internals.useGridKeyboardNavigation)(apiRef, props);
+  (0, _internals.useGridCsvExport)(apiRef);
+  (0, _internals.useGridPrintExport)(apiRef, props);
+  (0, _internals.useGridClipboard)(apiRef);
+  (0, _internals.useGridDimensions)(apiRef, props);
+  (0, _internals.useGridEvents)(apiRef, props);
+  (0, _internals.useGridStatePersistence)(apiRef);
+  return apiRef;
+};
+
+exports.useDataGridProComponent = useDataGridProComponent;

package/node/DataGridPro/useDataGridProProps.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridProProps = exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+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; }
+
+/**
+ * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
+ */
+const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGrid.DATA_GRID_PROPS_DEFAULT_VALUES, {
+  scrollEndThreshold: 80,
+  treeData: false,
+  defaultGroupingExpansionDepth: 0,
+  disableColumnPinning: false,
+  disableRowGrouping: false,
+  disableChildrenFiltering: false,
+  disableChildrenSorting: false,
+  rowGroupingColumnMode: 'single',
+  getDetailPanelHeight: () => 500
+});
+exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = DATA_GRID_PRO_PROPS_DEFAULT_VALUES;
+
+const useDataGridProProps = inProps => {
+  const themedProps = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDataGrid'
+  });
+  const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGrid.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
+  const components = React.useMemo(() => {
+    const overrides = themedProps.components;
+
+    if (!overrides) {
+      return (0, _extends2.default)({}, _xDataGrid.DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+    }
+
+    const mergedComponents = {};
+    Object.keys(_xDataGrid.DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
+      mergedComponents[key] = overrides[key] === undefined ? _xDataGrid.DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    });
+    return mergedComponents;
+  }, [themedProps.components]);
+  return React.useMemo(() => {
+    var _themedProps$experime;
+
+    return (0, _extends2.default)({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+      disableRowGrouping: themedProps.disableRowGrouping || !((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping),
+      localeText,
+      components,
+      signature: 'DataGridPro'
+    });
+  }, [themedProps, localeText, components]);
+};
+
+exports.useDataGridProProps = useDataGridProProps;

package/node/components/DataGridProColumnHeaders.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataGridProColumnHeaders = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/material/styles");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+
+var _columnPinning = require("../hooks/features/columnPinning");
+
+var _DataGridProVirtualScroller = require("./DataGridProVirtualScroller");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["style", "className", "innerRef"];
+
+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 useUtilityClasses = ownerState => {
+  const {
+    leftPinnedColumns,
+    rightPinnedColumns,
+    classes
+  } = ownerState;
+  const slots = {
+    leftPinnedColumns: ['pinnedColumnHeaders', leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`],
+    rightPinnedColumns: ['pinnedColumnHeaders', rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`]
+  };
+  return (0, _material.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+
+  return alphaValue / 100;
+};
+
+const GridColumnHeadersPinnedColumnHeaders = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedColumnHeaders',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left']
+  }, {
+    [`&.${_xDataGrid.gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right']
+  }, styles.pinnedColumnHeaders]
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  position: 'absolute',
+  overflow: 'hidden',
+  height: '100%',
+  zIndex: 1,
+  display: 'flex',
+  boxShadow: theme.shadows[2],
+  backgroundColor: theme.palette.background.default
+}, theme.palette.mode === 'dark' && {
+  backgroundImage: `linear-gradient(${(0, _styles.alpha)('#fff', getOverlayAlpha(2))}, ${(0, _styles.alpha)('#fff', getOverlayAlpha(2))})`
+}, ownerState.side === _columnPinning.GridPinnedPosition.left && {
+  left: 0
+}, ownerState.side === _columnPinning.GridPinnedPosition.right && {
+  right: 0
+}));
+const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGridProColumnHeaders(props, ref) {
+  const {
+    className,
+    innerRef
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const visibleColumnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
+  const [scrollbarSize, setScrollbarSize] = React.useState(0);
+  const handleContentSizeChange = React.useCallback(() => {
+    var _apiRef$current$windo;
+
+    if (!((_apiRef$current$windo = apiRef.current.windowRef) != null && _apiRef$current$windo.current)) {
+      return;
+    } // TODO expose scrollbar size on getRootDimensions
+
+
+    const newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
+    setScrollbarSize(newScrollbarSize);
+  }, [apiRef]);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
+  const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields);
+  const {
+    isDragging,
+    renderContext,
+    updateInnerPosition,
+    getRootProps,
+    getInnerProps,
+    getColumns
+  } = (0, _internals.useGridColumnHeaders)({
+    innerRef,
+    minColumnIndex: leftPinnedColumns.length
+  });
+  const ownerState = {
+    leftPinnedColumns,
+    rightPinnedColumns,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  const leftRenderContext = renderContext && leftPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
+    firstColumnIndex: 0,
+    lastColumnIndex: leftPinnedColumns.length
+  }) : null;
+  const rightRenderContext = renderContext && rightPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
+    firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
+    lastColumnIndex: visibleColumnFields.length
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaders, (0, _extends2.default)({
+    ref: ref,
+    className: className
+  }, getRootProps(other), {
+    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
+      className: classes.leftPinnedColumns,
+      ownerState: {
+        side: _columnPinning.GridPinnedPosition.left
+      },
+      children: getColumns({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true
+      })
+    }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
+      ownerState: {
+        side: _columnPinning.GridPinnedPosition.right
+      },
+      className: classes.rightPinnedColumns,
+      style: {
+        paddingRight: scrollbarSize
+      },
+      children: getColumns({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    }))]
+  }));
+});
+exports.DataGridProColumnHeaders = DataGridProColumnHeaders;