[pickers] Remove make* HOCs (#25172)

mui · Mar 12, 2021 · a161dff · a161dff
1 parent ebeb149
commit a161dff
Show file tree

Hide file tree

Showing 28 changed files with 2,036 additions and 478 deletions.
diff --git a/docs/pages/api-docs/date-picker.json b/docs/pages/api-docs/date-picker.json
@@ -2,35 +2,49 @@
   "props": {
     "onChange": { "type": { "name": "func" }, "required": true },
     "renderInput": { "type": { "name": "func" }, "required": true },
-    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "acceptRegex": {
+      "type": { "name": "instanceOf", "description": "RegExp" },
+      "default": "/\\dap/gi"
+    },
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "allowSameDateSelection": { "type": { "name": "bool" } },
-    "cancelText": { "type": { "name": "node" } },
+    "cancelText": { "type": { "name": "node" }, "default": "\"CANCEL\"" },
     "className": { "type": { "name": "string" } },
     "clearable": { "type": { "name": "bool" } },
-    "clearText": { "type": { "name": "node" } },
+    "clearText": { "type": { "name": "node" }, "default": "\"CLEAR\"" },
     "components": {
       "type": {
         "name": "shape",
         "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType, SwitchViewButton?: elementType, SwitchViewIcon?: elementType }"
-      }
+      },
+      "default": "{}"
     },
-    "componentsProps": { "type": { "name": "object" } },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultCalendarMonth": { "type": { "name": "any" } },
+    "desktopModeMediaQuery": {
+      "type": { "name": "string" },
+      "default": "\"@media (pointer: fine)\""
+    },
     "DialogProps": { "type": { "name": "object" } },
-    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disableCloseOnSelect": {
+      "type": { "name": "bool" },
+      "default": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
+    },
     "disabled": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": {
+      "type": { "name": "func" },
+      "default": "(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`"
+    },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },
     "leftArrowButtonText": { "type": { "name": "string" } },
     "loading": { "type": { "name": "bool" } },
     "mask": { "type": { "name": "string" } },
-    "okText": { "type": { "name": "node" } },
+    "okText": { "type": { "name": "node" }, "default": "\"OK\"" },
     "onAccept": { "type": { "name": "func" } },
     "onClose": { "type": { "name": "func" } },
     "onError": { "type": { "name": "func" } },
@@ -50,22 +64,30 @@
     "orientation": {
       "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
     },
+    "PopperProps": { "type": { "name": "object" } },
     "readOnly": { "type": { "name": "bool" } },
-    "reduceAnimations": { "type": { "name": "bool" } },
+    "reduceAnimations": {
+      "type": { "name": "bool" },
+      "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)"
+    },
     "renderDay": { "type": { "name": "func" } },
-    "renderLoading": { "type": { "name": "func" } },
+    "renderLoading": {
+      "type": { "name": "func" },
+      "default": "() => <span data-mui-test=\"loading-progress\">...</span>"
+    },
     "rifmFormatter": { "type": { "name": "func" } },
     "rightArrowButtonText": { "type": { "name": "string" } },
     "shouldDisableDate": { "type": { "name": "func" } },
     "shouldDisableYear": { "type": { "name": "func" } },
     "showDaysOutsideCurrentMonth": { "type": { "name": "bool" } },
     "showTodayButton": { "type": { "name": "bool" } },
     "showToolbar": { "type": { "name": "bool" } },
-    "todayText": { "type": { "name": "node" } },
+    "todayText": { "type": { "name": "node" }, "default": "\"TODAY\"" },
     "ToolbarComponent": { "type": { "name": "elementType" } },
     "toolbarFormat": { "type": { "name": "string" } },
-    "toolbarPlaceholder": { "type": { "name": "node" } },
-    "toolbarTitle": { "type": { "name": "node" } },
+    "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"–\"" },
+    "toolbarTitle": { "type": { "name": "node" }, "default": "\"SELECT DATE\"" },
+    "TransitionComponent": { "type": { "name": "elementType" } },
     "value": {
       "type": {
         "name": "union",

diff --git a/docs/pages/api-docs/date-time-picker.json b/docs/pages/api-docs/date-time-picker.json
@@ -2,34 +2,50 @@
   "props": {
     "onChange": { "type": { "name": "func" }, "required": true },
     "renderInput": { "type": { "name": "func" }, "required": true },
-    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "acceptRegex": {
+      "type": { "name": "instanceOf", "description": "RegExp" },
+      "default": "/\\dap/gi"
+    },
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "allowSameDateSelection": { "type": { "name": "bool" } },
     "ampm": { "type": { "name": "bool" } },
     "ampmInClock": { "type": { "name": "bool" } },
-    "cancelText": { "type": { "name": "node" } },
+    "cancelText": { "type": { "name": "node" }, "default": "\"CANCEL\"" },
     "className": { "type": { "name": "string" } },
     "clearable": { "type": { "name": "bool" } },
-    "clearText": { "type": { "name": "node" } },
+    "clearText": { "type": { "name": "node" }, "default": "\"CLEAR\"" },
     "components": {
       "type": {
         "name": "shape",
         "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType, SwitchViewButton?: elementType, SwitchViewIcon?: elementType }"
-      }
+      },
+      "default": "{}"
     },
-    "componentsProps": { "type": { "name": "object" } },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
     "defaultCalendarMonth": { "type": { "name": "any" } },
-    "desktopModeMediaQuery": { "type": { "name": "string" } },
+    "desktopModeMediaQuery": {
+      "type": { "name": "string" },
+      "default": "\"@media (pointer: fine)\""
+    },
     "DialogProps": { "type": { "name": "object" } },
-    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disableCloseOnSelect": {
+      "type": { "name": "bool" },
+      "default": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
+    },
     "disabled": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "getClockLabelText": { "type": { "name": "func" } },
-    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "getClockLabelText": {
+      "type": { "name": "func" },
+      "default": "<TDate extends any>(\n  view: 'hours' | 'minutes' | 'seconds',\n  time: TDate,\n  adapter: MuiPickersAdapter<TDate>,\n) => `Select ${view}. Selected time is ${adapter.format(time, 'fullTime')}`"
+    },
+    "getOpenDialogAriaText": {
+      "type": { "name": "func" },
+      "default": "(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`"
+    },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },
     "hideTabs": { "type": { "name": "bool" } },
     "InputAdornmentProps": { "type": { "name": "object" } },
@@ -49,8 +65,8 @@
         "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
       }
     },
-    "minutesStep": { "type": { "name": "number" } },
-    "okText": { "type": { "name": "node" } },
+    "minutesStep": { "type": { "name": "number" }, "default": "1" },
+    "okText": { "type": { "name": "node" }, "default": "\"OK\"" },
     "onAccept": { "type": { "name": "func" } },
     "onClose": { "type": { "name": "func" } },
     "onError": { "type": { "name": "func" } },
@@ -72,9 +88,15 @@
     },
     "PopperProps": { "type": { "name": "object" } },
     "readOnly": { "type": { "name": "bool" } },
-    "reduceAnimations": { "type": { "name": "bool" } },
+    "reduceAnimations": {
+      "type": { "name": "bool" },
+      "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)"
+    },
     "renderDay": { "type": { "name": "func" } },
-    "renderLoading": { "type": { "name": "func" } },
+    "renderLoading": {
+      "type": { "name": "func" },
+      "default": "() => <span data-mui-test=\"loading-progress\">...</span>"
+    },
     "rifmFormatter": { "type": { "name": "func" } },
     "rightArrowButtonText": { "type": { "name": "string" } },
     "shouldDisableDate": { "type": { "name": "func" } },
@@ -84,11 +106,11 @@
     "showTodayButton": { "type": { "name": "bool" } },
     "showToolbar": { "type": { "name": "bool" } },
     "timeIcon": { "type": { "name": "node" } },
-    "todayText": { "type": { "name": "node" } },
+    "todayText": { "type": { "name": "node" }, "default": "\"TODAY\"" },
     "ToolbarComponent": { "type": { "name": "elementType" } },
     "toolbarFormat": { "type": { "name": "string" } },
-    "toolbarPlaceholder": { "type": { "name": "node" } },
-    "toolbarTitle": { "type": { "name": "node" } },
+    "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"–\"" },
+    "toolbarTitle": { "type": { "name": "node" }, "default": "\"SELECT DATE\"" },
     "TransitionComponent": { "type": { "name": "elementType" } },
     "value": {
       "type": {

diff --git a/docs/pages/api-docs/desktop-date-picker.json b/docs/pages/api-docs/desktop-date-picker.json
@@ -2,24 +2,34 @@
   "props": {
     "onChange": { "type": { "name": "func" }, "required": true },
     "renderInput": { "type": { "name": "func" }, "required": true },
-    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "acceptRegex": {
+      "type": { "name": "instanceOf", "description": "RegExp" },
+      "default": "/\\dap/gi"
+    },
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "allowSameDateSelection": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": {
       "type": {
         "name": "shape",
         "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType, SwitchViewButton?: elementType, SwitchViewIcon?: elementType }"
-      }
+      },
+      "default": "{}"
     },
-    "componentsProps": { "type": { "name": "object" } },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultCalendarMonth": { "type": { "name": "any" } },
-    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disableCloseOnSelect": {
+      "type": { "name": "bool" },
+      "default": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
+    },
     "disabled": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": {
+      "type": { "name": "func" },
+      "default": "(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`"
+    },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },
@@ -47,9 +57,15 @@
     },
     "PopperProps": { "type": { "name": "object" } },
     "readOnly": { "type": { "name": "bool" } },
-    "reduceAnimations": { "type": { "name": "bool" } },
+    "reduceAnimations": {
+      "type": { "name": "bool" },
+      "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)"
+    },
     "renderDay": { "type": { "name": "func" } },
-    "renderLoading": { "type": { "name": "func" } },
+    "renderLoading": {
+      "type": { "name": "func" },
+      "default": "() => <span data-mui-test=\"loading-progress\">...</span>"
+    },
     "rifmFormatter": { "type": { "name": "func" } },
     "rightArrowButtonText": { "type": { "name": "string" } },
     "shouldDisableDate": { "type": { "name": "func" } },
@@ -58,8 +74,8 @@
     "showToolbar": { "type": { "name": "bool" } },
     "ToolbarComponent": { "type": { "name": "elementType" } },
     "toolbarFormat": { "type": { "name": "string" } },
-    "toolbarPlaceholder": { "type": { "name": "node" } },
-    "toolbarTitle": { "type": { "name": "node" } },
+    "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"–\"" },
+    "toolbarTitle": { "type": { "name": "node" }, "default": "\"SELECT DATE\"" },
     "TransitionComponent": { "type": { "name": "elementType" } },
     "value": {
       "type": {

diff --git a/docs/pages/api-docs/desktop-date-time-picker.json b/docs/pages/api-docs/desktop-date-time-picker.json
@@ -2,7 +2,10 @@
   "props": {
     "onChange": { "type": { "name": "func" }, "required": true },
     "renderInput": { "type": { "name": "func" }, "required": true },
-    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "acceptRegex": {
+      "type": { "name": "instanceOf", "description": "RegExp" },
+      "default": "/\\dap/gi"
+    },
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "allowSameDateSelection": { "type": { "name": "bool" } },
     "ampm": { "type": { "name": "bool" } },
@@ -12,19 +15,29 @@
       "type": {
         "name": "shape",
         "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType, SwitchViewButton?: elementType, SwitchViewIcon?: elementType }"
-      }
+      },
+      "default": "{}"
     },
-    "componentsProps": { "type": { "name": "object" } },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
     "defaultCalendarMonth": { "type": { "name": "any" } },
-    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disableCloseOnSelect": {
+      "type": { "name": "bool" },
+      "default": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
+    },
     "disabled": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "getClockLabelText": { "type": { "name": "func" } },
-    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "getClockLabelText": {
+      "type": { "name": "func" },
+      "default": "<TDate extends any>(\n  view: 'hours' | 'minutes' | 'seconds',\n  time: TDate,\n  adapter: MuiPickersAdapter<TDate>,\n) => `Select ${view}. Selected time is ${adapter.format(time, 'fullTime')}`"
+    },
+    "getOpenDialogAriaText": {
+      "type": { "name": "func" },
+      "default": "(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`"
+    },
     "getViewSwitchingButtonText": { "type": { "name": "func" } },
     "hideTabs": { "type": { "name": "bool" } },
     "InputAdornmentProps": { "type": { "name": "object" } },
@@ -44,7 +57,7 @@
         "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
       }
     },
-    "minutesStep": { "type": { "name": "number" } },
+    "minutesStep": { "type": { "name": "number" }, "default": "1" },
     "onAccept": { "type": { "name": "func" } },
     "onClose": { "type": { "name": "func" } },
     "onError": { "type": { "name": "func" } },
@@ -66,9 +79,15 @@
     },
     "PopperProps": { "type": { "name": "object" } },
     "readOnly": { "type": { "name": "bool" } },
-    "reduceAnimations": { "type": { "name": "bool" } },
+    "reduceAnimations": {
+      "type": { "name": "bool" },
+      "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)"
+    },
     "renderDay": { "type": { "name": "func" } },
-    "renderLoading": { "type": { "name": "func" } },
+    "renderLoading": {
+      "type": { "name": "func" },
+      "default": "() => <span data-mui-test=\"loading-progress\">...</span>"
+    },
     "rifmFormatter": { "type": { "name": "func" } },
     "rightArrowButtonText": { "type": { "name": "string" } },
     "shouldDisableDate": { "type": { "name": "func" } },
@@ -79,8 +98,8 @@
     "timeIcon": { "type": { "name": "node" } },
     "ToolbarComponent": { "type": { "name": "elementType" } },
     "toolbarFormat": { "type": { "name": "string" } },
-    "toolbarPlaceholder": { "type": { "name": "node" } },
-    "toolbarTitle": { "type": { "name": "node" } },
+    "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"–\"" },
+    "toolbarTitle": { "type": { "name": "node" }, "default": "\"SELECT DATE\"" },
     "TransitionComponent": { "type": { "name": "elementType" } },
     "value": {
       "type": {