[PickersCalendarSkeleton] Rename to CalendarPickerSkeleton (#25679)

docs/pages/api-docs/pickers-calendar-skeleton.js → docs/pages/api-docs/calendar-picker-skeleton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ApiPage from 'docs/src/modules/components/ApiPage';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-calendar-skeleton.json';
+import jsonPageContent from './calendar-picker-skeleton.json';
 
 export default function Page(props) {
   const { descriptions, pageContent } = props;
@@ -10,9 +10,9 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/pickers-calendar-skeleton',
+    'docs/translations/api-docs/calendar-picker-skeleton',
     false,
-    /pickers-calendar-skeleton.*.json$/,
+    /calendar-picker-skeleton.*.json$/,
   );
   const descriptions = mapApiPageTranslations(req);
 

docs/pages/api-docs/calendar-picker-skeleton.json

@@ -0,0 +1,25 @@
+{
+  "props": {},
+  "name": "CalendarPickerSkeleton",
+  "styles": {
+    "classes": [
+      "root",
+      "loadingContainer",
+      "weekContainer",
+      "week",
+      "daysHeader",
+      "weekDayLabel",
+      "daySkeleton",
+      "hidden"
+    ],
+    "globalClasses": {},
+    "name": "MuiCalendarPickerSkeleton"
+  },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": false,
+  "cssComponent": false
+}

docs/src/pages/components/date-picker/ServerRequestDatePicker.js

@@ -5,7 +5,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
 import PickersDay from '@material-ui/lab/PickersDay';
 import DatePicker from '@material-ui/lab/DatePicker';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 
 function getRandomNumber(min, max) {
@@ -82,7 +82,7 @@ export default function ServerRequestDatePicker() {
         }}
         onMonthChange={handleMonthChange}
         renderInput={(params) => <TextField {...params} />}
-        renderLoading={() => <PickersCalendarSkeleton />}
+        renderLoading={() => <CalendarPickerSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =
             !DayComponentProps.outsideCurrentMonth &&

docs/src/pages/components/date-picker/ServerRequestDatePicker.tsx

@@ -5,7 +5,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
 import PickersDay from '@material-ui/lab/PickersDay';
 import DatePicker from '@material-ui/lab/DatePicker';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 
 function getRandomNumber(min: number, max: number) {
@@ -82,7 +82,7 @@ export default function ServerRequestDatePicker() {
         }}
         onMonthChange={handleMonthChange}
         renderInput={(params) => <TextField {...params} />}
-        renderLoading={() => <PickersCalendarSkeleton />}
+        renderLoading={() => <CalendarPickerSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =
             !DayComponentProps.outsideCurrentMonth &&

docs/src/pagesApi.js

@@ -19,6 +19,7 @@ module.exports = [
   { pathname: '/api-docs/button' },
   { pathname: '/api-docs/button-base' },
   { pathname: '/api-docs/button-group' },
+  { pathname: '/api-docs/calendar-picker-skeleton' },
   { pathname: '/api-docs/card' },
   { pathname: '/api-docs/card-action-area' },
   { pathname: '/api-docs/card-actions' },
@@ -97,7 +98,6 @@ module.exports = [
   { pathname: '/api-docs/pagination' },
   { pathname: '/api-docs/pagination-item' },
   { pathname: '/api-docs/paper' },
-  { pathname: '/api-docs/pickers-calendar-skeleton' },
   { pathname: '/api-docs/pickers-day' },
   { pathname: '/api-docs/popover' },
   { pathname: '/api-docs/popper' },

packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.test.tsx → packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.test.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { getClasses, createMount, describeConformance } from 'test/utils';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 
-describe('<PickersCalendarSkeleton />', () => {
+describe('<CalendarPickerSkeleton />', () => {
   let classes: Record<string, string>;
   const mount = createMount();
 
   before(() => {
-    classes = getClasses(<PickersCalendarSkeleton />);
+    classes = getClasses(<CalendarPickerSkeleton />);
   });
 
-  describeConformance(<PickersCalendarSkeleton />, () => ({
+  describeConformance(<CalendarPickerSkeleton />, () => ({
     classes,
     inheritComponent: 'div',
     mount,

packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx → packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx

@@ -6,16 +6,16 @@ import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core
 import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { styles as calendarStyles, PickersCalendarClassKey } from '../DayPicker/PickersCalendar';
 
-export interface PickersCalendarSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
+export interface CalendarPickerSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
 
-export type PickersCalendarSkeletonClassKey =
+export type CalendarPickerSkeletonClassKey =
   | PickersCalendarClassKey
   | 'root'
   | 'daySkeleton'
   | 'hidden';
-export const styles: MuiStyles<PickersCalendarSkeletonClassKey> = (
+export const styles: MuiStyles<CalendarPickerSkeletonClassKey> = (
   theme,
-): StyleRules<PickersCalendarSkeletonClassKey> => ({
+): StyleRules<CalendarPickerSkeletonClassKey> => ({
   ...calendarStyles(theme),
   root: {
     alignSelf: 'start',
@@ -36,9 +36,9 @@ const monthMap = [
   [1, 1, 1, 1, 0, 0, 0],
 ];
 
-const PickersCalendarSkeleton: React.FC<
-  PickersCalendarSkeletonProps & WithStyles<typeof styles>
-> = (props) => {
+const CalendarPickerSkeleton: React.FC<CalendarPickerSkeletonProps & WithStyles<typeof styles>> = (
+  props,
+) => {
   const { className, classes, ...other } = props;
 
   return (
@@ -62,7 +62,7 @@ const PickersCalendarSkeleton: React.FC<
   );
 };
 
-PickersCalendarSkeleton.propTypes /* remove-proptypes */ = {
+CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
@@ -85,6 +85,6 @@ PickersCalendarSkeleton.propTypes /* remove-proptypes */ = {
  *
  * API:
  *
- * - [PickersCalendarSkeleton API](https://material-ui.com/api/pickers-calendar-skeleton/)
+ * - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
  */
-export default withStyles(styles, { name: 'MuiCalendarSkeleton' })(PickersCalendarSkeleton);
+export default withStyles(styles, { name: 'MuiCalendarPickerSkeleton' })(CalendarPickerSkeleton);

packages/material-ui-lab/src/CalendarPickerSkeleton/index.ts

@@ -0,0 +1,4 @@
+export { default } from './CalendarPickerSkeleton';
+
+export type CalendarPickerSkeletonClassKey = import('./CalendarPickerSkeleton').CalendarPickerSkeletonClassKey;
+export type CalendarPickerSkeletonProps = import('./CalendarPickerSkeleton').CalendarPickerSkeletonProps;

packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx

@@ -4,7 +4,7 @@ import { spy, useFakeTimers, SinonFakeTimers } from 'sinon';
 import TextField from '@material-ui/core/TextField';
 import { fireEvent, screen } from 'test/utils';
 import PickersDay from '@material-ui/lab/PickersDay';
-import CalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import MobileDatePicker from '@material-ui/lab/MobileDatePicker';
 import {
   createPickerRender,
@@ -211,7 +211,7 @@ describe('<MobileDatePicker />', () => {
     render(
       <MobileDatePicker
         loading
-        renderLoading={() => <CalendarSkeleton data-testid="custom-loading" />}
+        renderLoading={() => <CalendarPickerSkeleton data-testid="custom-loading" />}
         open
         onChange={() => {}}
         renderInput={(params) => <TextField {...params} />}

packages/material-ui-lab/src/index.d.ts

@@ -10,6 +10,9 @@ export * from './Autocomplete';
 export { default as AvatarGroup } from './AvatarGroup';
 export * from './AvatarGroup';
 
+export { default as CalendarPickerSkeleton } from './CalendarPickerSkeleton';
+export * from './CalendarPickerSkeleton';
+
 export { default as ClockPicker } from './ClockPicker';
 export * from './ClockPicker';
 
@@ -67,9 +70,6 @@ export * from './Pagination';
 export { default as PaginationItem } from './PaginationItem';
 export * from './PaginationItem';
 
-export { default as PickersCalendarSkeleton } from './PickersCalendarSkeleton';
-export * from './PickersCalendarSkeleton';
-
 export { default as PickersDay } from './PickersDay';
 export * from './PickersDay';
 

packages/material-ui-lab/src/index.js

@@ -68,8 +68,8 @@ export * from './Pagination';
 export { default as PaginationItem } from './PaginationItem';
 export * from './PaginationItem';
 
-export { default as PickersCalendarSkeleton } from './PickersCalendarSkeleton';
-export * from './PickersCalendarSkeleton';
+export { default as CalendarPickerSkeleton } from './CalendarPickerSkeleton';
+export * from './CalendarPickerSkeleton';
 
 export { default as PickersDay } from './PickersDay';
 export * from './PickersDay';

packages/material-ui-lab/src/themeAugmentation/components.d.ts

@@ -76,6 +76,10 @@ export interface LabComponents {
     defaultProps?: ComponentsProps['MuiTreeView'];
     styleOverrides?: ComponentsOverrides['MuiTreeView'];
   };
+  MuiCalendarPickerSkeleton?: {
+    defaultProps?: ComponentsProps['MuiCalendarPickerSkeleton'];
+    styleOverrides?: ComponentsOverrides['MuiCalendarPickerSkeleton'];
+  };
   MuiClock?: {
     styleOverrides?: ComponentsOverrides['MuiClock'];
   };
@@ -115,10 +119,6 @@ export interface LabComponents {
   MuiPickersCalendarHeader?: {
     styleOverrides?: ComponentsOverrides['MuiPickersCalendarHeader'];
   };
-  MuiPickersCalendarSkeleton?: {
-    defaultProps?: ComponentsProps['MuiPickersCalendarSkeleton'];
-    styleOverrides?: ComponentsOverrides['MuiPickersCalendarSkeleton'];
-  };
   MuiPickersDay?: {
     defaultProps?: ComponentsProps['MuiPickersDay'];
     styleOverrides?: ComponentsOverrides['MuiPickersDay'];

packages/material-ui-lab/src/themeAugmentation/overrides.d.ts

@@ -1,3 +1,4 @@
+import { CalendarPickerSkeletonClassKey } from '../CalendarPickerSkeleton';
 import { ClockClassKey } from '../ClockPicker/Clock';
 import { ClockNumberClassKey } from '../ClockPicker/ClockNumber';
 import { ClockPointerClassKey } from '../ClockPicker/ClockPointer';
@@ -11,7 +12,6 @@ import { PickerClassKey } from '../internal/pickers/Picker/Picker';
 import { PickersArrowSwitcherClassKey } from '../internal/pickers/PickersArrowSwitcher';
 import { PickersCalendarClassKey } from '../DayPicker/PickersCalendar';
 import { PickersCalendarHeaderClassKey } from '../DayPicker/PickersCalendarHeader';
-import { PickersCalendarSkeletonClassKey } from '../PickersCalendarSkeleton';
 import { PickersDayClassKey } from '../PickersDay';
 import { PickersFadeTransitionGroupClassKey } from '../DayPicker/PickersFadeTransitionGroup';
 import { PickersModalDialogClassKey } from '../internal/pickers/PickersModalDialog';
@@ -38,6 +38,7 @@ import { YearPickerClassKey } from '../YearPicker';
 
 // prettier-ignore
 export interface LabComponentNameToClassKey {
+  MuiCalendarPickerSkeleton: CalendarPickerSkeletonClassKey;
   MuiClock: ClockClassKey;
   MuiClockNumber: ClockNumberClassKey;
   MuiClockPointer: ClockPointerClassKey;
@@ -51,7 +52,6 @@ export interface LabComponentNameToClassKey {
   MuiPickersArrowSwitcher: PickersArrowSwitcherClassKey;
   MuiPickersCalendar: PickersCalendarClassKey;
   MuiPickersCalendarHeader: PickersCalendarHeaderClassKey;
-  MuiPickersCalendarSkeleton: PickersCalendarSkeletonClassKey;
   MuiPickersDay: PickersDayClassKey;
   MuiPickersFadeTransition: PickersFadeTransitionGroupClassKey;
   MuiPickersModalDialog: PickersModalDialogClassKey;

packages/material-ui-lab/src/themeAugmentation/props.d.ts

@@ -1,4 +1,5 @@
 import { AvatarGroupProps } from '../AvatarGroup';
+import { CalendarPickerSkeletonProps } from '../CalendarPickerSkeleton';
 import { ClockPickerProps } from '../ClockPicker';
 import { DatePickerProps } from '../DatePicker';
 import { DateTimePickerProps } from '../DateTimePicker';
@@ -10,7 +11,6 @@ import { MobileDatePickerProps } from '../MobileDatePicker';
 import { MobileDateTimePickerProps } from '../MobileDateTimePicker';
 import { MobileTimePickerProps } from '../MobileTimePicker';
 import { MonthPickerProps } from '../MonthPicker/MonthPicker';
-import { PickersCalendarSkeletonProps } from '../PickersCalendarSkeleton';
 import { PickersDayProps } from '../PickersDay';
 import { StaticDatePickerProps } from '../StaticDatePicker';
 import { StaticDateTimePickerProps } from '../StaticDateTimePicker';
@@ -31,6 +31,7 @@ import { YearPickerProps } from '../YearPicker';
 
 export interface LabComponentsPropsList {
   MuiAvatarGroup: AvatarGroupProps;
+  MuiCalendarPickerSkeleton: CalendarPickerSkeletonProps;
   MuiClockPicker: ClockPickerProps<unknown>;
   MuiDatePicker: DatePickerProps;
   MuiDateTimePicker: DateTimePickerProps;
@@ -42,7 +43,6 @@ export interface LabComponentsPropsList {
   MuiMobileDateTimePicker: MobileDateTimePickerProps;
   MuiMobileTimePicker: MobileTimePickerProps;
   MuiMonthPicker: MonthPickerProps<unknown>;
-  MuiPickersCalendarSkeleton: PickersCalendarSkeletonProps;
   MuiPickersDay: PickersDayProps<unknown>;
   MuiStaticDatePicker: StaticDatePickerProps;
   MuiStaticDateTimePicker: StaticDateTimePickerProps;