[core] Sort props ASC

lib/src/CalendarSkeleton.tsx

@@ -43,11 +43,11 @@ export const CalendarSkeleton: React.FC<CalendarSkeletonProps> = withDefaultProp
 
     return (
       <div className={clsx(classes.root, className)} {...other}>
-        {monthMap.map((week, i) => (
-          <div key={i} className={calendarClasses.week}>
-            {week.map((day, i) => (
+        {monthMap.map((week, index) => (
+          <div key={index} className={calendarClasses.week}>
+            {week.map((day, index) => (
               <Skeleton
-                key={i}
+                key={index}
                 variant="circle"
                 width={DAY_SIZE}
                 height={DAY_SIZE}

lib/src/DateRangePicker/DateRangePickerDay.tsx

@@ -97,16 +97,16 @@ const useStyles = makeStyles(
 );
 
 export const PureDateRangeDay = ({
-  day,
   className,
-  selected,
-  isPreviewing,
-  isStartOfPreviewing,
+  day,
+  inCurrentMonth,
+  isEndOfHighlighting,
   isEndOfPreviewing,
   isHighlighting,
-  isEndOfHighlighting,
+  isPreviewing,
   isStartOfHighlighting,
-  inCurrentMonth,
+  isStartOfPreviewing,
+  selected,
   ...other
 }: DateRangeDayProps) => {
   const utils = useUtils();

lib/src/DateRangePicker/DateRangePickerInput.tsx

@@ -78,12 +78,12 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
   open,
   openPicker,
   rawValue,
+  rawValue: [start, end],
   readOnly,
   renderInput,
   setCurrentlySelectingRangeEnd,
   startText,
   TextFieldProps,
-  rawValue: [start, end],
   validationError: [startValidationError, endValidationError],
   ...other
 }) => {

lib/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -38,14 +38,14 @@ interface DateRangePickerToolbarProps
 export const DateRangePickerToolbar: React.FC<DateRangePickerToolbarProps> = withDefaultProps(
   muiComponentConfig,
   ({
+    currentlySelectingRangeEnd,
     date: [start, end],
-    toolbarFormat,
+    endText,
     isMobileKeyboardViewOpen,
-    toggleMobileKeyboardView,
-    currentlySelectingRangeEnd,
     setCurrentlySelectingRangeEnd,
     startText,
-    endText,
+    toggleMobileKeyboardView,
+    toolbarFormat,
     toolbarTitle = 'SELECT DATE RANGE',
   }) => {
     const utils = useUtils();

lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx

@@ -21,7 +21,7 @@ import {
 
 export interface ExportedDesktopDateRangeCalendarProps {
   /**
-   * How many calendars render on **desktop** DateRangePicker
+   * How many calendars render on **desktop** DateRangePicker.
    * @default 2
    */
   calendars?: 1 | 2 | 3;

lib/src/DateRangePicker/DateRangePickerViewMobile.tsx

@@ -28,17 +28,17 @@ interface DesktopDateRangeCalendarProps
 const onlyDateView = ['date'] as ['date'];
 
 export const DateRangePickerViewMobile: React.FC<DesktopDateRangeCalendarProps> = ({
-  date,
   changeMonth,
+  date,
   leftArrowButtonProps,
   leftArrowButtonText,
   leftArrowIcon,
+  maxDate: __maxDate,
+  minDate: __minDate,
+  onChange,
   rightArrowButtonProps,
   rightArrowButtonText,
   rightArrowIcon,
-  onChange,
-  minDate: __minDate,
-  maxDate: __maxDate,
   ...other
 }) => {
   const utils = useUtils();

lib/src/DateTimePicker/DateTimePicker.tsx

@@ -47,16 +47,16 @@ export interface BaseDateTimePickerProps
 
 function useInterceptProps({
   ampm,
-  mask,
   inputFormat,
-  orientation = 'portrait',
-  minTime: __minTime,
-  maxTime: __maxTime,
-  minDate: __minDate = defaultMinDate,
+  mask,
   maxDate: __maxDate = defaultMaxDate,
   maxDateTime: __maxDateTime,
+  maxTime: __maxTime,
+  minDate: __minDate = defaultMinDate,
   minDateTime: __minDateTime,
+  minTime: __minTime,
   openTo = 'date',
+  orientation = 'portrait',
   views = ['year', 'date', 'hours', 'minutes'],
   ...other
 }: BaseDateTimePickerProps & AllSharedPickerProps) {

lib/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -26,10 +26,10 @@ const tabIndexToView = (tab: DateTimePickerView) => {
 };
 
 export interface DateTimePickerTabsProps {
-  view: DateTimePickerView;
-  onChange: (view: DateTimePickerView) => void;
   dateRangeIcon?: React.ReactNode;
+  onChange: (view: DateTimePickerView) => void;
   timeIcon?: React.ReactNode;
+  view: DateTimePickerView;
 }
 
 export const useStyles = makeStyles(
@@ -53,10 +53,10 @@ export const useStyles = makeStyles(
 );
 
 export const DateTimePickerTabs: React.FC<DateTimePickerTabsProps> = ({
-  view,
+  dateRangeIcon = <DateRangeIcon />,
   onChange,
   timeIcon = <TimeIcon />,
-  dateRangeIcon = <DateRangeIcon />,
+  view,
 }) => {
   const classes = useStyles();
   const theme = useTheme();

lib/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -45,17 +45,17 @@ export const useStyles = makeStyles(
 export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = withDefaultProps(
   muiComponentConfig,
   ({
+    ampm,
     date,
+    dateRangeIcon,
+    hideTabs,
+    isMobileKeyboardViewOpen,
     openView,
     setOpenView,
-    ampm,
-    hideTabs,
-    dateRangeIcon,
     timeIcon,
+    toggleMobileKeyboardView,
     toolbarFormat,
     toolbarPlaceholder = '––',
-    isMobileKeyboardViewOpen,
-    toggleMobileKeyboardView,
     toolbarTitle = 'SELECT DATE & TIME',
   }) => {
     const utils = useUtils();

lib/src/Picker/Picker.tsx

@@ -90,20 +90,20 @@ const isTimePickerByViews = (views: DateTimePickerView[]) =>
   !views.some(view => view === 'year' || view === 'month' || view === 'date');
 
 function Picker({
+  className,
   date,
-  openTo = 'date',
-  views = ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
-  toolbarTitle,
-  showToolbar,
-  onDateChange,
-  ToolbarComponent = () => null,
-  orientation,
   DateInputProps,
   isMobileKeyboardViewOpen,
+  onDateChange,
+  openTo = 'date',
+  orientation,
+  showToolbar,
   toggleMobileKeyboardView,
+  ToolbarComponent = () => null,
   toolbarFormat,
-  className,
   toolbarPlaceholder,
+  toolbarTitle,
+  views = ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
   ...other
 }: PickerProps<AnyPickerView>) {
   const classes = useStyles();

lib/src/TimePicker/TimePicker.tsx

@@ -26,10 +26,10 @@ export function getTextFieldAriaText(value: ParsableDate, utils: MuiPickersAdapt
 
 function useInterceptProps({
   ampm,
-  mask,
   inputFormat,
-  minTime: __minTime,
+  mask,
   maxTime: __maxTime,
+  minTime: __minTime,
   openTo = 'hours',
   views = ['hours', 'minutes'],
   ...other

lib/src/TimePicker/TimePickerToolbar.tsx

@@ -77,17 +77,17 @@ const clockTypographyVariant = 'h3';
 export const TimePickerToolbar: React.FC<ToolbarComponentProps> = withDefaultProps(
   muiComponentConfig,
   ({
-    date,
-    views,
     ampm,
-    openView,
-    onChange,
-    isLandscape,
-    setOpenView,
     ampmInClock,
+    date,
+    isLandscape,
     isMobileKeyboardViewOpen,
+    onChange,
+    openView,
+    setOpenView,
     toggleMobileKeyboardView,
     toolbarTitle = 'SELECT TIME',
+    views,
   }) => {
     const utils = useUtils();
     const theme = useTheme();

lib/src/_helpers/time-utils.ts

@@ -125,7 +125,7 @@ export interface TimeValidationProps {
    */
   shouldDisableTime?: (timeValue: number, clockType: 'hours' | 'minutes' | 'seconds') => boolean;
   /**
-   * Do not ignore date part when validating min/max time
+   * Do not ignore date part when validating min/max time.
    * @default false
    */
   disableIgnoringDatePartForTimeValidation?: boolean;

lib/src/_helpers/utils.ts

@@ -11,18 +11,18 @@ export function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems: T | T[]
 
 export const onSpaceOrEnter = (
   innerFn: () => void,
-  onFocus?: (e: React.KeyboardEvent<any>) => void
-) => (e: React.KeyboardEvent) => {
-  if (e.key === 'Enter' || e.key === ' ') {
+  onFocus?: (event: React.KeyboardEvent<any>) => void
+) => (event: React.KeyboardEvent) => {
+  if (event.key === 'Enter' || event.key === ' ') {
     innerFn();
 
     // prevent any side effects
-    e.preventDefault();
-    e.stopPropagation();
+    event.preventDefault();
+    event.stopPropagation();
   }
 
   if (onFocus) {
-    onFocus(e);
+    onFocus(event);
   }
 };
 

lib/src/_shared/ArrowSwitcher.tsx

@@ -8,28 +8,28 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 
 export interface ExportedArrowSwitcherProps {
   /**
-   * Left arrow icon
+   * Left arrow icon.
    */
   leftArrowIcon?: React.ReactNode;
   /**
-   * Right arrow icon
+   * Right arrow icon.
    */
   rightArrowIcon?: React.ReactNode;
   /**
-   * Left arrow icon aria-label text
+   * Left arrow icon aria-label text.
    */
   leftArrowButtonText?: string;
   /**
-   * Right arrow icon aria-label text
+   * Right arrow icon aria-label text.
    */
   rightArrowButtonText?: string;
   /**
-   * Props to pass to left arrow button
+   * Props to pass to left arrow button.
    * @type {Partial<IconButtonProps>}
    */
   leftArrowButtonProps?: Partial<IconButtonProps>;
   /**
-   * Props to pass to right arrow button
+   * Props to pass to right arrow button.
    * @type {Partial<IconButtonProps>}
    */
   rightArrowButtonProps?: Partial<IconButtonProps>;
@@ -47,6 +47,7 @@ interface ArrowSwitcherProps extends ExportedArrowSwitcherProps, React.HTMLProps
 
 export const useStyles = makeStyles(
   theme => ({
+    root: {},
     iconButton: {
       zIndex: 1,
       backgroundColor: theme.palette.background.paper,
@@ -83,7 +84,7 @@ const PureArrowSwitcher: React.FC<ArrowSwitcherProps> = ({
   const isRtl = theme.direction === 'rtl';
 
   return (
-    <div className={className} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       <IconButton
         data-mui-test="previous-arrow-button"
         size="small"

lib/src/_shared/hooks/useIsLandscape.tsx

@@ -29,12 +29,15 @@ export function useIsLandscape(
     getOrientation()
   );
 
-  const eventHandler = React.useCallback(() => setOrientation(getOrientation()), []);
-
   useIsomorphicEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
     window.addEventListener('orientationchange', eventHandler);
-    return () => window.removeEventListener('orientationchange', eventHandler);
-  }, [eventHandler]);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
 
   if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
     // could not display 13:34:44 in landscape mode

lib/src/_shared/hooks/useKeyDown.ts

@@ -5,12 +5,15 @@ export const useIsomorphicEffect =
 
 type KeyHandlers = Record<number, () => void>;
 
-export function runKeyHandler(e: KeyboardEvent | React.KeyboardEvent, keyHandlers: KeyHandlers) {
-  const handler = keyHandlers[e.keyCode];
+export function runKeyHandler(
+  event: KeyboardEvent | React.KeyboardEvent,
+  keyHandlers: KeyHandlers
+) {
+  const handler = keyHandlers[event.keyCode];
   if (handler) {
     handler();
     // if event was handled prevent other side effects (e.g. page scroll)
-    e.preventDefault();
+    event.preventDefault();
   }
 }
 
@@ -19,9 +22,9 @@ export function useKeyDownHandler(active: boolean, keyHandlers: KeyHandlers) {
   keyHandlersRef.current = keyHandlers;
 
   return React.useCallback(
-    (e: React.KeyboardEvent) => {
+    (event: React.KeyboardEvent) => {
       if (active) {
-        runKeyHandler(e, keyHandlersRef.current);
+        runKeyHandler(event, keyHandlersRef.current);
       }
     },
     [active]