[DataGrid] Display sort column menu items as per sortingOrder prop (m…

…ui#7125)
MBilalShafi · Dec 13, 2022 · 184eb26 · 184eb26
1 parent bab8e69
commit 184eb26
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx
@@ -6,11 +6,14 @@ import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSorti
 import { GridSortDirection } from '../../../models/gridSortModel';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridFilterItemProps } from './GridFilterItemProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 function SortGridMenuItems(props: GridFilterItemProps) {
   const { column, onClick } = props;
   const apiRef = useGridApiContext();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const rootProps = useGridRootProps();
+  const sortingOrder: GridSortDirection[] = column.sortingOrder ?? rootProps.sortingOrder;
 
   const sortDirection = React.useMemo(() => {
     if (!column) {
@@ -35,15 +38,25 @@ function SortGridMenuItems(props: GridFilterItemProps) {
 
   return (
     <React.Fragment>
-      <MenuItem onClick={onSortMenuItemClick} disabled={sortDirection == null}>
-        {apiRef.current.getLocaleText('columnMenuUnsort')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="asc" disabled={sortDirection === 'asc'}>
-        {apiRef.current.getLocaleText('columnMenuSortAsc')}
-      </MenuItem>
-      <MenuItem onClick={onSortMenuItemClick} data-value="desc" disabled={sortDirection === 'desc'}>
-        {apiRef.current.getLocaleText('columnMenuSortDesc')}
-      </MenuItem>
+      {sortingOrder.includes(null) ? (
+        <MenuItem onClick={onSortMenuItemClick} disabled={sortDirection == null}>
+          {apiRef.current.getLocaleText('columnMenuUnsort')}
+        </MenuItem>
+      ) : null}
+      {sortingOrder.includes('asc') ? (
+        <MenuItem onClick={onSortMenuItemClick} data-value="asc" disabled={sortDirection === 'asc'}>
+          {apiRef.current.getLocaleText('columnMenuSortAsc')}
+        </MenuItem>
+      ) : null}
+      {sortingOrder.includes('desc') ? (
+        <MenuItem
+          onClick={onSortMenuItemClick}
+          data-value="desc"
+          disabled={sortDirection === 'desc'}
+        >
+          {apiRef.current.getLocaleText('columnMenuSortDesc')}
+        </MenuItem>
+      ) : null}
     </React.Fragment>
   );
 }

diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
@@ -117,4 +117,24 @@ describe('<DataGrid /> - Column Headers', () => {
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
     });
   });
+
+  it('should display sort column menu items as per sortingOrder prop', () => {
+    render(
+      <div style={{ width: 300, height: 500 }}>
+        <DataGrid
+          {...baselineProps}
+          sortingOrder={['desc', 'asc']}
+          columns={[{ field: 'brand', headerClassName: 'foobar' }]}
+        />
+      </div>,
+    );
+    const columnCell = getColumnHeaderCell(0);
+    const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]');
+    fireEvent.click(menuIconButton);
+    clock.runToLast();
+
+    expect(screen.queryByRole('menuitem', { name: /asc/i })).not.to.equal(null);
+    expect(screen.queryByRole('menuitem', { name: /desc/i })).not.to.equal(null);
+    expect(screen.queryByRole('menuitem', { name: /unsort/i })).to.equal(null);
+  });
 });