baseui 10.9.1 → 10.11.0

package/datepicker/styled-components.js.flow

@@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
+import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
-import type {SharedStylePropsT, CalendarPropsT} from './types.js';
-import {ORIENTATION, DENSITY} from './constants.js';
+import type { SharedStylePropsT, CalendarPropsT } from './types.js';
+import { ORIENTATION, DENSITY } from './constants.js';
 
 /**
  * Main component container element
@@ -16,37 +16,35 @@ import {ORIENTATION, DENSITY} from './constants.js';
 export const StyledInputWrapper = styled<{
   ...SharedStylePropsT,
   $separateRangeInputs: boolean,
-}>('div', props => {
-  const {$separateRangeInputs} = props;
+}>('div', (props) => {
+  const { $separateRangeInputs } = props;
 
   return {
     width: '100%',
-    ...($separateRangeInputs
-      ? {display: 'flex', justifyContent: 'center'}
-      : {}),
+    ...($separateRangeInputs ? { display: 'flex', justifyContent: 'center' } : {}),
   };
 });
 
-export const StyledInputLabel = styled<{}>('div', ({$theme}) => ({
+export const StyledInputLabel = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.LabelMedium,
   marginBottom: $theme.sizing.scale300,
 }));
 
-export const StyledStartDate = styled<{}>('div', ({$theme}) => ({
+export const StyledStartDate = styled<{}>('div', ({ $theme }) => ({
   width: '100%',
   marginRight: $theme.sizing.scale300,
 }));
 
-export const StyledEndDate = styled<{}>('div', ({$theme}) => ({
+export const StyledEndDate = styled<{}>('div', ({ $theme }) => ({
   width: '100%',
 }));
 
 /**
  * Main component container element
  */
-export const StyledRoot = styled<SharedStylePropsT>('div', props => {
+export const StyledRoot = styled<SharedStylePropsT>('div', (props) => {
   const {
-    $theme: {typography, colors, borders},
+    $theme: { typography, colors, borders },
   } = props;
   return {
     ...typography.font200,
@@ -63,53 +61,44 @@ export const StyledRoot = styled<SharedStylePropsT>('div', props => {
 
 export const StyledMonthContainer = styled<{
   $orientation: $PropertyType<CalendarPropsT<Date>, 'orientation'>,
-}>('div', props => {
-  const {$orientation} = props;
+}>('div', (props) => {
+  const { $orientation } = props;
   return {
     display: 'flex',
     flexDirection: $orientation === ORIENTATION.vertical ? 'column' : 'row',
   };
 });
 
-export const StyledCalendarContainer = styled<SharedStylePropsT>(
-  'div',
-  props => {
-    const {
-      $theme: {sizing},
-      $density,
-    } = props;
-    return {
-      paddingTop: sizing.scale300,
-      paddingBottom:
-        $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
-      paddingLeft: sizing.scale500,
-      paddingRight: sizing.scale500,
-    };
-  },
-);
+export const StyledCalendarContainer = styled<SharedStylePropsT>('div', (props) => {
+  const {
+    $theme: { sizing },
+    $density,
+  } = props;
+  return {
+    paddingTop: sizing.scale300,
+    paddingBottom: $density === DENSITY.high ? sizing.scale400 : sizing.scale300,
+    paddingLeft: sizing.scale500,
+    paddingRight: sizing.scale500,
+  };
+});
 
-export const StyledSelectorContainer = styled<SharedStylePropsT>(
-  'div',
-  ({$theme}) => {
-    const textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
-    return {
-      marginBottom: $theme.sizing.scale600,
-      paddingLeft: $theme.sizing.scale600,
-      paddingRight: $theme.sizing.scale600,
-      textAlign,
-    };
-  },
-);
+export const StyledSelectorContainer = styled<SharedStylePropsT>('div', ({ $theme }) => {
+  const textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
+  return {
+    marginBottom: $theme.sizing.scale600,
+    paddingLeft: $theme.sizing.scale600,
+    paddingRight: $theme.sizing.scale600,
+    textAlign,
+  };
+});
 
-export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
+export const StyledCalendarHeader = styled<SharedStylePropsT>('div', (props) => {
   const {
-    $theme: {typography, borders, colors, sizing},
+    $theme: { typography, borders, colors, sizing },
     $density,
   } = props;
   return {
-    ...($density === DENSITY.high
-      ? typography.LabelMedium
-      : typography.LabelLarge),
+    ...($density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge),
     color: colors.calendarHeaderForeground,
     display: 'flex',
     justifyContent: 'space-between',
@@ -125,13 +114,11 @@ export const StyledCalendarHeader = styled<SharedStylePropsT>('div', props => {
     borderBottomLeftRadius: 0,
     // account for the left/right arrow heights
     minHeight:
-      $density === DENSITY.high
-        ? `calc(${sizing.scale800} + ${sizing.scale0})`
-        : sizing.scale950,
+      $density === DENSITY.high ? `calc(${sizing.scale800} + ${sizing.scale0})` : sizing.scale950,
   };
 });
 
-export const StyledMonthHeader = styled<SharedStylePropsT>('div', props => {
+export const StyledMonthHeader = styled<SharedStylePropsT>('div', (props) => {
   return {
     color: props.$theme.colors.calendarHeaderForeground,
     backgroundColor: props.$theme.colors.calendarHeaderBackground,
@@ -139,38 +126,32 @@ export const StyledMonthHeader = styled<SharedStylePropsT>('div', props => {
   };
 });
 
-export const StyledMonthYearSelectButton = styled<SharedStylePropsT>(
-  'button',
-  props => {
-    const {
-      $theme: {typography, colors},
-      $isFocusVisible,
-      $density,
-    } = props;
-    return {
-      ...($density === DENSITY.high
-        ? typography.LabelMedium
-        : typography.LabelLarge),
-      alignItems: 'center',
-      backgroundColor: 'transparent',
-      borderLeftWidth: 0,
-      borderRightWidth: 0,
-      borderTopWidth: 0,
-      borderBottomWidth: 0,
-      color: colors.calendarHeaderForeground,
-      cursor: 'pointer',
-      display: 'flex',
-      outline: 'none',
-      ':focus': {
-        boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
-      },
-    };
-  },
-);
+export const StyledMonthYearSelectButton = styled<SharedStylePropsT>('button', (props) => {
+  const {
+    $theme: { typography, colors },
+    $isFocusVisible,
+    $density,
+  } = props;
+  return {
+    ...($density === DENSITY.high ? typography.LabelMedium : typography.LabelLarge),
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    color: colors.calendarHeaderForeground,
+    cursor: 'pointer',
+    display: 'flex',
+    outline: 'none',
+    ':focus': {
+      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+    },
+  };
+});
 
-export const StyledMonthYearSelectIconContainer = styled<{}>('span', props => {
-  const marginDirection: string =
-    props.$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+export const StyledMonthYearSelectIconContainer = styled<{}>('span', (props) => {
+  const marginDirection: string = props.$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     alignItems: 'center',
     display: 'flex',
@@ -178,7 +159,7 @@ export const StyledMonthYearSelectIconContainer = styled<{}>('span', props => {
   };
 });
 
-function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
+function getArrowBtnStyle({ $theme, $disabled, $isFocusVisible }) {
   return {
     boxSizing: 'border-box',
     display: 'flex',
@@ -201,35 +182,24 @@ function getArrowBtnStyle({$theme, $disabled, $isFocusVisible}) {
     ':focus': $disabled
       ? {}
       : {
-          boxShadow: $isFocusVisible
-            ? `0 0 0 3px ${$theme.colors.accent}`
-            : 'none',
+          boxShadow: $isFocusVisible ? `0 0 0 3px ${$theme.colors.accent}` : 'none',
         },
   };
 }
 
-export const StyledPrevButton = styled<SharedStylePropsT>(
-  'button',
-  getArrowBtnStyle,
-);
+export const StyledPrevButton = styled<SharedStylePropsT>('button', getArrowBtnStyle);
 
-export const StyledNextButton = styled<SharedStylePropsT>(
-  'button',
-  getArrowBtnStyle,
-);
+export const StyledNextButton = styled<SharedStylePropsT>('button', getArrowBtnStyle);
 
-export const StyledMonth = styled<SharedStylePropsT>(
-  'div',
-  (props: SharedStylePropsT) => {
-    return {
-      display: 'inline-block',
-    };
-  },
-);
+export const StyledMonth = styled<SharedStylePropsT>('div', (props: SharedStylePropsT) => {
+  return {
+    display: 'inline-block',
+  };
+});
 
-export const StyledWeek = styled<SharedStylePropsT>('div', props => {
+export const StyledWeek = styled<SharedStylePropsT>('div', (props) => {
   const {
-    $theme: {sizing},
+    $theme: { sizing },
   } = props;
   return {
     whiteSpace: 'nowrap',
@@ -239,10 +209,8 @@ export const StyledWeek = styled<SharedStylePropsT>('div', props => {
 });
 
 function generateDayStyles(defaultCode: string, defaultStyle) {
-  const codeForSM =
-    defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
-  const codeForEM =
-    defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
+  const codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
+  const codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
   return {
     [defaultCode]: defaultStyle,
     [codeForSM]: defaultStyle,
@@ -250,17 +218,17 @@ function generateDayStyles(defaultCode: string, defaultStyle) {
   };
 }
 
-// eslint-disable-next-line flowtype/no-weak-types
-function getDayStyles(code, {colors}): any {
+// flowlint-next-line unclear-type:off
+function getDayStyles(code, { colors }): any {
   const undefinedDayStyle = {
-    ':before': {content: null},
-    ':after': {content: null},
+    ':before': { content: null },
+    ':after': { content: null },
   };
   let defaultDayStyle = undefinedDayStyle;
   const disabledDateStyle = {
     color: colors.calendarForegroundDisabled,
-    ':before': {content: null},
-    ':after': {content: null},
+    ':before': { content: null },
+    ':after': { content: null },
   };
   const outsideMonthDateStyle = {
     color: colors.calendarForegroundDisabled,
@@ -283,7 +251,7 @@ function getDayStyles(code, {colors}): any {
     },
   };
   const highlightedStyle = {
-    ':before': {content: null},
+    ':before': { content: null },
   };
   const CODE_DISABLED_INDEX = 1;
   if (code && code[CODE_DISABLED_INDEX] === '1') {
@@ -310,14 +278,14 @@ function getDayStyles(code, {colors}): any {
     {
       '010000000000000': {
         color: colors.calendarForegroundDisabled,
-        ':after': {content: null},
+        ':after': { content: null },
       },
     },
     // disabled highlighted date
     {
       '011000000000000': {
         color: colors.calendarForegroundDisabled,
-        ':after': {content: null},
+        ':after': { content: null },
       },
     },
     // date outside of the currently displayed month (when peekNextMonth is true)
@@ -334,16 +302,16 @@ function getDayStyles(code, {colors}): any {
     // when single date selected in a range
     generateDayStyles('101100000000000', {
       color: colors.calendarDayForegroundSelectedHighlighted,
-      ':before': {content: null},
+      ':before': { content: null },
     }),
     // range: selected start and end dates are the same
     generateDayStyles('100111100000000', {
       color: colors.calendarDayForegroundSelected,
-      ':before': {content: null},
+      ':before': { content: null },
     }),
     generateDayStyles('101111100000000', {
       color: colors.calendarDayForegroundSelectedHighlighted,
-      ':before': {content: null},
+      ':before': { content: null },
     }),
     // range: selected start date
     generateDayStyles('100111000000000', {
@@ -352,7 +320,7 @@ function getDayStyles(code, {colors}): any {
     // range: selected end date
     generateDayStyles('100110100000000', {
       color: colors.calendarDayForegroundSelected,
-      ':before': {left: null, right: '50%'},
+      ':before': { left: null, right: '50%' },
     }),
     // range: first selected date while a range is highlighted but no second date selected yet
     // highlighted range on the right from the selected
@@ -362,20 +330,20 @@ function getDayStyles(code, {colors}): any {
     // highlighted range on the left from the selected
     generateDayStyles('100100001001000', {
       color: colors.calendarDayForegroundSelected,
-      ':before': {left: null, right: '50%'},
+      ':before': { left: null, right: '50%' },
     }),
     // range: second date in a range that is highlighted but not selected
     generateDayStyles('101000001010000', {
-      ':before': {left: null, right: '50%'},
+      ':before': { left: null, right: '50%' },
     }),
-    {'101000001001000': {}},
-    {'101000001001100': {}},
-    {'101000001001010': {}},
+    { '101000001001000': {} },
+    { '101000001001100': {} },
+    { '101000001001010': {} },
     // range: pseudo-selected date
     generateDayStyles('100010010000000', {
       color: colors.calendarDayForegroundPseudoSelected,
-      ':before': {left: '0', width: '100%'},
-      ':after': {content: null},
+      ':before': { left: '0', width: '100%' },
+      ':after': { content: null },
     }),
     // range: pseudo-highlighted date (in a range where only one date is
     // selected and second date is highlighted)
@@ -408,12 +376,12 @@ function getDayStyles(code, {colors}): any {
     // highlighted end date in a range
     generateDayStyles('101110100000000', {
       color: colors.calendarDayForegroundSelectedHighlighted,
-      ':before': {left: null, right: '50%'},
+      ':before': { left: null, right: '50%' },
     }),
     // range: pseudo-selected date
     generateDayStyles('101010010000000', {
       color: colors.calendarDayForegroundPseudoSelectedHighlighted,
-      ':before': {left: '0', width: '100%'},
+      ':before': { left: '0', width: '100%' },
     }),
     // Range is true Date outside current month (when peekNextMonth is true)
     generateDayStyles('100000000000001', outsideMonthDateStyle),
@@ -422,12 +390,12 @@ function getDayStyles(code, {colors}): any {
     // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on left
     generateDayStyles('100000001001001', outsideMonthDateStyle),
     // peekNextMonth is true, date is outside month, range is selected
-    generateDayStyles('100010000000001', outsideMonthDateStyle),
+    generateDayStyles('100010000000001', outsideMonthDateStyle)
   );
   return dayStateStyle[code] || defaultDayStyle;
 }
 
-export const StyledDay = styled<SharedStylePropsT>('div', props => {
+export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
   const {
     $disabled,
     $isFocusVisible,
@@ -440,7 +408,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
     $outsideMonthWithinRange,
     $hasDateLabel,
     $density,
-    $theme: {colors, typography, sizing},
+    $theme: { colors, typography, sizing },
   } = props;
   const code = getDayStateCode(props);
 
@@ -460,13 +428,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
   }
 
   return ({
-    ...($density === DENSITY.high
-      ? typography.ParagraphSmall
-      : typography.ParagraphMedium),
+    ...($density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium),
     boxSizing: 'border-box',
     position: 'relative',
-    cursor:
-      $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer',
+    cursor: $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer',
     color: colors.calendarForeground,
     display: 'inline-block',
     width: $density === DENSITY.high ? '42px' : '50px',
@@ -505,11 +470,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
         : $pseudoSelected && $isHighlighted
         ? colors.calendarDayBackgroundPseudoSelectedHighlighted
         : colors.calendarBackground,
-      height: $hasDateLabel
-        ? '100%'
-        : $density === DENSITY.high
-        ? '42px'
-        : '50px',
+      height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',
       position: 'absolute',
       top: $hasDateLabel ? 0 : '-1px',
@@ -533,7 +494,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       borderBottomLeftRadius: $hasDateLabel ? sizing.scale800 : '100%',
       borderBottomRightRadius: $hasDateLabel ? sizing.scale800 : '100%',
       ...(getDayStyles(code, props.$theme)[':after'] || {}),
-      ...($outsideMonthWithinRange ? {content: null} : {}),
+      ...($outsideMonthWithinRange ? { content: null } : {}),
     },
     ...($range
       ? {
@@ -574,14 +535,14 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
           },
         }
       : // a hack to make flow happy, otherwise it complains about complexity
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         ({}: any)),
   }: {});
 });
 
-export const StyledDayLabel = styled<SharedStylePropsT>('div', props => {
+export const StyledDayLabel = styled<SharedStylePropsT>('div', (props) => {
   const {
-    $theme: {typography, colors},
+    $theme: { typography, colors },
     $selected,
   } = props;
   return {
@@ -590,9 +551,9 @@ export const StyledDayLabel = styled<SharedStylePropsT>('div', props => {
   };
 });
 
-export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', props => {
+export const StyledWeekdayHeader = styled<SharedStylePropsT>('div', (props) => {
   const {
-    $theme: {typography, colors, sizing},
+    $theme: { typography, colors, sizing },
     $density,
   } = props;
   return ({

package/datepicker/types.js.flow

@@ -7,21 +7,21 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {SizeT} from '../input/types.js';
-import {ORIENTATION, STATE_CHANGE_TYPE, DENSITY} from './constants.js';
-import type {DateIOAdapter} from './utils/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { SizeT } from '../input/types.js';
+import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';
+import type { DateIOAdapter } from './utils/types.js';
 import type {
   TimePickerPropsT as TimePickerPropsTBase,
   TimePickerStateT as TimePickerStateTBase,
 } from '../timepicker/types.js';
 
-import type {OptionT} from '../select/index.js';
+import type { OptionT } from '../select/index.js';
 
-// eslint-disable-next-line flowtype/no-weak-types
+// flowlint-next-line unclear-type:off
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-type onChangeT<T> = ({date: ?T | Array<T>}) => mixed;
+type onChangeT<T> = ({ date: ?T | Array<T> }) => mixed;
 
 export type DensityT = $Keys<typeof DENSITY>;
 
@@ -80,12 +80,12 @@ export type DayPropsT<T = Date> = {
   adapter: DateIOAdapter<T>,
   minDate: ?T,
   month: ?number,
-  onBlur: ({event: Event, date: T}) => mixed,
-  onFocus: ({event: Event, date: T}) => mixed,
-  onSelect: ({date: ?T | Array<T>}) => mixed,
-  onClick: ({event: Event, date: T}) => mixed,
-  onMouseOver: ({event: Event, date: T}) => mixed,
-  onMouseLeave: ({event: Event, date: T}) => mixed,
+  onBlur: ({ event: Event, date: T }) => mixed,
+  onFocus: ({ event: Event, date: T }) => mixed,
+  onSelect: ({ date: ?T | Array<T> }) => mixed,
+  onClick: ({ event: Event, date: T }) => mixed,
+  onMouseOver: ({ event: Event, date: T }) => mixed,
+  onMouseLeave: ({ event: Event, date: T }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
   value: ?T | Array<T>,
@@ -112,11 +112,11 @@ export type WeekPropsT<T = Date> = {
   minDate: ?T,
   adapter: DateIOAdapter<T>,
   month: ?number,
-  onDayBlur: ({date: T, event: Event}) => mixed,
-  onDayClick: ({date: T, event: Event}) => mixed,
-  onDayFocus: ({date: T, event: Event}) => mixed,
-  onDayMouseOver: ({date: T, event: Event}) => mixed,
-  onDayMouseLeave: ({date: T, event: Event}) => mixed,
+  onDayBlur: ({ date: T, event: Event }) => mixed,
+  onDayClick: ({ date: T, event: Event }) => mixed,
+  onDayFocus: ({ date: T, event: Event }) => mixed,
+  onDayMouseOver: ({ date: T, event: Event }) => mixed,
+  onDayMouseLeave: ({ date: T, event: Event }) => mixed,
   onChange?: onChangeT<T>,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
@@ -163,21 +163,21 @@ export type CalendarPropsT<T = Date> = {
   maxDate?: ?T,
   /** A min date that is selectable. */
   minDate?: ?T,
-  adapter: DateIOAdapter<T>,
+  adapter?: DateIOAdapter<T>,
   /** A number of months rendered in the calendar. */
   monthsShown?: number,
   /** Day's `click` event handler. */
-  onDayClick?: ({date: T, event: Event}) => mixed,
+  onDayClick?: ({ date: T, event: Event }) => mixed,
   /** Day's `focus` event handler. */
-  onDayFocus?: ({date: T, event: Event}) => mixed,
+  onDayFocus?: ({ date: T, event: Event }) => mixed,
   /** Day's `mouseover` event handler. */
-  onDayMouseOver?: ({date: T, event: Event}) => mixed,
+  onDayMouseOver?: ({ date: T, event: Event }) => mixed,
   /** Day's `mouseleave` event handler. */
-  onDayMouseLeave?: ({date: T, event: Event}) => mixed,
+  onDayMouseLeave?: ({ date: T, event: Event }) => mixed,
   /** Event handler that is called when the current rendered month is changed. */
-  onMonthChange?: ({date: T}) => mixed,
+  onMonthChange?: ({ date: T }) => mixed,
   /** Event handler that is called when the current rendered month's year is changed. */
-  onYearChange?: ({date: T}) => mixed,
+  onYearChange?: ({ date: T }) => mixed,
   /** Event handler that is called when a new date is selected. */
   onChange?: onChangeT<T>,
   /** Event handler that is called when a selection is made using the quick select menu. */
@@ -238,7 +238,7 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
 };
 
 export type SharedStylePropsT = {
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   $date: any,
   $disabled: ?boolean,
   $density: DensityT,
@@ -286,17 +286,17 @@ export type NavigationContainerStateT<T = Date> = {
 export type StateReducerT<T = Date> = (
   stateType: StateChangeTypeT,
   nextState: ContainerStateT<T>,
-  currentState: ContainerStateT<T>,
+  currentState: ContainerStateT<T>
 ) => ContainerStateT<T>;
 
 export type NavigationContainerStateReducerT<T = Date> = (
   stateType: StateChangeTypeT,
   nextState: NavigationContainerStateT<T>,
-  currentState: NavigationContainerStateT<T>,
+  currentState: NavigationContainerStateT<T>
 ) => NavigationContainerStateT<T>;
 
 export type StatefulContainerPropsT<PropsT, T = Date> = {
-  children: PropsT => React.Node,
+  children: (PropsT) => React.Node,
   /** Initial state of an uncontrolled datepicker component. */
   initialState: ContainerStateT<T>,
   /** A state change handler. */
@@ -314,15 +314,15 @@ export type NavigationContainerPropsT<T = Date> = {
   range?: boolean,
   highlightedDate?: ?Date,
   /** Day's `mouseover` event handler. */
-  onDayMouseOver: (params: {date: Date, event: Event}) => mixed,
+  onDayMouseOver: (params: { date: Date, event: Event }) => mixed,
   /** Day's `mouseleave` event handler. */
-  onDayMouseLeave: (params: {date: Date, event: Event}) => mixed,
+  onDayMouseLeave: (params: { date: Date, event: Event }) => mixed,
   /** Event handler that is called when a new date is selected. */
   onChange: onChangeT<T>,
   /** Event handler that is called when the current rendered month is changed. */
-  onMonthChange?: ({date: T}) => mixed,
+  onMonthChange?: ({ date: T }) => mixed,
   /** Event handler that is called when the current rendered year is changed. */
-  onYearChange?: ({date: T}) => mixed,
+  onYearChange?: ({ date: T }) => mixed,
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
   value?: ?T | Array<T>,
   stateReducer: NavigationContainerStateReducerT<T>,
@@ -332,8 +332,8 @@ export type NavigationContainerPropsT<T = Date> = {
 export type StatefulDatepickerPropsT<PropsT, T = Date> = $Diff<
   StatefulContainerPropsT<PropsT, T>,
   {
-    children: PropsT => React.Node,
-  },
+    children: (PropsT) => React.Node,
+  }
 >;
 
 export type TimePickerPropsT<T = Date> = TimePickerPropsTBase<T>;
@@ -358,10 +358,10 @@ export type TimezonePickerPropsT = {
    * Customize the option's label. Useful for translations and optionally mapping from
    * 'America/Los_Angeles' to 'Pacific Time'.
    */
-  mapLabels?: OptionT => React.Node,
+  mapLabels?: (OptionT) => React.Node,
   /** Callback for when the timezone selection changes. */
-  onChange?: (value: ?{id: string, label: string, offset: number}) => mixed,
-  overrides?: {Select?: OverrideT},
+  onChange?: (value: ?{ id: string, label: string, offset: number }) => mixed,
+  overrides?: { Select?: OverrideT },
   /**
    * Optional value that can be provided to fully control the component. If not provided,
    * TimezonePicker will manage state internally.