Properly handle disabled years

e2e/integration/KeyboardNavigation.spec.ts

@@ -83,11 +83,17 @@ describe('Keyboard navigation', () => {
       cy.get('[aria-label="calendar view is open, switch to year view"]').click();
       cy.get('body').type('{downarrow}{downarrow}');
 
-      cy.contains('2098').should('be.focused');
+      cy.contains('2098')
+        .find('h6')
+        .should('be.focused');
       cy.get('body').type('{leftarrow}');
-      cy.contains('2097').should('be.focused');
+      cy.contains('2097')
+        .find('h6')
+        .should('be.focused');
       cy.get('body').type('{rightarrow}');
-      cy.contains('2098').should('be.focused');
+      cy.contains('2098')
+        .find('h6')
+        .should('be.focused');
     });
 
     it("Doesn't allow to select disabled year from keyboard", () => {
@@ -101,11 +107,15 @@ describe('Keyboard navigation', () => {
       cy.get('[aria-label="calendar view is open, switch to year view"]').click();
       cy.get('body').type('{downarrow}{downarrow}');
 
-      cy.contains('2098').should('be.focused');
+      cy.contains('2098')
+        .find('h6')
+        .should('be.focused');
       cy.get('body').type('{downarrow}{downarrow}');
 
       // it doesn't focus days outside the range
-      cy.contains('2098').should('be.focused');
+      cy.contains('2098')
+        .find('h6')
+        .should('be.focused');
     });
   });
 

lib/.size-snapshot.json

@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 188407,
-    "minified": 101058,
-    "gzipped": 26433,
+    "bundled": 188867,
+    "minified": 101299,
+    "gzipped": 26390,
     "treeshaked": {
       "rollup": {
-        "code": 83141,
+        "code": 83380,
         "import_statements": 2121
       },
       "webpack": {
-        "code": 92619
+        "code": 92858
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 299285,
-    "minified": 116721,
-    "gzipped": 33272
+    "bundled": 299767,
+    "minified": 116960,
+    "gzipped": 33359
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 257939,
-    "minified": 107582,
-    "gzipped": 30484
+    "bundled": 258421,
+    "minified": 107821,
+    "gzipped": 30606
   }
 }

lib/src/__tests__/DatePickerProps.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextField } from '@material-ui/core';
 import { mount, utilsToUse } from './test-utils';
-import { DatePicker, MobileDatePicker } from '../DatePicker/DatePicker';
+import { StaticDatePicker, DatePicker, MobileDatePicker } from '../DatePicker/DatePicker';
 
 describe('DatePicker - different props', () => {
   it('Should not render toolbar if onlyCalendar = true', () => {
@@ -115,4 +115,24 @@ describe('DatePicker - different props', () => {
     const component = mount(<Component />);
     component.find('#focus-picker').simulate('click');
   });
+
+  it('shouldDisableYear – disables years dynamically', () => {
+    const onChangeMock = jest.fn();
+    const component = mount(
+      <StaticDatePicker
+        renderInput={props => <TextField {...props} />}
+        openTo="year"
+        onChange={onChangeMock}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        shouldDisableYear={year => utilsToUse.getYear(year) === 2030}
+      />
+    );
+
+    const getYearButton = (year: number) =>
+      component.find(`[data-mui-test='year'] > [data-mui-test='year-${year}']`).parent();
+
+    expect(getYearButton(2029).prop('disabled')).toBeFalsy();
+    expect(getYearButton(2030).prop('disabled')).toBeTruthy();
+    expect(getYearButton(2031).prop('disabled')).toBeFalsy();
+  });
 });

lib/src/__tests__/DatePickerRoot.test.tsx

@@ -42,10 +42,10 @@ describe('e2e - DatePicker', () => {
   it('Should render year selection', () => {
     component.find('button[data-mui-test="calendar-view-switcher"]').simulate('click');
 
-    expect(component.find('Year').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(201);
 
     component
-      .find('Year')
+      .find('[data-mui-test="year"]')
       .at(1)
       .simulate('click');
 
@@ -74,10 +74,10 @@ describe('e2e -- DatePicker views year', () => {
   });
 
   it('Should render year selection and select year', () => {
-    expect(component.find('Year').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(201);
 
     component
-      .find('Year')
+      .find('[data-mui-test="year"]')
       .at(1)
       .simulate('click');
 
@@ -120,8 +120,8 @@ describe('e2e -- DatePicker views year and month', () => {
   it('Should switch to year selection and back to month', () => {
     component.find('button[data-mui-test="calendar-view-switcher"]').simulate('click');
 
-    const year = component.find('Year');
-    expect(component.find('Year').length).toBe(201);
+    const year = component.find('[data-mui-test="year"]');
+    expect(component.find('[data-mui-test="year"]').length).toBe(201);
 
     year.first().simulate('click');
     expect(component.find('Month').length).toBe(12);
@@ -147,6 +147,6 @@ describe('e2e -- DatePicker views year and month open from year', () => {
   });
 
   it('Should render year selection', () => {
-    expect(component.find('Year').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(201);
   });
 });

lib/src/__tests__/DateTimePickerRoot.test.tsx

@@ -37,9 +37,9 @@ describe('e2e - DateTimePicker', () => {
       .first()
       .simulate('click');
 
-    expect(component.find('Year').length).toBe(201);
+    expect(component.find('[data-mui-test="year"]').length).toBe(201);
     component
-      .find('Year')
+      .find('[data-mui-test="year"]')
       .at(1)
       .simulate('click');
 

lib/src/_shared/ToolbarButton.tsx

@@ -37,7 +37,12 @@ export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
   const classes = useStyles();
 
   return (
-    <Button variant="text" className={clsx(classes.toolbarBtn, className)} {...other}>
+    <Button
+      data-mui-test="toolbar-button"
+      variant="text"
+      className={clsx(classes.toolbarBtn, className)}
+      {...other}
+    >
       <ToolbarText
         align={align}
         className={typographyClassName}

lib/src/views/Calendar/CalendarView.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { YearSelection } from './YearSelection';
 import { MonthSelection } from './MonthSelection';
 import { DatePickerView } from '../../DatePicker';
 import { useCalendarState } from './useCalendarState';
@@ -14,6 +13,7 @@ import { Calendar, ExportedCalendarProps } from './Calendar';
 import { DateValidationProps } from '../../_helpers/date-utils';
 import { PickerOnChangeFn } from '../../_shared/hooks/useViews';
 import { CalendarHeader, CalendarHeaderProps } from './CalendarHeader';
+import { YearSelection, ExportedYearSelectionProps } from './YearSelection';
 import { defaultMinDate, defaultMaxDate } from '../../constants/prop-types';
 import { IsStaticVariantContext } from '../../wrappers/WrapperVariantContext';
 
@@ -31,6 +31,7 @@ type PublicCalendarHeaderProps = Pick<
 export interface CalendarViewProps
   extends DateValidationProps,
     ExportedCalendarProps,
+    ExportedYearSelectionProps,
     PublicCalendarHeaderProps {
   date: MaterialUiPickersDate;
   view: DatePickerView;
@@ -41,8 +42,6 @@ export interface CalendarViewProps
   reduceAnimations?: boolean;
   /** Callback firing on month change. Return promise to render spinner till it will not be resolved @DateIOType */
   onMonthChange?: (date: MaterialUiPickersDate) => void | Promise<void>;
-  /** Callback firing on year change @DateIOType */
-  onYearChange?: (date: MaterialUiPickersDate) => void;
 }
 
 export type ExportedCalendarViewProps = Omit<
@@ -81,6 +80,7 @@ export const CalendarView: React.FC<CalendarViewProps> = ({
   allowKeyboardControl: __allowKeyboardControlProp,
   disablePast,
   disableFuture,
+  shouldDisableYear,
   ...other
 }) => {
   const utils = useUtils();
@@ -148,8 +148,11 @@ export const CalendarView: React.FC<CalendarViewProps> = ({
               onChange={onChange}
               minDate={minDate}
               maxDate={maxDate}
+              disableFuture={disableFuture}
+              disablePast={disablePast}
               isDateDisabled={isDateDisabled}
               allowKeyboardControl={allowKeyboardControl}
+              shouldDisableYear={shouldDisableYear}
             />
           )}