@mui/x-data-grid-premium 7.22.3 → 8.0.0-alpha.1

package/modern/components/promptControl/GridToolbarPromptControl.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { getDataGridUtilityClass, GRID_CHECKBOX_SELECTION_FIELD, gridColumnDefinitionsSelector, gridColumnLookupSelector, GridLogicOperator, gridRowsLookupSelector } from '@mui/x-data-grid';
+import { getValueOptions, getVisibleRows } from '@mui/x-data-grid/internals';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { RecordButton, BrowserSpeechRecognition } from "./RecordButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const supportsSpeechRecognition = !!BrowserSpeechRecognition;
+const useUtilityClasses = (ownerState, recording) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarPromptControl', recording && 'toolbarPromptControl--recording'],
+    recordingIndicator: ['toolbarPromptControlRecordingIndicator'],
+    recordButton: ['toolbarPromptControlRecordButton'],
+    sendButton: ['toolbarPromptControlSendButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridToolbarPromptControlRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarPromptControl',
+  overridesResolver: (_, styles) => styles.toolbarPromptControl
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'row'
+});
+function sampleData(apiRef) {
+  const columns = gridColumnDefinitionsSelector(apiRef);
+  const rows = Object.values(gridRowsLookupSelector(apiRef));
+  const columnExamples = {};
+  columns.forEach(column => {
+    columnExamples[column.field] = Array.from({
+      length: Math.min(5, rows.length)
+    }).map(() => {
+      const row = rows[Math.floor(Math.random() * rows.length)];
+      if (column.valueGetter) {
+        return column.valueGetter(row[column.field], row, column, apiRef);
+      }
+      return row[column.field];
+    });
+  });
+  return columnExamples;
+}
+function generateContext(apiRef, examples) {
+  const columns = gridColumnDefinitionsSelector(apiRef);
+  const columnsContext = columns.map(column => ({
+    field: column.field,
+    description: column.description ?? null,
+    examples: examples?.[column.field] ?? column.unstable_examples ?? [],
+    type: column.type ?? 'string',
+    allowedOperators: column.filterOperators?.map(operator => operator.value) ?? []
+  }));
+  return `The columns are described by the following JSON:\n${JSON.stringify(columnsContext)}`;
+}
+function GridToolbarPromptControl(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    onPrompt,
+    lang,
+    allowDataSampling = false
+  } = props;
+  const [isLoading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [isRecording, setRecording] = React.useState(false);
+  const [query, setQuery] = React.useState('');
+  const classes = useUtilityClasses(rootProps, isRecording);
+  const examplesFromData = React.useMemo(() => allowDataSampling ? sampleData(apiRef) : undefined, [apiRef, allowDataSampling]);
+  const processPrompt = React.useCallback(() => {
+    const context = generateContext(apiRef, examplesFromData);
+    const columnsByField = gridColumnLookupSelector(apiRef);
+    setLoading(true);
+    setError(null);
+    apiRef.current.setLoading(true);
+    onPrompt(context, query).then(result => {
+      const interestColumns = [];
+      apiRef.current.setFilterModel({
+        items: result.filters.map((filter, index) => {
+          const item = {
+            id: index,
+            field: filter.column,
+            operator: filter.operator,
+            value: filter.value
+          };
+          const column = columnsByField[filter.column];
+          if (column.type === 'singleSelect') {
+            const options = getValueOptions(column) ?? [];
+            const found = options.find(option => typeof option === 'object' && option.label === filter.value);
+            if (found) {
+              item.value = found.value;
+            }
+          }
+          return item;
+        }),
+        logicOperator: result.filterOperator ?? GridLogicOperator.And,
+        quickFilterValues: []
+      });
+      apiRef.current.setRowGroupingModel(result.grouping.map(g => g.column));
+      apiRef.current.setAggregationModel(result.aggregation);
+      apiRef.current.setSortModel(result.sorting.map(s => ({
+        field: s.column,
+        sort: s.direction
+      })));
+      const rows = getVisibleRows(apiRef, rootProps);
+      const selectedRowIds = result.select === -1 ? [] : rows.rows.slice(0, result.select).map(r => {
+        return apiRef.current.getRowId(r);
+      });
+      apiRef.current.setRowSelectionModel(selectedRowIds);
+      const columns = apiRef.current.getAllColumns();
+      const targetIndex = Number(columns.find(c => c.field === GRID_CHECKBOX_SELECTION_FIELD) !== undefined) + Number(result.grouping.length);
+      interestColumns.push(...Object.keys(result.aggregation));
+      interestColumns.push(...result.filters.map(f => f.column));
+      interestColumns.reverse().forEach(c => apiRef.current.setColumnIndex(c, targetIndex));
+    }).catch(_ => {
+      setError(apiRef.current.getLocaleText('toolbarPromptControlErrorMessage'));
+    }).finally(() => {
+      setLoading(false);
+      apiRef.current.setState(state => _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          loading: false
+        })
+      }));
+    });
+  }, [apiRef, rootProps, onPrompt, examplesFromData, query]);
+  const handleChange = useEventCallback(event => {
+    setQuery(event.target.value);
+  });
+  const handleKeyDown = useEventCallback(event => {
+    if (event.code === 'Enter') {
+      processPrompt();
+    }
+  });
+  const handleDone = useEventCallback(value => {
+    setQuery(value);
+    if (value) {
+      processPrompt();
+    }
+  });
+  const placeholder = supportsSpeechRecognition ? apiRef.current.getLocaleText('toolbarPromptControlWithRecordingPlaceholder') : apiRef.current.getLocaleText('toolbarPromptControlPlaceholder');
+  return /*#__PURE__*/_jsx(GridToolbarPromptControlRoot, {
+    ownerState: rootProps,
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, {
+      variant: "outlined",
+      placeholder: isRecording ? apiRef.current.getLocaleText('toolbarPromptControlRecordingPlaceholder') : placeholder,
+      "aria-label": apiRef.current.getLocaleText('toolbarPromptControlLabel'),
+      disabled: isLoading,
+      value: query,
+      style: {
+        flex: 1
+      },
+      onChange: handleChange,
+      size: "small",
+      onKeyDown: handleKeyDown,
+      error: !!error,
+      helperText: error,
+      InputProps: {
+        startAdornment: supportsSpeechRecognition && /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+          position: "start",
+          children: /*#__PURE__*/_jsx(RecordButton, {
+            className: classes.recordButton,
+            lang: lang,
+            recording: isRecording,
+            setRecording: setRecording,
+            disabled: isLoading,
+            onUpdate: setQuery,
+            onDone: handleDone,
+            onError: setError
+          })
+        }),
+        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+          position: "end",
+          children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+            title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+                className: classes.sendButton,
+                disabled: isLoading || isRecording || query === '',
+                color: "primary",
+                onClick: processPrompt,
+                size: "small",
+                "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
+                edge: "end",
+                children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptSendIcon, {
+                  fontSize: "small"
+                })
+              })
+            })
+          })
+        })
+      }
+    })
+  });
+}
+export { GridToolbarPromptControl };

package/modern/components/promptControl/RecordButton.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Timeout } from '@mui/utils/useTimeout';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BrowserSpeechRecognition = globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition;
+function RecordButton(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    lang,
+    recording,
+    setRecording,
+    disabled,
+    className,
+    onDone,
+    onUpdate,
+    onError
+  } = props;
+  const buttonRef = React.useRef(null);
+  const recognition = useLazyRef(() => {
+    if (!BrowserSpeechRecognition) {
+      return {
+        start: () => {},
+        abort: () => {}
+      };
+    }
+    const timeout = new Timeout();
+    const instance = new BrowserSpeechRecognition();
+    instance.continuous = true;
+    instance.interimResults = true;
+    instance.lang = lang;
+    let finalResult = '';
+    let interimResult = '';
+    function start(options) {
+      if (recording) {
+        return;
+      }
+      setRecording(true);
+      instance.onresult = event => {
+        finalResult = '';
+        interimResult = '';
+        if (typeof event.results === 'undefined') {
+          instance.stop();
+          return;
+        }
+        for (let i = event.resultIndex; i < event.results.length; i += 1) {
+          if (event.results[i].isFinal) {
+            finalResult += event.results[i][0].transcript;
+          } else {
+            interimResult += event.results[i][0].transcript;
+          }
+        }
+        if (finalResult === '') {
+          options.onUpdate(interimResult);
+        }
+        timeout.start(1000, () => instance.stop());
+      };
+      instance.onsoundend = () => {
+        instance.stop();
+      };
+      instance.onend = () => {
+        options.onDone(finalResult);
+        setRecording(false);
+      };
+      instance.onerror = error => {
+        options.onError(error.message);
+        instance.stop();
+        setRecording(false);
+      };
+      instance.start();
+    }
+    function abort() {
+      instance.abort();
+    }
+    return {
+      start,
+      abort
+    };
+  }).current;
+  const handleClick = () => {
+    if (!recording) {
+      recognition.start({
+        onDone,
+        onUpdate,
+        onError
+      });
+      return;
+    }
+    recognition.abort();
+  };
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+    title: recording ? apiRef.current.getLocaleText('toolbarPromptControlRecordButtonActiveLabel') : apiRef.current.getLocaleText('toolbarPromptControlRecordButtonDefaultLabel'),
+    children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+        color: recording ? 'primary' : 'default',
+        className: className,
+        disabled: disabled,
+        onClick: handleClick,
+        ref: buttonRef,
+        size: "small",
+        edge: "start",
+        children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptRecordIcon, {
+          fontSize: "small"
+        })
+      })
+    })
+  });
+}
+export { RecordButton };

package/modern/components/promptControl/index.js

@@ -0,0 +1 @@
+export { GridToolbarPromptControl as Unstable_GridToolbarPromptControl } from "./GridToolbarPromptControl.js";

package/modern/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import ownerDocument from '@mui/utils/ownerDocument';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";

package/modern/hooks/features/index.js

@@ -2,4 +2,5 @@
 export * from "./aggregation/index.js";
 export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
-export * from "./cellSelection/index.js";
+export * from "./cellSelection/index.js";
+export * from "./promptControl/index.js";

package/modern/hooks/features/promptControl/api.js

@@ -0,0 +1,22 @@
+export function gridDefaultPromptResolver(url, context, query) {
+  return fetch(url, {
+    mode: 'cors',
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      context,
+      query
+    })
+  }).then(result => result.json()).then(result => {
+    if (result.ok === false) {
+      return Promise.reject(new Error(result.message));
+    }
+    if (result.data.error) {
+      return Promise.reject(new Error(result.data.error));
+    }
+    return result.data;
+  });
+}

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

@@ -0,0 +1 @@
+export { gridDefaultPromptResolver as unstable_gridDefaultPromptResolver } from "./api.js";

package/modern/hooks/features/promptControl/types.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.22.3
+ * @mui/x-data-grid-premium v8.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/material/icons.js

@@ -11,4 +11,10 @@ export const GridGroupWorkIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
 }), 'GroupWork');
 export const GridFunctionsIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M18 4H6v2l6.5 6L6 18v2h12v-3h-7l5-5-5-5h7z"
-}), 'Functions');
+}), 'Functions');
+export const GridSendPromptIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"
+}), 'SendPrompt');
+export const GridRecordPromptIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z"
+}), 'RecordPrompt');

package/modern/material/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from "./icons.js";
+import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon, GridSendPromptIcon, GridRecordPromptIcon } from "./icons.js";
 const iconsSlots = {
   columnMenuUngroupIcon: GridWorkspacesIcon,
   columnMenuGroupIcon: GridGroupWorkIcon,
-  columnMenuAggregationIcon: GridFunctionsIcon
+  columnMenuAggregationIcon: GridFunctionsIcon,
+  toolbarPromptSendIcon: GridSendPromptIcon,
+  toolbarPromptRecordIcon: GridRecordPromptIcon
 };
 const materialSlots = _extends({}, iconsSlots);
 export default materialSlots;

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "7.22.3",
+  "version": "8.0.0-alpha.1",
   "description": "The Premium plan edition of the Data Grid Components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -33,25 +33,25 @@
     "directory": "packages/x-data-grid-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-license": "7.21.0",
-    "@mui/x-internals": "7.21.0",
-    "@mui/x-data-grid": "7.22.3",
-    "@mui/x-data-grid-pro": "7.22.3"
+    "@mui/x-internals": "8.0.0-alpha.1",
+    "@mui/x-data-grid": "8.0.0-alpha.1",
+    "@mui/x-license": "8.0.0-alpha.1",
+    "@mui/x-data-grid-pro": "8.0.0-alpha.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat