[docs] Add DayPicker API

docs/pages/api-docs/date-range-picker.json

@@ -33,11 +33,9 @@
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "endText": { "type": { "name": "node" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/date-time-picker.json

@@ -25,12 +25,10 @@
     "DialogProps": { "type": { "name": "object" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "getClockLabelText": { "type": { "name": "func" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/day-picker.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './day-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs/translations/api-docs/day-picker', false, /day-picker.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/day-picker.json

@@ -0,0 +1,55 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "allowKeyboardControl": { "type": { "name": "bool" } },
+    "defaultCalendarMonth": { "type": { "name": "any" } },
+    "loading": { "type": { "name": "bool" } },
+    "maxDate": { "type": { "name": "any" } },
+    "minDate": { "type": { "name": "any" } },
+    "onMonthChange": { "type": { "name": "func" } },
+    "onViewChange": { "type": { "name": "func" } },
+    "openTo": {
+      "type": {
+        "name": "enum",
+        "description": "'date'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'"
+      },
+      "default": "'date'"
+    },
+    "reduceAnimations": {
+      "type": { "name": "bool" },
+      "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)"
+    },
+    "renderLoading": {
+      "type": { "name": "func" },
+      "default": "() => <span data-mui-test=\"loading-progress\">...</span>"
+    },
+    "shouldDisableDate": { "type": { "name": "func" } },
+    "shouldDisableYear": { "type": { "name": "func" } },
+    "view": {
+      "type": {
+        "name": "enum",
+        "description": "'date'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'"
+      }
+    },
+    "views": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;'date'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
+      },
+      "default": "['year', 'date']"
+    }
+  },
+  "name": "DayPicker",
+  "styles": {
+    "classes": ["root", "viewTransitionContainer", "fullHeightContainer"],
+    "globalClasses": {},
+    "name": "MuiDayPicker"
+  },
+  "spread": false,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-lab/src/DayPicker/DayPicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": false,
+  "cssComponent": false
+}

docs/pages/api-docs/desktop-date-range-picker.json

@@ -28,11 +28,9 @@
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "endText": { "type": { "name": "node" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/desktop-date-time-picker.json

@@ -20,12 +20,10 @@
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "getClockLabelText": { "type": { "name": "func" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/mobile-date-range-picker.json

@@ -32,11 +32,9 @@
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "endText": { "type": { "name": "node" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/mobile-date-time-picker.json

@@ -24,12 +24,10 @@
     "DialogProps": { "type": { "name": "object" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "getClockLabelText": { "type": { "name": "func" } },
     "getOpenDialogAriaText": { "type": { "name": "func" } },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },

docs/pages/api-docs/static-date-range-picker.json

@@ -28,11 +28,9 @@
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "displayStaticWrapperAs": {
       "type": { "name": "enum", "description": "'desktop'<br>&#124;&nbsp;'mobile'" }
     },

docs/pages/api-docs/static-date-time-picker.json

@@ -20,12 +20,10 @@
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableFuture": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "disablePast": { "type": { "name": "bool" } },
     "displayStaticWrapperAs": {
       "type": { "name": "enum", "description": "'desktop'<br>&#124;&nbsp;'mobile'" }
     },

docs/scripts/buildApi.ts

@@ -1115,13 +1115,20 @@ async function buildDocs(options: {
     }, {} as Record<string, string>);
   }
 
+  const propErrors: Array<[propName: string, error: Error]> = [];
   const componentProps = _.fromPairs<{
     default: string | undefined;
     required: boolean | undefined;
     type: { name: string | undefined; description: string | undefined };
   }>(
     Object.entries(reactApi.props).map(([propName, propDescriptor]) => {
-      const prop = createDescribeableProp(propDescriptor, propName);
+      let prop: DescribeablePropDescriptor | null;
+      try {
+        prop = createDescribeableProp(propDescriptor, propName);
+      } catch (error) {
+        propErrors.push([propName, error]);
+        prop = null;
+      }
       if (prop === null) {
         // have to delete `componentProps.undefined` later
         return [] as any;
@@ -1174,6 +1181,16 @@ async function buildDocs(options: {
       ];
     }),
   );
+  if (propErrors.length > 0) {
+    throw new Error(
+      `There were errors creating prop descriptions:\n${propErrors
+        .map(([propName, error]) => {
+          return `  - ${propName}: ${error}`;
+        })
+        .join('\n')}`,
+    );
+  }
+
   // created by returning the `[]` entry
   delete componentProps.undefined;
 

docs/src/pagesApi.js

@@ -36,6 +36,7 @@ module.exports = [
   { pathname: '/api-docs/date-picker' },
   { pathname: '/api-docs/date-range-picker' },
   { pathname: '/api-docs/date-time-picker' },
+  { pathname: '/api-docs/day-picker' },
   { pathname: '/api-docs/desktop-date-picker' },
   { pathname: '/api-docs/desktop-date-range-picker' },
   { pathname: '/api-docs/desktop-date-time-picker' },

docs/translations/api-docs/date-range-picker/date-range-picker.json

@@ -2,7 +2,7 @@
   "componentDescription": "",
   "propDescriptions": {
     "acceptRegex": "Regular expression to detect "accepted" symbols.",
-    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar.",
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
     "allowSameDateSelection": "If <code>true</code>, <code>onChange</code> is fired on click even if the same date is selected.",
     "calendars": "The number of calendars that render on <strong>desktop</strong>.",
     "cancelText": "Cancel text message.",
@@ -18,11 +18,9 @@
     "disableAutoMonthSwitching": "If <code>true</code>, after selecting <code>start</code> date calendar will not automatically switch to the month of <code>end</code> date.",
     "disableCloseOnSelect": "If <code>true</code> the popup or dialog will immediately close after submitting full date.",
     "disabled": "If <code>true</code>, the picker and text field are disabled.",
-    "disableFuture": "Disable future dates.",
     "disableHighlightToday": "If <code>true</code>, todays date is rendering without highlighting with circle.",
     "disableMaskedInput": "Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.",
     "disableOpenPicker": "Do not render open picker button (renders only text field with validation).",
-    "disablePast": "Disable past dates.",
     "endText": "Text for end input label and toolbar placeholder.",
     "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType",
     "getViewSwitchingButtonText": "Get aria-label text for switching between views button.",

docs/translations/api-docs/date-time-picker/date-time-picker.json

@@ -19,12 +19,10 @@
     "DialogProps": "Props applied to the <a href=\"/api/dialog/\"><code>Dialog</code></a> element.",
     "disableCloseOnSelect": "If <code>true</code> the popup or dialog will immediately close after submitting full date.",
     "disabled": "If <code>true</code>, the picker and text field are disabled.",
-    "disableFuture": "Disable future dates.",
     "disableHighlightToday": "If <code>true</code>, todays date is rendering without highlighting with circle.",
     "disableIgnoringDatePartForTimeValidation": "Do not ignore date part when validating min/max time.",
     "disableMaskedInput": "Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.",
     "disableOpenPicker": "Do not render open picker button (renders only text field with validation).",
-    "disablePast": "Disable past dates.",
     "getClockLabelText": "Accessible text that helps user to understand which time and view is selected.",
     "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType",
     "getViewSwitchingButtonText": "Get aria-label text for switching between views button.",

docs/translations/api-docs/day-picker/day-picker-de.json

@@ -0,0 +1,21 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
+    "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
+    "loading": "If <code>true</code> renders <code>LoadingComponent</code> in calendar instead of calendar view. Can be used to preload information and show it in calendar.",
+    "maxDate": "Max selectable date. @DateIOType",
+    "minDate": "Min selectable date. @DateIOType",
+    "onChange": "Callback fired on date change",
+    "onMonthChange": "Callback firing on month change. @DateIOType",
+    "onViewChange": "Callback fired on view change.",
+    "openTo": "Initially open view.",
+    "reduceAnimations": "Disable heavy animations.",
+    "renderLoading": "Component displaying when passed <code>loading</code> true.",
+    "shouldDisableDate": "Disable specific date. @DateIOType",
+    "shouldDisableYear": "Disable specific years dynamically. Works like <code>shouldDisableDate</code> but for year selection view @DateIOType.",
+    "view": "Controlled open view.",
+    "views": "Views for day picker."
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/day-picker/day-picker-es.json

@@ -0,0 +1,21 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
+    "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
+    "loading": "If <code>true</code> renders <code>LoadingComponent</code> in calendar instead of calendar view. Can be used to preload information and show it in calendar.",
+    "maxDate": "Max selectable date. @DateIOType",
+    "minDate": "Min selectable date. @DateIOType",
+    "onChange": "Callback fired on date change",
+    "onMonthChange": "Callback firing on month change. @DateIOType",
+    "onViewChange": "Callback fired on view change.",
+    "openTo": "Initially open view.",
+    "reduceAnimations": "Disable heavy animations.",
+    "renderLoading": "Component displaying when passed <code>loading</code> true.",
+    "shouldDisableDate": "Disable specific date. @DateIOType",
+    "shouldDisableYear": "Disable specific years dynamically. Works like <code>shouldDisableDate</code> but for year selection view @DateIOType.",
+    "view": "Controlled open view.",
+    "views": "Views for day picker."
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/day-picker/day-picker-fr.json

@@ -0,0 +1,21 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
+    "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
+    "loading": "If <code>true</code> renders <code>LoadingComponent</code> in calendar instead of calendar view. Can be used to preload information and show it in calendar.",
+    "maxDate": "Max selectable date. @DateIOType",
+    "minDate": "Min selectable date. @DateIOType",
+    "onChange": "Callback fired on date change",
+    "onMonthChange": "Callback firing on month change. @DateIOType",
+    "onViewChange": "Callback fired on view change.",
+    "openTo": "Initially open view.",
+    "reduceAnimations": "Disable heavy animations.",
+    "renderLoading": "Component displaying when passed <code>loading</code> true.",
+    "shouldDisableDate": "Disable specific date. @DateIOType",
+    "shouldDisableYear": "Disable specific years dynamically. Works like <code>shouldDisableDate</code> but for year selection view @DateIOType.",
+    "view": "Controlled open view.",
+    "views": "Views for day picker."
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/day-picker/day-picker-ja.json

@@ -0,0 +1,21 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
+    "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
+    "loading": "If <code>true</code> renders <code>LoadingComponent</code> in calendar instead of calendar view. Can be used to preload information and show it in calendar.",
+    "maxDate": "Max selectable date. @DateIOType",
+    "minDate": "Min selectable date. @DateIOType",
+    "onChange": "Callback fired on date change",
+    "onMonthChange": "Callback firing on month change. @DateIOType",
+    "onViewChange": "Callback fired on view change.",
+    "openTo": "Initially open view.",
+    "reduceAnimations": "Disable heavy animations.",
+    "renderLoading": "Component displaying when passed <code>loading</code> true.",
+    "shouldDisableDate": "Disable specific date. @DateIOType",
+    "shouldDisableYear": "Disable specific years dynamically. Works like <code>shouldDisableDate</code> but for year selection view @DateIOType.",
+    "view": "Controlled open view.",
+    "views": "Views for day picker."
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/day-picker/day-picker-pt.json

@@ -0,0 +1,21 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
+    "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
+    "loading": "If <code>true</code> renders <code>LoadingComponent</code> in calendar instead of calendar view. Can be used to preload information and show it in calendar.",
+    "maxDate": "Max selectable date. @DateIOType",
+    "minDate": "Min selectable date. @DateIOType",
+    "onChange": "Callback fired on date change",
+    "onMonthChange": "Callback firing on month change. @DateIOType",
+    "onViewChange": "Callback fired on view change.",
+    "openTo": "Initially open view.",
+    "reduceAnimations": "Disable heavy animations.",
+    "renderLoading": "Component displaying when passed <code>loading</code> true.",
+    "shouldDisableDate": "Disable specific date. @DateIOType",
+    "shouldDisableYear": "Disable specific years dynamically. Works like <code>shouldDisableDate</code> but for year selection view @DateIOType.",
+    "view": "Controlled open view.",
+    "views": "Views for day picker."
+  },
+  "classDescriptions": {}
+}