@mui/x-data-grid-premium 8.0.0-beta.2 → 8.0.0

package/components/pivotPanel/GridPivotPanelBody.js

@@ -0,0 +1,368 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanelBody = GridPivotPanelBody;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridPivotPanelField = require("./GridPivotPanelField");
+var _collapsible = require("../collapsible");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _resizablePanel = require("../resizablePanel");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['pivotPanelBody'],
+    availableFields: ['pivotPanelAvailableFields'],
+    sections: ['pivotPanelSections'],
+    scrollArea: ['pivotPanelScrollArea'],
+    section: ['pivotPanelSection'],
+    sectionTitle: ['pivotPanelSectionTitle'],
+    fieldList: ['pivotPanelFieldList'],
+    placeholder: ['pivotPanelPlaceholder']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridPivotPanelBodyRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelBody'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+const GridPivotPanelAvailableFields = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelAvailableFields'
+})({
+  flex: 1,
+  minHeight: 84,
+  transition: _internals.vars.transition(['background-color'], {
+    duration: _internals.vars.transitions.duration.short,
+    easing: _internals.vars.transitions.easing.easeInOut
+  }),
+  '&[data-drag-over="true"]': {
+    backgroundColor: _internals.vars.colors.interactive.hover
+  }
+});
+const GridPivotPanelSections = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSections'
+})({
+  position: 'relative',
+  minHeight: 158,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
+});
+const GridPivotPanelScrollArea = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelScrollArea'
+})({
+  height: '100%'
+});
+const GridPivotPanelSection = (0, _system.styled)(_collapsible.Collapsible, {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSection'
+})({
+  margin: _internals.vars.spacing(0.5, 1),
+  transition: _internals.vars.transition(['border-color', 'background-color'], {
+    duration: _internals.vars.transitions.duration.short,
+    easing: _internals.vars.transitions.easing.easeInOut
+  }),
+  '&[data-drag-over="true"]': {
+    backgroundColor: _internals.vars.colors.interactive.hover,
+    outline: `2px solid ${_internals.vars.colors.interactive.selected}`
+  }
+});
+const GridPivotPanelSectionTitle = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSectionTitle'
+})({
+  flex: 1,
+  marginRight: _internals.vars.spacing(1.75),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(1),
+  font: _internals.vars.typography.font.body,
+  fontWeight: _internals.vars.typography.fontWeight.medium
+});
+const GridPivotPanelFieldList = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelFieldList'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: _internals.vars.spacing(0.5, 0)
+});
+const GridPivotPanelPlaceholder = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelPlaceholder'
+})({
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textWrap: 'balance',
+  textAlign: 'center',
+  minHeight: 38,
+  height: '100%',
+  padding: _internals.vars.spacing(0, 1),
+  color: _internals.vars.colors.foreground.muted,
+  font: _internals.vars.typography.font.body
+});
+const INITIAL_DRAG_STATE = {
+  active: false,
+  dropZone: null,
+  initialModelKey: null
+};
+function GridPivotPanelBody({
+  searchValue
+}) {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const initialColumns = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
+  const fields = React.useMemo(() => Array.from(initialColumns.keys()), [initialColumns]);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [drag, setDrag] = React.useState(INITIAL_DRAG_STATE);
+  const pivotModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotModelSelector);
+  const classes = useUtilityClasses(rootProps);
+  const getColumnName = React.useCallback(field => {
+    const column = initialColumns.get(field);
+    return column?.headerName || field;
+  }, [initialColumns]);
+  const pivotModelFields = React.useMemo(() => {
+    const pivotModelArray = pivotModel.rows.concat(pivotModel.columns, pivotModel.values);
+    return new Set(pivotModelArray.map(item => item.field));
+  }, [pivotModel]);
+  const availableFields = React.useMemo(() => {
+    return fields.filter(field => {
+      if (pivotModelFields.has(field)) {
+        return false;
+      }
+      if (initialColumns.get(field)?.pivotable === false) {
+        return false;
+      }
+      if (searchValue) {
+        const fieldName = getColumnName(field);
+        return fieldName.toLowerCase().includes(searchValue.toLowerCase());
+      }
+      return true;
+    });
+  }, [searchValue, fields, getColumnName, pivotModelFields, initialColumns]);
+  const handleDragStart = modelKey => {
+    setDrag({
+      active: true,
+      initialModelKey: modelKey,
+      dropZone: null
+    });
+  };
+  const handleDragEnd = () => {
+    setDrag(INITIAL_DRAG_STATE);
+  };
+  const handleDrop = event => {
+    setDrag(INITIAL_DRAG_STATE);
+
+    // The drop event was already handled by a child
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    const {
+      field,
+      modelKey: originSection
+    } = JSON.parse(event.dataTransfer.getData('text/plain'));
+    const targetSection = event.currentTarget.getAttribute('data-section');
+    if (originSection === targetSection) {
+      return;
+    }
+    apiRef.current.updatePivotModel({
+      field,
+      targetSection,
+      originSection
+    });
+  };
+  const handleDragOver = React.useCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+  const handleDragEnter = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      const dropZone = event.currentTarget.getAttribute('data-section');
+      setDrag(v => (0, _extends2.default)({}, v, {
+        active: true,
+        dropZone
+      }));
+    }
+  }, []);
+  const handleDragLeave = React.useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setDrag(v => (0, _extends2.default)({}, v, {
+        active: true,
+        dropZone: v.initialModelKey
+      }));
+    }
+  }, []);
+  const rowsLabel = apiRef.current.getLocaleText('pivotRows');
+  const columnsLabel = apiRef.current.getLocaleText('pivotColumns');
+  const valuesLabel = apiRef.current.getLocaleText('pivotValues');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelBodyRoot, {
+    ownerState: rootProps,
+    className: classes.root,
+    "data-dragging": drag.active,
+    onDragLeave: handleDragLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelAvailableFields, {
+      ownerState: rootProps,
+      className: classes.availableFields,
+      onDrop: handleDrop,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      "data-section": null,
+      "data-drag-over": drag.active && drag.dropZone === null,
+      children: [availableFields.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
+        ownerState: rootProps,
+        className: classes.placeholder,
+        children: apiRef.current.getLocaleText('pivotNoFields')
+      }), availableFields.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
+        ownerState: rootProps,
+        className: classes.fieldList,
+        children: availableFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
+          field: field,
+          modelKey: null,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          children: getColumnName(field)
+        }, field))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSections, {
+      ownerState: rootProps,
+      className: classes.sections,
+      direction: "vertical",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelScrollArea, {
+        ownerState: rootProps,
+        className: classes.scrollArea,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
+          ownerState: rootProps,
+          className: classes.section,
+          onDrop: handleDrop,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          "data-section": "rows",
+          "data-drag-over": drag.dropZone === 'rows',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
+            "aria-label": apiRef.current.getLocaleText('pivotRows'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
+              ownerState: rootProps,
+              className: classes.sectionTitle,
+              children: [rowsLabel, pivotModel.rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+                badgeContent: pivotModel.rows.length
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
+            children: [pivotModel.rows.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
+              ownerState: rootProps,
+              className: classes.placeholder,
+              children: apiRef.current.getLocaleText('pivotDragToRows')
+            }), pivotModel.rows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
+              ownerState: rootProps,
+              className: classes.fieldList,
+              children: pivotModel.rows.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
+                field: modelValue.field,
+                modelKey: "rows",
+                modelValue: modelValue,
+                "data-field": modelValue.field,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: getColumnName(modelValue.field)
+              }, modelValue.field))
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
+          ownerState: rootProps,
+          className: classes.section,
+          onDrop: handleDrop,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          "data-section": "columns",
+          "data-drag-over": drag.dropZone === 'columns',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
+            "aria-label": apiRef.current.getLocaleText('pivotColumns'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
+              ownerState: rootProps,
+              className: classes.sectionTitle,
+              children: [columnsLabel, pivotModel.columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+                badgeContent: pivotModel.columns.length
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
+            children: [pivotModel.columns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
+              ownerState: rootProps,
+              className: classes.placeholder,
+              children: apiRef.current.getLocaleText('pivotDragToColumns')
+            }), pivotModel.columns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
+              ownerState: rootProps,
+              className: classes.fieldList,
+              children: pivotModel.columns.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
+                field: modelValue.field,
+                modelKey: "columns",
+                modelValue: modelValue,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: getColumnName(modelValue.field)
+              }, modelValue.field))
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSection, {
+          ownerState: rootProps,
+          className: classes.section,
+          onDrop: handleDrop,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          "data-section": "values",
+          "data-drag-over": drag.dropZone === 'values',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
+            "aria-label": apiRef.current.getLocaleText('pivotValues'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelSectionTitle, {
+              ownerState: rootProps,
+              className: classes.sectionTitle,
+              children: [valuesLabel, pivotModel.values.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+                badgeContent: pivotModel.values.length
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
+            children: [pivotModel.values.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelPlaceholder, {
+              ownerState: rootProps,
+              className: classes.placeholder,
+              children: apiRef.current.getLocaleText('pivotDragToValues')
+            }), pivotModel.values.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldList, {
+              ownerState: rootProps,
+              className: classes.fieldList,
+              children: pivotModel.values.map(modelValue => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelField.GridPivotPanelField, {
+                field: modelValue.field,
+                modelKey: "values",
+                modelValue: modelValue,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                children: getColumnName(modelValue.field)
+              }, modelValue.field))
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+}

package/components/pivotPanel/GridPivotPanelField.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { GridPivotModel } from "../../hooks/features/pivoting/gridPivotingInterfaces.js";
+import type { FieldTransferObject } from './GridPivotPanelBody';
+type GridPivotPanelFieldProps = {
+  children: React.ReactNode;
+  field: FieldTransferObject['field'];
+  onDragStart: (modelKey: FieldTransferObject['modelKey']) => void;
+  onDragEnd: () => void;
+} & ({
+  modelKey: 'columns';
+  modelValue: GridPivotModel['columns'][number];
+} | {
+  modelKey: 'rows';
+  modelValue: GridPivotModel['rows'][number];
+} | {
+  modelKey: 'values';
+  modelValue: GridPivotModel['values'][number];
+} | {
+  modelKey: null;
+});
+declare function GridPivotPanelField(props: GridPivotPanelFieldProps): React.JSX.Element;
+export { GridPivotPanelField };