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

package/modern/hooks/utils/useGridApiEventHandler.js

@@ -1,32 +1,52 @@
 import * as React from 'react';
 import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBasedCleanupTracking.js";
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
-/**
- * Signal to the underlying logic what version of the public component API
- * of the Data Grid is exposed.
- */
-var GridSignature = /*#__PURE__*/function (GridSignature) {
-  GridSignature["DataGrid"] = "DataGrid";
-  GridSignature["DataGridPro"] = "DataGridPro";
-  GridSignature["DataGridPremium"] = "DataGridPremium";
-  return GridSignature;
-}(GridSignature || {});
-// We use class to make it easier to detect in heap snapshots by name
-class ObjectToBeRetainedByReact {}
-
 // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
-export function createUseGridApiEventHandler(registryContainer) {
-  let cleanupTokensCounter = 0;
-  return function useGridApiEventHandler(apiRef, eventName, handler, options) {
-    if (registryContainer.registry === null) {
-      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+
+// We use class to make it easier to detect in heap snapshots by name
+class ObjectToBeRetainedByReact {
+  static create() {
+    return new ObjectToBeRetainedByReact();
+  }
+}
+const registryContainer = {
+  current: createRegistry()
+};
+let cleanupTokensCounter = 0;
+export function useGridApiEventHandler(apiRef, eventName, handler, options) {
+  const objectRetainedByReact = React.useState(ObjectToBeRetainedByReact.create)[0];
+  const subscription = React.useRef(null);
+  const handlerRef = React.useRef(null);
+  handlerRef.current = handler;
+  const cleanupTokenRef = React.useRef(null);
+  if (!subscription.current && handlerRef.current) {
+    const enhancedHandler = (params, event, details) => {
+      if (!event.defaultMuiPrevented) {
+        handlerRef.current?.(params, event, details);
+      }
+    };
+    subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
+    cleanupTokensCounter += 1;
+    cleanupTokenRef.current = {
+      cleanupToken: cleanupTokensCounter
+    };
+    registryContainer.current.register(objectRetainedByReact,
+    // The callback below will be called once this reference stops being retained
+    () => {
+      subscription.current?.();
+      subscription.current = null;
+      cleanupTokenRef.current = null;
+    }, cleanupTokenRef.current);
+  } else if (!handlerRef.current && subscription.current) {
+    subscription.current();
+    subscription.current = null;
+    if (cleanupTokenRef.current) {
+      registryContainer.current.unregister(cleanupTokenRef.current);
+      cleanupTokenRef.current = null;
     }
-    const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
-    const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
-    handlerRef.current = handler;
-    const cleanupTokenRef = React.useRef(null);
+  }
+  React.useEffect(() => {
     if (!subscription.current && handlerRef.current) {
       const enhancedHandler = (params, event, details) => {
         if (!event.defaultMuiPrevented) {
@@ -34,62 +54,35 @@ export function createUseGridApiEventHandler(registryContainer) {
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
-      cleanupTokensCounter += 1;
-      cleanupTokenRef.current = {
-        cleanupToken: cleanupTokensCounter
-      };
-      registryContainer.registry.register(objectRetainedByReact,
-      // The callback below will be called once this reference stops being retained
-      () => {
-        subscription.current?.();
-        subscription.current = null;
-        cleanupTokenRef.current = null;
-      }, cleanupTokenRef.current);
-    } else if (!handlerRef.current && subscription.current) {
-      subscription.current();
-      subscription.current = null;
-      if (cleanupTokenRef.current) {
-        registryContainer.registry.unregister(cleanupTokenRef.current);
-        cleanupTokenRef.current = null;
-      }
     }
-    React.useEffect(() => {
-      if (!subscription.current && handlerRef.current) {
-        const enhancedHandler = (params, event, details) => {
-          if (!event.defaultMuiPrevented) {
-            handlerRef.current?.(params, event, details);
-          }
-        };
-        subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
-      }
-      if (cleanupTokenRef.current && registryContainer.registry) {
-        // If the effect was called, it means that this render was committed
-        // so we can trust the cleanup function to remove the listener.
-        registryContainer.registry.unregister(cleanupTokenRef.current);
-        cleanupTokenRef.current = null;
-      }
-      return () => {
-        subscription.current?.();
-        subscription.current = null;
-      };
-    }, [apiRef, eventName, options]);
-  };
+    if (cleanupTokenRef.current && registryContainer.current) {
+      // If the effect was called, it means that this render was committed
+      // so we can trust the cleanup function to remove the listener.
+      registryContainer.current.unregister(cleanupTokenRef.current);
+      cleanupTokenRef.current = null;
+    }
+    return () => {
+      subscription.current?.();
+      subscription.current = null;
+    };
+  }, [apiRef, eventName, options]);
 }
-const registryContainer = {
-  registry: null
+const OPTIONS_IS_FIRST = {
+  isFirst: true
 };
+export function useGridApiOptionHandler(apiRef, eventName, handler) {
+  useGridApiEventHandler(apiRef, eventName, handler, OPTIONS_IS_FIRST);
+}
 
 // TODO: move to @mui/x-data-grid/internals
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCleanupTracking = () => {
-  registryContainer.registry?.reset();
-  registryContainer.registry = null;
-};
-export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
-const optionsSubscriberOptions = {
-  isFirst: true
-};
-export function useGridApiOptionHandler(apiRef, eventName, handler) {
-  useGridApiEventHandler(apiRef, eventName, handler, optionsSubscriberOptions);
+export function unstable_resetCleanupTracking() {
+  registryContainer.current?.reset();
+  registryContainer.current = createRegistry();
 }
-export { GridSignature };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const internal_registryContainer = registryContainer;
+function createRegistry() {
+  return typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+}

package/modern/hooks/utils/useGridApiRef.js

@@ -2,4 +2,4 @@ import * as React from 'react';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export const useGridApiRef = () => React.useRef({});
+export const useGridApiRef = () => React.useRef(null);

package/modern/hooks/utils/useGridSelector.js

@@ -1,25 +1,16 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useLazyRef } from "./useLazyRef.js";
-import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-// TODO v8: Remove this function
-function applySelector(apiRef, selector) {
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
-}
-
-// TODO v8: Rename this function to `applySelector`
-function applySelectorV8(apiRef, selector, args, instanceId) {
+function applySelector(apiRef, selector, args, instanceId) {
   if (isOutputSelector(selector)) {
     return selector(apiRef, args);
   }
-  return selector(apiRef.current.state, instanceId);
+  return selector(apiRef.current.state, args, instanceId);
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
@@ -42,38 +33,11 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: null
+  args: undefined
 });
-
-// TODO v8: Remove this function
-export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
-  }
-  const refs = useLazyRef(createRefs);
-  const didInit = refs.current.selector !== null;
-  const [state, setState] = React.useState(
-  // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelector(apiRef, selector));
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+const EMPTY = [];
+const emptyGetSnapshot = () => null;
+export const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -83,27 +47,43 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   const didInit = refs.current.selector !== null;
   const [state, setState] = React.useState(
   // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId));
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
     }
   }
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
+      const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };

package/modern/hooks/utils/useGridVisibleRows.js

@@ -1,27 +1,7 @@
-import * as React from 'react';
-import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from "../features/pagination/gridPaginationSelector.js";
-import { gridExpandedSortedRowEntriesSelector } from "../features/filter/gridFilterSelector.js";
+import { gridVisibleRowsSelector } from "../features/pagination/gridPaginationSelector.js";
+import { useGridSelector } from "./index.js";
 export const getVisibleRows = (apiRef, props) => {
-  let rows;
-  let range;
-  if (props.pagination && props.paginationMode === 'client') {
-    range = gridPaginationRowRangeSelector(apiRef);
-    rows = gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef);
-  } else {
-    rows = gridExpandedSortedRowEntriesSelector(apiRef);
-    if (rows.length === 0) {
-      range = null;
-    } else {
-      range = {
-        firstRowIndex: 0,
-        lastRowIndex: rows.length - 1
-      };
-    }
-  }
-  return {
-    rows,
-    range
-  };
+  return gridVisibleRowsSelector(apiRef);
 };
 
 /**
@@ -31,10 +11,7 @@ export const getVisibleRows = (apiRef, props) => {
  * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
+
 export const useGridVisibleRows = (apiRef, props) => {
-  const response = getVisibleRows(apiRef, props);
-  return React.useMemo(() => ({
-    rows: response.rows,
-    range: response.range
-  }), [response.rows, response.range]);
+  return useGridSelector(apiRef, gridVisibleRowsSelector);
 };

package/modern/hooks/utils/useIsSSR.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+const emptySubscribe = () => () => {};
+const clientSnapshot = () => false;
+const serverSnapshot = () => true;
+export const useIsSSR = () => useSyncExternalStore(emptySubscribe, clientSnapshot, serverSnapshot);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.1
+ * @mui/x-data-grid v8.0.0-alpha.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/constants.js

@@ -1,3 +1,10 @@
 export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
 export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export let PinnedColumnPosition = /*#__PURE__*/function (PinnedColumnPosition) {
+  PinnedColumnPosition[PinnedColumnPosition["NONE"] = 0] = "NONE";
+  PinnedColumnPosition[PinnedColumnPosition["LEFT"] = 1] = "LEFT";
+  PinnedColumnPosition[PinnedColumnPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedColumnPosition[PinnedColumnPosition["VIRTUAL"] = 3] = "VIRTUAL";
+  return PinnedColumnPosition;
+}({});

package/modern/internals/index.js

@@ -4,10 +4,11 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export { GridHeaders } from "../components/GridHeaders.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
+export * from "../constants/signature.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.js";
-export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";
+export { GridStrategyGroup, useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";
 export { useGridInitialization } from "../hooks/core/useGridInitialization.js";
 export { unwrapPrivateAPI } from "../hooks/core/useGridApiInitialization.js";
 export { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
@@ -23,6 +24,7 @@ export { useGridDensity, densityStateInitializer } from "../hooks/features/densi
 export { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
 export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
 export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -43,13 +45,14 @@ export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
 export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
-export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+export * from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 export { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";
@@ -61,8 +64,8 @@ export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibl
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 export { getColumnsToExport, defaultGetRowsToExport } from "../hooks/features/export/utils.js";
 export * from "../utils/createControllablePromise.js";
-export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from "../utils/createSelector.js";
-export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
+export * from "../utils/rtlFlipSide.js";
+export { createSelector, createSelectorMemoized } from "../utils/createSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
 export { isNavigationKey, isPasteShortcut, isCopyShortcut } from "../utils/keyboardUtils.js";

package/modern/internals/utils/attachPinnedStyle.js

@@ -0,0 +1,9 @@
+import { rtlFlipSide } from "../../utils/rtlFlipSide.js";
+export function attachPinnedStyle(style, isRtl, pinnedPosition, pinnedOffset) {
+  const side = rtlFlipSide(pinnedPosition, isRtl);
+  if (!side || pinnedOffset === undefined) {
+    return style;
+  }
+  style[side] = pinnedOffset;
+  return style;
+}

package/modern/internals/utils/getPinnedCellOffset.js

@@ -1,16 +1,15 @@
-import { GridPinnedColumnPosition } from "../../hooks/features/columns/index.js";
-export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions) => {
-  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+import { PinnedColumnPosition } from "../constants.js";
+export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth) => {
   let pinnedOffset;
   switch (pinnedPosition) {
-    case GridPinnedColumnPosition.LEFT:
+    case PinnedColumnPosition.LEFT:
       pinnedOffset = columnPositions[columnIndex];
       break;
-    case GridPinnedColumnPosition.RIGHT:
-      pinnedOffset = dimensions.columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
+    case PinnedColumnPosition.RIGHT:
+      pinnedOffset = columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
       break;
     default:
-      pinnedOffset = 0;
+      pinnedOffset = undefined;
       break;
   }
   return pinnedOffset;

package/modern/internals/utils/index.js

@@ -1,4 +1,4 @@
 export * from "./computeSlots.js";
-export * from "./useProps.js";
 export * from "./propValidation.js";
-export * from "./gridRowGroupingUtils.js";
+export * from "./gridRowGroupingUtils.js";
+export * from "./attachPinnedStyle.js";

package/modern/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { isNumber } from "../../utils/utils.js";
-import { GridSignature } from "../../hooks/utils/useGridApiEventHandler.js";
+import { GridSignature } from "../../constants/signature.js";
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 export function validateProps(props, validators) {
   validators.forEach(validator => {

package/modern/locales/arSD.js

@@ -28,7 +28,6 @@ const arSDGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -103,6 +102,8 @@ const arSDGrid = {
   'headerFilterOperator>=': 'أكبر من او يساوي',
   'headerFilterOperator<': 'اصغر من',
   'headerFilterOperator<=': 'اصغر من او يساوي',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'أي',
   filterValueTrue: 'صائب',

package/modern/locales/beBY.js

@@ -42,7 +42,6 @@ const beBYGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -118,6 +117,7 @@ const beBYGrid = {
   // 'headerFilterOperator>=': 'Greater than or equal to',
   // 'headerFilterOperator<': 'Less than',
   // 'headerFilterOperator<=': 'Less than or equal to',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'усякі',

package/modern/locales/bgBG.js

@@ -28,7 +28,6 @@ const bgBGGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -103,6 +102,8 @@ const bgBGGrid = {
   'headerFilterOperator>=': 'По-голямо или равно на',
   'headerFilterOperator<': 'По-малко от',
   'headerFilterOperator<=': 'По-малко или равно на',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'всякакви',
   filterValueTrue: 'вярно',

package/modern/locales/csCZ.js

@@ -36,7 +36,6 @@ const csCZGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -111,6 +110,8 @@ const csCZGrid = {
   'headerFilterOperator>=': 'Větší než nebo rovno',
   'headerFilterOperator<': 'Menší než',
   'headerFilterOperator<=': 'Menší než nebo rovno',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'jakýkoliv',
   filterValueTrue: 'ano',

package/modern/locales/daDK.js

@@ -28,7 +28,6 @@ const daDKGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -103,6 +102,8 @@ const daDKGrid = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/modern/locales/deDE.js

@@ -24,17 +24,15 @@ const deDEGrid = {
   toolbarQuickFilterLabel: 'Suchen',
   toolbarQuickFilterDeleteIconLabel: 'Löschen',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: 'Prompt eingeben…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Prompt eingeben oder aufnehmen…',
+  toolbarPromptControlRecordingPlaceholder: 'Hört Prompteingabe zu…',
+  toolbarPromptControlLabel: 'Prompteingabe',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Aufnahme starten',
+  toolbarPromptControlRecordButtonActiveLabel: 'Aufnahme stoppen',
+  toolbarPromptControlSendActionLabel: 'Senden',
+  toolbarPromptControlSendActionAriaLabel: 'Prompt senden',
+  toolbarPromptControlErrorMessage: 'Ein Fehler ist während der Bearbeitung der Anfrage aufgetreten. Bitte versuche es nochmal mit einem anderen Prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Exportieren',
   toolbarExportLabel: 'Exportieren',
@@ -46,8 +44,7 @@ const deDEGrid = {
   columnsManagementNoColumns: 'Keine Spalten',
   columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   columnsManagementReset: 'Zurücksetzen',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Löschen',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',
@@ -103,6 +100,8 @@ const deDEGrid = {
   'headerFilterOperator>=': 'Größer als oder gleich',
   'headerFilterOperator<': 'Kleiner als',
   'headerFilterOperator<=': 'Kleiner als oder gleich',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'Beliebig',
   filterValueTrue: 'Ja',

package/modern/locales/elGR.js

@@ -28,7 +28,6 @@ const elGRGrid = {
   // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlDeleteIconLabel: 'Clear',
   // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   // toolbarPromptControlSendActionLabel: 'Send',
@@ -103,6 +102,8 @@ const elGRGrid = {
   'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με',
   'headerFilterOperator<': 'Μικρότερο από',
   'headerFilterOperator<=': 'Μικρότερο ή ίσο με',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'οποιοδήποτε',
   filterValueTrue: 'αληθές',