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

package/modern/components/promptControl/GridToolbarPromptControl.js

@@ -1,215 +0,0 @@
-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 => {
-  const {
-    classes,
-    recording
-  } = 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: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.toolbarPromptControl, ownerState.recording && styles['toolbarPromptControl--recording']];
-  }
-})({
-  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 ownerState = {
-    classes: rootProps.classes,
-    recording: isRecording
-  };
-  const classes = useUtilityClasses(ownerState);
-  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 rowSelectionModel = {
-        type: 'include',
-        ids: new Set()
-      };
-      if (result.select !== -1) {
-        for (let i = 0; i < result.select; i += 1) {
-          const row = rows.rows[i];
-          const id = apiRef.current.getRowId(row);
-          rowSelectionModel.ids.add(id);
-        }
-      }
-      apiRef.current.setRowSelectionModel(rowSelectionModel);
-      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: ownerState,
-    className: classes.root,
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, {
-      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,
-      slotProps: {
-        input: {
-          startAdornment: supportsSpeechRecognition && /*#__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.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.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export declare const BrowserSpeechRecognition: any;
-type SpeechRecognitionOptions = {
-  onUpdate: (value: string) => void;
-  onDone: (value: string) => void;
-  onError: (error: string) => void;
-};
-interface RecordButtonProps extends SpeechRecognitionOptions {
-  disabled: boolean;
-  lang?: string;
-  recording: boolean;
-  setRecording: (value: boolean) => void;
-  className: string;
-}
-declare function RecordButton(props: RecordButtonProps): React.JSX.Element;
-export { RecordButton };

package/modern/components/promptControl/RecordButton.js

@@ -1,111 +0,0 @@
-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.d.ts

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

package/modern/components/promptControl/index.js

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

package/modern/components/reexports.d.ts

@@ -1 +0,0 @@
-export { GridPremiumColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PREMIUM as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM as GRID_COLUMN_MENU_SLOT_PROPS } from "./GridPremiumColumnMenu.js";

package/modern/components/reexports.js

@@ -1 +0,0 @@
-export { GridPremiumColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PREMIUM as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM as GRID_COLUMN_MENU_SLOT_PROPS } from "./GridPremiumColumnMenu.js";

package/modern/constants/dataGridPremiumDefaultSlotsComponents.d.ts

@@ -1,2 +0,0 @@
-import type { GridPremiumSlotsComponent } from '../models';
-export declare const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent;

package/modern/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -1,11 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/internals';
-import { GridPremiumColumnMenu } from "../components/GridPremiumColumnMenu.js";
-import materialSlots from "../material/index.js";
-import { GridBottomContainer } from "../components/GridBottomContainer.js";
-import { GridPremiumToolbar } from "../components/GridPremiumToolbar.js";
-export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
-  columnMenu: GridPremiumColumnMenu,
-  bottomContainer: GridBottomContainer,
-  toolbar: GridPremiumToolbar
-});

package/modern/hooks/features/aggregation/createAggregationLookup.d.ts

@@ -1,17 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
-import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationLookup } from "./gridAggregationInterfaces.js";
-export declare const createAggregationLookup: ({
-  apiRef,
-  aggregationFunctions,
-  aggregationRowsScope,
-  getAggregationPosition,
-  isDataSource
-}: {
-  apiRef: RefObject<GridPrivateApiPremium>;
-  aggregationFunctions: Record<string, GridAggregationFunction> | Record<string, GridAggregationFunctionDataSource>;
-  aggregationRowsScope: DataGridPremiumProcessedProps["aggregationRowsScope"];
-  getAggregationPosition: DataGridPremiumProcessedProps["getAggregationPosition"];
-  isDataSource: boolean;
-}) => GridAggregationLookup;

package/modern/hooks/features/aggregation/createAggregationLookup.js

@@ -1,111 +0,0 @@
-import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowNodeSelector } from '@mui/x-data-grid-pro';
-import { getAggregationRules } from "./gridAggregationUtils.js";
-import { gridAggregationModelSelector } from "./gridAggregationSelectors.js";
-const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position) => {
-  const groupAggregationLookup = {};
-  const aggregatedValues = [];
-  const rowIds = apiRef.current.getRowGroupChildren({
-    groupId
-  });
-  const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
-  rowIds.forEach(rowId => {
-    if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
-      return;
-    }
-
-    // If the row is a group, we want to aggregate based on its children
-    // For instance in the following tree, we want the aggregated values of A to be based on A.A, A.B.A and A.B.B but not A.B
-    // A
-    //   A.A
-    //   A.B
-    //     A.B.A
-    //     A.B.B
-    const rowNode = gridRowNodeSelector(apiRef, rowId);
-    if (rowNode.type === 'group') {
-      return;
-    }
-    const row = apiRef.current.getRow(rowId);
-    for (let j = 0; j < aggregatedFields.length; j += 1) {
-      const aggregatedField = aggregatedFields[j];
-      const columnAggregationRules = aggregationRules[aggregatedField];
-      const aggregationFunction = columnAggregationRules.aggregationFunction;
-      const field = aggregatedField;
-      if (aggregatedValues[j] === undefined) {
-        aggregatedValues[j] = {
-          aggregatedField,
-          values: []
-        };
-      }
-      if (typeof aggregationFunction.getCellValue === 'function') {
-        aggregatedValues[j].values.push(aggregationFunction.getCellValue({
-          row
-        }));
-      } else {
-        const colDef = apiRef.current.getColumn(field);
-        aggregatedValues[j].values.push(apiRef.current.getRowValue(row, colDef));
-      }
-    }
-  });
-  for (let i = 0; i < aggregatedValues.length; i += 1) {
-    const {
-      aggregatedField,
-      values
-    } = aggregatedValues[i];
-    const aggregationFunction = aggregationRules[aggregatedField].aggregationFunction;
-    const value = aggregationFunction.apply({
-      values,
-      groupId,
-      field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
-    });
-    groupAggregationLookup[aggregatedField] = {
-      position,
-      value
-    };
-  }
-  return groupAggregationLookup;
-};
-const getGroupAggregatedValueDataSource = (groupId, apiRef, aggregatedFields, position) => {
-  const groupAggregationLookup = {};
-  for (let j = 0; j < aggregatedFields.length; j += 1) {
-    const aggregatedField = aggregatedFields[j];
-    groupAggregationLookup[aggregatedField] = {
-      position,
-      value: apiRef.current.resolveGroupAggregation?.(groupId, aggregatedField) ?? ''
-    };
-  }
-  return groupAggregationLookup;
-};
-export const createAggregationLookup = ({
-  apiRef,
-  aggregationFunctions,
-  aggregationRowsScope,
-  getAggregationPosition,
-  isDataSource
-}) => {
-  const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), aggregationFunctions, isDataSource);
-  const aggregatedFields = Object.keys(aggregationRules);
-  if (aggregatedFields.length === 0) {
-    return {};
-  }
-  const aggregationLookup = {};
-  const rowTree = gridRowTreeSelector(apiRef);
-  const createGroupAggregationLookup = groupNode => {
-    for (let i = 0; i < groupNode.children.length; i += 1) {
-      const childId = groupNode.children[i];
-      const childNode = rowTree[childId];
-      if (childNode.type === 'group') {
-        createGroupAggregationLookup(childNode);
-      }
-    }
-    const position = getAggregationPosition(groupNode);
-    if (position !== null) {
-      if (isDataSource) {
-        aggregationLookup[groupNode.id] = getGroupAggregatedValueDataSource(groupNode.id, apiRef, aggregatedFields, position);
-      } else if (groupNode.children.length) {
-        aggregationLookup[groupNode.id] = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position);
-      }
-    }
-  };
-  createGroupAggregationLookup(rowTree[GRID_ROOT_GROUP_ID]);
-  return aggregationLookup;
-};

package/modern/hooks/features/aggregation/gridAggregationFunctions.d.ts

@@ -1,8 +0,0 @@
-import { GridAggregationFunction } from "./gridAggregationInterfaces.js";
-export declare const GRID_AGGREGATION_FUNCTIONS: {
-  sum: GridAggregationFunction<unknown, number>;
-  avg: GridAggregationFunction<unknown, number>;
-  min: GridAggregationFunction<number | Date, number | Date>;
-  max: GridAggregationFunction<number | Date, number | Date>;
-  size: GridAggregationFunction<unknown, number>;
-};

package/modern/hooks/features/aggregation/gridAggregationFunctions.js

@@ -1,93 +0,0 @@
-import { isNumber } from '@mui/x-data-grid-pro/internals';
-const sumAgg = {
-  apply: ({
-    values
-  }) => {
-    let sum = 0;
-    for (let i = 0; i < values.length; i += 1) {
-      const value = values[i];
-      if (isNumber(value)) {
-        sum += value;
-      }
-    }
-    return sum;
-  },
-  columnTypes: ['number']
-};
-const avgAgg = {
-  apply: ({
-    values
-  }) => {
-    if (values.length === 0) {
-      return null;
-    }
-    let sum = 0;
-    let valuesCount = 0;
-    for (let i = 0; i < values.length; i += 1) {
-      const value = values[i];
-      if (isNumber(value)) {
-        valuesCount += 1;
-        sum += value;
-      }
-    }
-    return sum / valuesCount;
-  },
-  columnTypes: ['number']
-};
-const minAgg = {
-  apply: ({
-    values
-  }) => {
-    if (values.length === 0) {
-      return null;
-    }
-    let min = +Infinity;
-    for (let i = 0; i < values.length; i += 1) {
-      const value = values[i];
-      if (value != null && value < min) {
-        min = value;
-      }
-    }
-    return min;
-  },
-  columnTypes: ['number', 'date', 'dateTime']
-};
-const maxAgg = {
-  apply: ({
-    values
-  }) => {
-    if (values.length === 0) {
-      return null;
-    }
-    let max = -Infinity;
-    for (let i = 0; i < values.length; i += 1) {
-      const value = values[i];
-      if (value != null && value > max) {
-        max = value;
-      }
-    }
-    return max;
-  },
-  columnTypes: ['number', 'date', 'dateTime']
-};
-const sizeAgg = {
-  apply: ({
-    values
-  }) => {
-    return values.filter(value => typeof value !== 'undefined').length;
-  },
-  valueFormatter: value => {
-    if (value == null || !isNumber(value)) {
-      return value;
-    }
-    return value.toLocaleString();
-  },
-  hasCellUnit: false
-};
-export const GRID_AGGREGATION_FUNCTIONS = {
-  sum: sumAgg,
-  avg: avgAgg,
-  min: minAgg,
-  max: maxAgg,
-  size: sizeAgg
-};