Merge remote-tracking branch 'upstream/master' into map-zoom

Author: alexfauquette

docs/data/data-grid/components/filter-panel/FilterPanelTriggerDescription.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  Toolbar,
+  ToolbarButton,
+  FilterPanelTrigger,
+  gridFilterActiveItemsSelector,
+  useGridApiContext,
+  useGridSelector,
+} from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+function useActiveFiltersDescription() {
+  const apiRef = useGridApiContext();
+  const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+
+  if (activeFilters.length === 0) {
+    return 'Filters';
+  }
+
+  return activeFilters
+    .map((item) => {
+      const column = apiRef.current.getColumn(item.field);
+      const operator = column.filterOperators?.find(
+        (filterOperator) => filterOperator.value === item.operator,
+      );
+      return `${column.headerName ?? column.field} ${operator?.label ?? item.operator} ${item.value ?? ''}`.trim();
+    })
+    .join(', ');
+}
+
+function CustomToolbar() {
+  const description = useActiveFiltersDescription();
+
+  return (
+    <Toolbar>
+      <Tooltip title={description}>
+        <FilterPanelTrigger render={<ToolbarButton />}>
+          <FilterListIcon fontSize="small" />
+        </FilterPanelTrigger>
+      </Tooltip>
+    </Toolbar>
+  );
+}
+
+export default function FilterPanelTriggerDescription() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        slots={{ toolbar: CustomToolbar }}
+        showToolbar
+        initialState={{
+          ...data.initialState,
+          filter: {
+            filterModel: {
+              items: [{ field: 'quantity', operator: '>', value: '50000' }],
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/components/filter-panel/FilterPanelTriggerDescription.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  Toolbar,
+  ToolbarButton,
+  FilterPanelTrigger,
+  gridFilterActiveItemsSelector,
+  useGridApiContext,
+  useGridSelector,
+} from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+function useActiveFiltersDescription() {
+  const apiRef = useGridApiContext();
+  const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+
+  if (activeFilters.length === 0) {
+    return 'Filters';
+  }
+
+  return activeFilters
+    .map((item) => {
+      const column = apiRef.current.getColumn(item.field);
+      const operator = column.filterOperators?.find(
+        (filterOperator) => filterOperator.value === item.operator,
+      );
+      return `${column.headerName ?? column.field} ${operator?.label ?? item.operator} ${item.value ?? ''}`.trim();
+    })
+    .join(', ');
+}
+
+function CustomToolbar() {
+  const description = useActiveFiltersDescription();
+
+  return (
+    <Toolbar>
+      <Tooltip title={description}>
+        <FilterPanelTrigger render={<ToolbarButton />}>
+          <FilterListIcon fontSize="small" />
+        </FilterPanelTrigger>
+      </Tooltip>
+    </Toolbar>
+  );
+}
+
+export default function FilterPanelTriggerDescription() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        slots={{ toolbar: CustomToolbar }}
+        showToolbar
+        initialState={{
+          ...data.initialState,
+          filter: {
+            filterModel: {
+              items: [{ field: 'quantity', operator: '>', value: '50000' }],
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/components/filter-panel/FilterPanelTriggerDescription.tsx.preview

@@ -0,0 +1,14 @@
+<DataGridPro
+  {...data}
+  loading={loading}
+  slots={{ toolbar: CustomToolbar }}
+  showToolbar
+  initialState={{
+    ...data.initialState,
+    filter: {
+      filterModel: {
+        items: [{ field: 'quantity', operator: '>', value: '50000' }],
+      },
+    },
+  }}
+/>

docs/data/data-grid/components/filter-panel/filter-panel.md

@@ -45,6 +45,13 @@ import { FilterPanelTrigger } from '@mui/x-data-grid';
 `<FilterPanelTrigger />` is a button that opens and closes the filter panel.
 It renders the `baseButton` slot.
 
+## Describing the active filters
+
+`FilterPanelTrigger` only reports `filterCount` to its `render` callback. It doesn't generate a description of the active filters.
+To show one (for example, in a tooltip), build it yourself from `gridFilterActiveItemsSelector`, which lists the currently active `GridFilterItem` objects:
+
+{{"demo": "FilterPanelTriggerDescription.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Custom elements
 
 Use the `render` prop to replace default elements.

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx

@@ -645,6 +645,31 @@ describe('<DateRangeCalendar />', () => {
       });
     });
 
+    it('should not switch the visible months when the requested month is already visible across a year boundary', async () => {
+      const { setProps } = render(
+        <DateRangeCalendar
+          value={[adapterToUse.date('2023-12-01'), adapterToUse.date('2023-12-01')]}
+        />,
+      );
+
+      // The two calendars initially show December 2023 and January 2024.
+      expect(screen.getByRole('grid', { name: 'December 2023' })).not.to.equal(null);
+      expect(screen.getByRole('grid', { name: 'January 2024' })).not.to.equal(null);
+
+      // Move the start to a day already visible in the second calendar (January 2024).
+      setProps({
+        value: [adapterToUse.date('2024-01-15'), adapterToUse.date('2024-01-15')],
+      });
+
+      // The new start is now selected, confirming the auto month-switch effect ran.
+      await screen.findByRole('gridcell', { name: '15', selected: true });
+
+      // The visible months must not jump: December 2023 and January 2024 stay, February 2024 does not appear.
+      expect(screen.getByRole('grid', { name: 'December 2023' })).not.to.equal(null);
+      expect(screen.getByRole('grid', { name: 'January 2024' })).not.to.equal(null);
+      expect(screen.queryByRole('grid', { name: 'February 2024' })).to.equal(null);
+    });
+
     describe('prop: currentMonthCalendarPosition', () => {
       it('should switch to the selected month when changing value from the outside', async () => {
         const { setProps } = render(

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -417,11 +417,13 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
     }
 
     const displayingMonthRange = calendars - currentMonthCalendarPosition;
-    const currentMonthNumber = adapter.getMonth(calendarState.currentMonth);
-    const requestedMonthNumber = adapter.getMonth(date);
+    // Use absolute months (year * 12 + month) so the comparison stays correct across year boundaries.
+    const currentMonthNumber =
+      adapter.getYear(calendarState.currentMonth) * 12 +
+      adapter.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = adapter.getYear(date) * 12 + adapter.getMonth(date);
 
     if (
-      !adapter.isSameYear(calendarState.currentMonth, date) ||
       requestedMonthNumber < currentMonthNumber ||
       requestedMonthNumber > currentMonthNumber + displayingMonthRange
     ) {