@material-ui/pickers/dist/material-ui-pickers.js.map

React components, that implements material design pickers for material-ui v4

{"version":3,"file":"material-ui-pickers.js","sources":["../../src/MuiPickersUtilsProvider.tsx","../../src/_shared/hooks/useUtils.ts","../../src/_shared/ToolbarText.tsx","../../src/_shared/ToolbarButton.tsx","../../src/_shared/PickerToolbar.tsx","../../src/_helpers/utils.ts","../../src/_helpers/date-utils.ts","../../src/DatePicker/DatePickerToolbar.tsx","../../src/_shared/PureDateInput.tsx","../../src/_shared/icons/KeyboardIcon.tsx","../../src/_helpers/text-field-helper.ts","../../src/_shared/KeyboardDateInput.tsx","../../src/_shared/hooks/useOpenState.ts","../../src/_shared/hooks/usePickerState.ts","../../src/constants/prop-types.ts","../../src/_shared/hooks/useKeyboardPickerState.ts","../../src/views/Calendar/Day.tsx","../../src/views/Calendar/DayWrapper.tsx","../../src/views/Calendar/SlideTransition.tsx","../../src/_shared/icons/ArrowLeftIcon.tsx","../../src/_shared/icons/ArrowRightIcon.tsx","../../src/views/Calendar/CalendarHeader.tsx","../../src/constants/dimensions.ts","../../src/wrappers/StaticWrapper.tsx","../../src/_shared/ModalDialog.tsx","../../src/_shared/hooks/useKeyDown.ts","../../src/wrappers/ModalWrapper.tsx","../../src/wrappers/InlineWrapper.tsx","../../src/wrappers/Wrapper.tsx","../../src/_shared/WithUtils.tsx","../../src/views/Calendar/Calendar.tsx","../../src/_shared/hooks/useViews.tsx","../../src/constants/ClockType.ts","../../src/views/Clock/ClockPointer.tsx","../../src/_helpers/time-utils.ts","../../src/views/Clock/Clock.tsx","../../src/views/Clock/ClockNumber.tsx","../../src/views/Clock/ClockNumbers.tsx","../../src/views/Clock/ClockView.tsx","../../src/views/Year/Year.tsx","../../src/views/Year/YearView.tsx","../../src/views/Month/Month.tsx","../../src/views/Month/MonthView.tsx","../../src/_shared/hooks/useIsLandscape.tsx","../../src/Picker/Picker.tsx","../../src/Picker/makePickerWithState.tsx","../../src/DatePicker/DatePicker.tsx","../../src/TimePicker/TimePickerToolbar.tsx","../../src/TimePicker/TimePicker.tsx","../../src/_shared/icons/TimeIcon.tsx","../../src/_shared/icons/DateRangeIcon.tsx","../../src/DateTimePicker/DateTimePickerTabs.tsx","../../src/DateTimePicker/DateTimePickerToolbar.tsx","../../src/DateTimePicker/DateTimePicker.tsx","../../src/_shared/hooks/useStaticState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from './typings/date';\n\nexport const MuiPickersContext = React.createContext<IUtils<MaterialUiPickersDate> | null>(null);\n\nexport interface MuiPickersUtilsProviderProps {\n  utils: any;\n  children: React.ReactNode;\n  locale?: any;\n  libInstance?: any;\n}\n\nexport const MuiPickersUtilsProvider: React.FC<MuiPickersUtilsProviderProps> = ({\n  utils: Utils,\n  children,\n  locale,\n  libInstance,\n}) => {\n  const utils = React.useMemo(() => new Utils({ locale, instance: libInstance }), [\n    Utils,\n    libInstance,\n    locale,\n  ]);\n\n  return <MuiPickersContext.Provider value={utils} children={children} />;\n};\n\nMuiPickersUtilsProvider.propTypes = {\n  utils: PropTypes.func.isRequired,\n  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n  children: PropTypes.oneOfType([\n    PropTypes.element.isRequired,\n    PropTypes.arrayOf(PropTypes.element.isRequired),\n  ]).isRequired,\n};\n\nexport default MuiPickersUtilsProvider;\n","import { useContext } from 'react';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { MuiPickersContext } from '../../MuiPickersUtilsProvider';\n\nexport const checkUtils = (utils: IUtils<MaterialUiPickersDate> | null | undefined) => {\n  if (!utils) {\n    // tslint:disable-next-line\n    throw new Error(\n      'Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports.  Recommendation: use named imports from the module index.'\n    );\n  }\n};\n\nexport function useUtils() {\n  const utils = useContext(MuiPickersContext);\n  checkUtils(utils);\n\n  return utils!;\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles, fade } from '@material-ui/core/styles';\n\nexport interface ToolbarTextProps extends ExtendMui<TypographyProps> {\n  selected?: boolean;\n  label: string;\n}\n\nexport const useStyles = makeStyles(\n  theme => {\n    const textColor =\n      theme.palette.type === 'light'\n        ? theme.palette.primary.contrastText\n        : theme.palette.getContrastText(theme.palette.background.default);\n\n    return {\n      toolbarTxt: {\n        color: fade(textColor, 0.54),\n      },\n      toolbarBtnSelected: {\n        color: textColor,\n      },\n    };\n  },\n  { name: 'MuiPickersToolbarText' }\n);\n\nconst ToolbarText: React.FunctionComponent<ToolbarTextProps> = ({\n  selected,\n  label,\n  className = null,\n  ...other\n}) => {\n  const classes = useStyles();\n  return (\n    <Typography\n      children={label}\n      className={clsx(classes.toolbarTxt, className, {\n        [classes.toolbarBtnSelected]: selected,\n      })}\n      {...other}\n    />\n  );\n};\n\nexport default ToolbarText;\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ToolbarText from './ToolbarText';\nimport Button, { ButtonProps } from '@material-ui/core/Button';\nimport { ExtendMui } from '../typings/extendMui';\nimport { TypographyProps } from '@material-ui/core/Typography';\nimport { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ToolbarButtonProps\n  extends ExtendMui<ButtonProps, 'variant'>,\n    WithStyles<typeof styles> {\n  variant: TypographyProps['variant'];\n  selected: boolean;\n  label: string;\n  align?: TypographyProps['align'];\n  typographyClassName?: string;\n}\n\nconst ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({\n  classes,\n  className = null,\n  label,\n  selected,\n  variant,\n  align,\n  typographyClassName,\n  ...other\n}) => {\n  return (\n    <Button variant=\"text\" className={clsx(classes.toolbarBtn, className)} {...other}>\n      <ToolbarText\n        align={align}\n        className={typographyClassName}\n        variant={variant}\n        label={label}\n        selected={selected}\n      />\n    </Button>\n  );\n};\n\n(ToolbarButton as any).propTypes = {\n  selected: PropTypes.bool.isRequired,\n  label: PropTypes.string.isRequired,\n  classes: PropTypes.any.isRequired,\n  className: PropTypes.string,\n  innerRef: PropTypes.any,\n};\n\nToolbarButton.defaultProps = {\n  className: '',\n};\n\nexport const styles = createStyles({\n  toolbarBtn: {\n    padding: 0,\n    minWidth: '16px',\n    textTransform: 'none',\n  },\n});\n\nexport default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    toolbar: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: 100,\n      backgroundColor:\n        theme.palette.type === 'light'\n          ? theme.palette.primary.main\n          : theme.palette.background.default,\n    },\n    toolbarLandscape: {\n      height: 'auto',\n      maxWidth: 150,\n      padding: 8,\n      justifyContent: 'flex-start',\n    },\n  }),\n  { name: 'MuiPickersToolbar' }\n);\n\ninterface PickerToolbarProps extends ExtendMui<ToolbarProps> {\n  isLandscape: boolean;\n}\n\nconst PickerToolbar: React.SFC<PickerToolbarProps> = ({\n  children,\n  isLandscape,\n  className = null,\n  ...other\n}) => {\n  const classes = useStyles();\n\n  return (\n    <Toolbar\n      className={clsx(classes.toolbar, { [classes.toolbarLandscape]: isLandscape }, className)}\n      {...other}\n    >\n      {children}\n    </Toolbar>\n  );\n};\n\nexport default PickerToolbar;\n","/** Use it instead of .includes method for IE support */\nexport function arrayIncludes<T>(array: T[], itemOrItems: T | T[]) {\n  if (Array.isArray(itemOrItems)) {\n    return itemOrItems.every(item => array.indexOf(item) !== -1);\n  }\n\n  return array.indexOf(itemOrItems) !== -1;\n}\n\nexport type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;\n","import { arrayIncludes } from './utils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { DatePickerView } from '../DatePicker/DatePicker';\n\ninterface FindClosestDateParams {\n  date: MaterialUiPickersDate;\n  utils: IUtils<MaterialUiPickersDate>;\n  minDate: MaterialUiPickersDate;\n  maxDate: MaterialUiPickersDate;\n  disableFuture: boolean;\n  disablePast: boolean;\n  shouldDisableDate: (date: MaterialUiPickersDate) => boolean;\n}\n\nexport const findClosestEnabledDate = ({\n  date,\n  utils,\n  minDate,\n  maxDate,\n  disableFuture,\n  disablePast,\n  shouldDisableDate,\n}: FindClosestDateParams) => {\n  const today = utils.startOfDay(utils.date());\n\n  if (disablePast && utils.isBefore(minDate!, today)) {\n    minDate = today;\n  }\n\n  if (disableFuture && utils.isAfter(maxDate, today)) {\n    maxDate = today;\n  }\n\n  let forward = date;\n  let backward = date;\n  if (utils.isBefore(date, minDate)) {\n    forward = utils.date(minDate);\n    backward = null;\n  }\n\n  if (utils.isAfter(date, maxDate)) {\n    if (backward) {\n      backward = utils.date(maxDate);\n    }\n\n    forward = null;\n  }\n\n  while (forward || backward) {\n    if (forward && utils.isAfter(forward, maxDate)) {\n      forward = null;\n    }\n    if (backward && utils.isBefore(backward, minDate)) {\n      backward = null;\n    }\n\n    if (forward) {\n      if (!shouldDisableDate(forward)) {\n        return forward;\n      }\n      forward = utils.addDays(forward, 1);\n    }\n\n    if (backward) {\n      if (!shouldDisableDate(backward)) {\n        return backward;\n      }\n      backward = utils.addDays(backward, -1);\n    }\n  }\n\n  // fallback to today if no enabled days\n  return utils.date();\n};\n\nexport const isYearOnlyView = (views: DatePickerView[]) =>\n  views.length === 1 && views[0] === 'year';\n\nexport const isYearAndMonthViews = (views: DatePickerView[]) =>\n  views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');\n\nexport const getFormatByViews = (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate>) => {\n  if (isYearOnlyView(views)) {\n    return utils.yearFormat;\n  }\n\n  if (isYearAndMonthViews(views)) {\n    return utils.yearMonthFormat;\n  }\n\n  return utils.dateFormat;\n};\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { isYearAndMonthViews, isYearOnlyView } from '../_helpers/date-utils';\n\nexport const useStyles = makeStyles(\n  {\n    toolbar: {\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n    },\n    toolbarLandscape: {\n      padding: 16,\n    },\n    dateLandscape: {\n      marginRight: 16,\n    },\n  },\n  { name: 'MuiPickersDatePickerRoot' }\n);\n\nexport const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({\n  date,\n  views,\n  setOpenView,\n  isLandscape,\n  openView,\n}) => {\n  const utils = useUtils();\n  const classes = useStyles();\n\n  const isYearOnly = React.useMemo(() => isYearOnlyView(views as any), [views]);\n  const isYearAndMonth = React.useMemo(() => isYearAndMonthViews(views as any), [views]);\n\n  return (\n    <PickerToolbar\n      isLandscape={isLandscape}\n      className={clsx({\n        [classes.toolbar]: !isYearOnly,\n        [classes.toolbarLandscape]: isLandscape,\n      })}\n    >\n      <ToolbarButton\n        variant={isYearOnly ? 'h3' : 'subtitle1'}\n        onClick={() => setOpenView('year')}\n        selected={openView === 'year'}\n        label={utils.getYearText(date)}\n      />\n\n      {!isYearOnly && !isYearAndMonth && (\n        <ToolbarButton\n          variant=\"h4\"\n          selected={openView === 'date'}\n          onClick={() => setOpenView('date')}\n          align={isLandscape ? 'left' : 'center'}\n          label={utils.getDatePickerHeaderText(date)}\n          className={clsx({ [classes.dateLandscape]: isLandscape })}\n        />\n      )}\n\n      {isYearAndMonth && (\n        <ToolbarButton\n          variant=\"h4\"\n          onClick={() => setOpenView('month')}\n          selected={openView === 'month'}\n          label={utils.getMonthText(date)}\n        />\n      )}\n    </PickerToolbar>\n  );\n};\n","import * as React from 'react';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { ExtendMui } from '../typings/extendMui';\n\nexport type NotOverridableProps =\n  | 'openPicker'\n  | 'inputValue'\n  | 'onChange'\n  | 'format'\n  | 'validationError'\n  | 'format'\n  | 'forwardedRef';\n\nexport interface PureDateInputProps\n  extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'value'> {\n  /** Pass material-ui text field variant down, bypass internal variant prop */\n  inputVariant?: TextFieldProps['variant'];\n  /** Override input component */\n  TextFieldComponent?: React.ComponentType<TextFieldProps>;\n  InputProps?: TextFieldProps['InputProps'];\n  inputProps?: TextFieldProps['inputProps'];\n  onBlur?: TextFieldProps['onBlur'];\n  onFocus?: TextFieldProps['onFocus'];\n  inputValue: string;\n  validationError?: React.ReactNode;\n  openPicker: () => void;\n}\n\nexport const PureDateInput: React.FC<PureDateInputProps> = ({\n  inputValue,\n  inputVariant,\n  validationError,\n  InputProps,\n  openPicker: onOpen,\n  TextFieldComponent = TextField,\n  ...other\n}) => {\n  const PureDateInputProps = React.useMemo(\n    () => ({\n      ...InputProps,\n      readOnly: true,\n    }),\n    [InputProps]\n  );\n\n  return (\n    <TextFieldComponent\n      error={Boolean(validationError)}\n      helperText={validationError}\n      {...other}\n      // do not overridable\n      onClick={onOpen}\n      value={inputValue}\n      variant={inputVariant as any}\n      InputProps={PureDateInputProps}\n      onKeyDown={e => {\n        // space\n        if (e.keyCode === 32) {\n          e.stopPropagation();\n          onOpen();\n        }\n      }}\n    />\n  );\n};\n\nPureDateInput.displayName = 'PureDateInput';\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const KeyboardIcon: React.SFC<SvgIconProps> = props => {\n  return (\n    <SvgIcon {...props}>\n      <path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\" />\n      <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n    </SvgIcon>\n  );\n};\n","import { Omit } from './utils';\nimport { DatePickerProps } from '..';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { ParsableDate } from '../constants/prop-types';\nimport { BasePickerProps } from '../typings/BasePicker';\n\nexport const getDisplayDate = (\n  value: ParsableDate,\n  format: string,\n  utils: IUtils<any>,\n  isEmpty: boolean,\n  { invalidLabel, emptyLabel, labelFunc }: Omit<BasePickerProps, 'value' | 'onChange'>\n) => {\n  const date = utils.date(value);\n  if (labelFunc) {\n    return labelFunc(isEmpty ? null : date, invalidLabel!);\n  }\n\n  if (isEmpty) {\n    return emptyLabel || '';\n  }\n\n  return utils.isValid(date) ? utils.format(date, format) : invalidLabel!;\n};\n\nexport interface BaseValidationProps {\n  /**\n   * Message, appearing when date cannot be parsed\n   * @default 'Invalid Date Format'\n   */\n  invalidDateMessage?: React.ReactNode;\n}\n\nexport interface DateValidationProps extends BaseValidationProps {\n  /**\n   * Error message, shown if date is less then minimal date\n   * @default 'Date should not be before minimal date'\n   */\n  minDateMessage?: React.ReactNode;\n  /**\n   * Error message, shown if date is more then maximal date\n   * @default 'Date should not be after maximal date'\n   */\n  maxDateMessage?: React.ReactNode;\n}\n\nconst getComparisonMaxDate = (utils: IUtils<any>, strictCompareDates: boolean, date: Date) => {\n  if (strictCompareDates) {\n    return date;\n  }\n\n  return utils.endOfDay(date);\n};\n\nconst getComparisonMinDate = (utils: IUtils<any>, strictCompareDates: boolean, date: Date) => {\n  if (strictCompareDates) {\n    return date;\n  }\n\n  return utils.startOfDay(date);\n};\n\nexport const validate = (\n  value: ParsableDate,\n  utils: IUtils<any>,\n  {\n    maxDate,\n    minDate,\n    disablePast,\n    disableFuture,\n    maxDateMessage,\n    minDateMessage,\n    invalidDateMessage,\n    strictCompareDates,\n  }: Omit<DatePickerProps, 'views' | 'openTo'> // DateTimePicker doesn't support\n): React.ReactNode => {\n  const parsedValue = utils.date(value);\n\n  // if null - do not show error\n  if (value === null) {\n    return '';\n  }\n\n  if (!utils.isValid(value)) {\n    return invalidDateMessage;\n  }\n\n  if (\n    maxDate &&\n    utils.isAfter(\n      parsedValue,\n      getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate))\n    )\n  ) {\n    return maxDateMessage;\n  }\n\n  if (\n    disableFuture &&\n    utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))\n  ) {\n    return maxDateMessage;\n  }\n\n  if (\n    minDate &&\n    utils.isBefore(\n      parsedValue,\n      getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate))\n    )\n  ) {\n    return minDateMessage;\n  }\n  if (\n    disablePast &&\n    utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))\n  ) {\n    return minDateMessage;\n  }\n\n  return '';\n};\n\nexport function pick12hOr24hFormat(\n  userFormat: string | undefined,\n  ampm: boolean | undefined = true,\n  formats: { '12h': string; '24h': string }\n) {\n  if (userFormat) {\n    return userFormat;\n  }\n\n  return ampm ? formats['12h'] : formats['24h'];\n}\n\nexport function makeMaskFromFormat(format: string, numberMaskChar: string) {\n  return format.replace(/[a-z]/gi, numberMaskChar);\n}\n\nexport const maskedDateFormatter = (mask: string, numberMaskChar: string, refuse: RegExp) => (\n  value: string\n) => {\n  let result = '';\n  const parsed = value.replace(refuse, '');\n\n  if (parsed === '') {\n    return parsed;\n  }\n\n  let i = 0;\n  let n = 0;\n  while (i < mask.length) {\n    const maskChar = mask[i];\n    if (maskChar === numberMaskChar && n < parsed.length) {\n      const parsedChar = parsed[n];\n      result += parsedChar;\n      n += 1;\n    } else {\n      result += maskChar;\n    }\n    i += 1;\n  }\n\n  return result;\n};\n","import * as React from 'react';\nimport IconButton, { IconButtonProps } from '@material-ui/core/IconButton';\nimport InputAdornment, { InputAdornmentProps } from '@material-ui/core/InputAdornment';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { Rifm } from 'rifm';\nimport { ExtendMui } from '../typings/extendMui';\nimport { KeyboardIcon } from './icons/KeyboardIcon';\nimport { makeMaskFromFormat, maskedDateFormatter } from '../_helpers/text-field-helper';\n\nexport interface KeyboardDateInputProps\n  extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'value'> {\n  format: string;\n  onChange: (value: string | null) => void;\n  openPicker: () => void;\n  validationError?: React.ReactNode;\n  inputValue: string;\n  inputProps?: TextFieldProps['inputProps'];\n  InputProps?: TextFieldProps['InputProps'];\n  onBlur?: TextFieldProps['onBlur'];\n  onFocus?: TextFieldProps['onFocus'];\n  /** Override input component */\n  TextFieldComponent?: React.ComponentType<TextFieldProps>;\n  /** Icon displaying for open picker button */\n  keyboardIcon?: React.ReactNode;\n  /** Pass material-ui text field variant down, bypass internal variant prop */\n  inputVariant?: TextFieldProps['variant'];\n  /**\n   * Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)\n   */\n  mask?: string;\n  /**\n   * Char string that will be replaced with number (for \"_\" mask will be \"__/__/____\")\n   * @default '_'\n   */\n  maskChar?: string;\n  /**\n   * Refuse values regexp\n   * @default /[^\\d]+/gi\n   */\n  refuse?: RegExp;\n  /**\n   * Props to pass to keyboard input adornment\n   * @type {Partial<InputAdornmentProps>}\n   */\n  InputAdornmentProps?: Partial<InputAdornmentProps>;\n  /**\n   * Props to pass to keyboard adornment button\n   * @type {Partial<IconButtonProps>}\n   */\n  KeyboardButtonProps?: Partial<IconButtonProps>;\n  /** Custom formatter to be passed into Rifm component */\n  rifmFormatter?: (str: string) => string;\n}\n\nexport const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({\n  inputValue,\n  inputVariant,\n  validationError,\n  KeyboardButtonProps,\n  InputAdornmentProps,\n  openPicker: onOpen,\n  onChange,\n  InputProps,\n  mask,\n  maskChar = '_',\n  refuse = /[^\\d]+/gi,\n  format,\n  keyboardIcon,\n  disabled,\n  rifmFormatter,\n  TextFieldComponent = TextField,\n  ...other\n}) => {\n  const inputMask = mask || makeMaskFromFormat(format, maskChar);\n  // prettier-ignore\n  const formatter = React.useMemo(\n    () => maskedDateFormatter(inputMask, maskChar, refuse),\n    [inputMask, maskChar, refuse]\n  );\n\n  const position =\n    InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';\n\n  const handleChange = (text: string) => {\n    const finalString = text === '' || text === inputMask ? null : text;\n    onChange(finalString);\n  };\n\n  return (\n    <Rifm\n      key={inputMask}\n      value={inputValue}\n      onChange={handleChange}\n      refuse={refuse}\n      format={rifmFormatter || formatter}\n    >\n      {({ onChange, value }) => (\n        <TextFieldComponent\n          disabled={disabled}\n          error={Boolean(validationError)}\n          helperText={validationError}\n          {...other}\n          value={value}\n          onChange={onChange}\n          variant={inputVariant as any}\n          InputProps={{\n            ...InputProps,\n            [`${position}Adornment`]: (\n              <InputAdornment position={position} {...InputAdornmentProps}>\n                <IconButton disabled={disabled} {...KeyboardButtonProps} onClick={onOpen}>\n                  {keyboardIcon}\n                </IconButton>\n              </InputAdornment>\n            ),\n          }}\n        />\n      )}\n    </Rifm>\n  );\n};\n\nKeyboardDateInput.defaultProps = {\n  keyboardIcon: <KeyboardIcon />,\n};\n\nexport default KeyboardDateInput;\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { useCallback, useState, Dispatch, SetStateAction } from 'react';\n\nexport function useOpenState({ open, onOpen, onClose }: BasePickerProps) {\n  let setIsOpenState: null | Dispatch<SetStateAction<boolean>> = null;\n  if (open === undefined || open === null) {\n    // The component is uncontrolled, so we need to give it its own state.\n    [open, setIsOpenState] = useState<boolean>(false);\n  }\n\n  // prettier-ignore\n  const setIsOpen = useCallback((newIsOpen: boolean) => {\n    setIsOpenState && setIsOpenState(newIsOpen);\n\n    return newIsOpen\n      ? onOpen && onOpen()\n      : onClose && onClose();\n  }, [onOpen, onClose, setIsOpenState]);\n\n  return { isOpen: open, setIsOpen };\n}\n","import { useUtils } from './useUtils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { useOpenState } from './useOpenState';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { getDisplayDate, validate } from '../../_helpers/text-field-helper';\nimport { useCallback, useDebugValue, useEffect, useMemo, useState, useRef } from 'react';\n\nexport interface StateHookOptions {\n  getDefaultFormat: () => string;\n}\n\nconst useValueToDate = (\n  utils: IUtils<MaterialUiPickersDate>,\n  { value, initialFocusedDate }: BasePickerProps\n) => {\n  const nowRef = useRef(utils.date());\n  const date = utils.date(value || initialFocusedDate || nowRef.current);\n\n  return date && utils.isValid(date) ? date : nowRef.current;\n};\n\nfunction useDateValues(props: BasePickerProps, options: StateHookOptions) {\n  const utils = useUtils();\n  const date = useValueToDate(utils, props);\n  const format = props.format || options.getDefaultFormat();\n\n  return { date, format };\n}\n\nexport function usePickerState(props: BasePickerProps, options: StateHookOptions) {\n  const { autoOk, disabled, readOnly, onAccept, onChange, onError, value, variant } = props;\n\n  const utils = useUtils();\n  const { isOpen, setIsOpen } = useOpenState(props);\n  const { date, format } = useDateValues(props, options);\n  const [pickerDate, setPickerDate] = useState(date);\n\n  useEffect(() => {\n    // if value was changed in closed state - treat it as accepted\n    if (!isOpen && !utils.isEqual(pickerDate, date)) {\n      setPickerDate(date);\n    }\n  }, [date, isOpen, pickerDate, utils]);\n\n  const acceptDate = useCallback(\n    (acceptedDate: MaterialUiPickersDate) => {\n      onChange(acceptedDate);\n      if (onAccept) {\n        onAccept(acceptedDate);\n      }\n\n      setIsOpen(false);\n    },\n    [onAccept, onChange, setIsOpen]\n  );\n\n  const wrapperProps = useMemo(\n    () => ({\n      format,\n      open: isOpen,\n      onClear: () => acceptDate(null),\n      onAccept: () => acceptDate(pickerDate),\n      onSetToday: () => setPickerDate(utils.date()),\n      onDismiss: () => {\n        setIsOpen(false);\n      },\n    }),\n    [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]\n  );\n\n  const pickerProps = useMemo(\n    () => ({\n      date: pickerDate,\n      onChange: (newDate: MaterialUiPickersDate, isFinish = true) => {\n        setPickerDate(newDate);\n\n        if (isFinish && autoOk) {\n          acceptDate(newDate);\n          return;\n        }\n\n        // simulate autoOk, but do not close the modal\n        if (variant === 'inline' || variant === 'static') {\n          onChange(newDate);\n          onAccept && onAccept(newDate);\n        }\n      },\n    }),\n    [acceptDate, autoOk, onAccept, onChange, pickerDate, variant]\n  );\n\n  const validationError = validate(value, utils, props);\n  useEffect(() => {\n    if (onError) {\n      onError(validationError, value);\n    }\n  }, [onError, validationError, value]);\n\n  const inputValue = getDisplayDate(date, format, utils, value === null, props);\n  const inputProps = useMemo(\n    () => ({\n      inputValue,\n      validationError,\n      openPicker: () => !readOnly && !disabled && setIsOpen(true),\n    }),\n    [disabled, inputValue, readOnly, setIsOpen, validationError]\n  );\n\n  const pickerState = { pickerProps, inputProps, wrapperProps };\n\n  useDebugValue(pickerState);\n  return pickerState;\n}\n","import * as PropTypes from 'prop-types';\nimport { BaseTimePickerProps } from '../TimePicker/TimePicker';\nimport { BaseDatePickerProps } from '../DatePicker/DatePicker';\n\nconst date = PropTypes.oneOfType([\n  PropTypes.object,\n  PropTypes.string,\n  PropTypes.number,\n  PropTypes.instanceOf(Date),\n]);\n\nconst datePickerView = PropTypes.oneOf(['year', 'month', 'day']);\n\nexport type ParsableDate = object | string | number | Date | null | undefined;\n\nexport const DomainPropTypes = { date, datePickerView };\n\n/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */\nexport const timePickerDefaultProps = {\n  ampm: true,\n  invalidDateMessage: 'Invalid Time Format',\n} as BaseTimePickerProps;\n\nexport const datePickerDefaultProps = {\n  minDate: new Date('1900-01-01'),\n  maxDate: new Date('2100-01-01'),\n  invalidDateMessage: 'Invalid Date Format',\n  minDateMessage: 'Date should not be before minimal date',\n  maxDateMessage: 'Date should not be after maximal date',\n  allowKeyboardControl: true,\n} as BaseDatePickerProps;\n\nexport const dateTimePickerDefaultProps = {\n  ...timePickerDefaultProps,\n  ...datePickerDefaultProps,\n  showTabs: true,\n} as BaseTimePickerProps & BaseDatePickerProps;\n","import { useUtils } from './useUtils';\nimport { Omit } from '../../_helpers/utils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { getDisplayDate } from '../../_helpers/text-field-helper';\nimport { StateHookOptions, usePickerState } from './usePickerState';\n\nexport interface BaseKeyboardPickerProps extends Omit<BasePickerProps, 'onChange'> {\n  /** String value for controlling value with pure input string. Overrides value prop */\n  inputValue?: string;\n  /** Keyboard onChange callback @DateIOType */\n  onChange: (date: MaterialUiPickersDate | null, value?: string | null) => void;\n}\n\nfunction parseInputString(value: string, utils: IUtils<any>, format: string) {\n  try {\n    return utils.parse(value, format);\n  } catch {\n    return null;\n  }\n}\n\nexport function useKeyboardPickerState(props: BaseKeyboardPickerProps, options: StateHookOptions) {\n  const { format = options.getDefaultFormat(), inputValue, onChange, value } = props;\n  const utils = useUtils();\n\n  const displayDate = getDisplayDate(value, format, utils, value === null, props);\n  const [innerInputValue, setInnerInputValue] = useState(displayDate);\n  const dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;\n\n  useEffect(() => {\n    if (value === null || utils.isValid(value)) {\n      setInnerInputValue(displayDate);\n    }\n  }, [displayDate, setInnerInputValue, utils, value]);\n\n  const handleKeyboardChange = useCallback(\n    (date: MaterialUiPickersDate) => {\n      onChange(date, date === null ? null : utils.format(date, format));\n    },\n    [format, onChange, utils]\n  );\n\n  const { inputProps: innerInputProps, wrapperProps, pickerProps } = usePickerState(\n    // Extend props interface\n    { ...props, value: dateValue, onChange: handleKeyboardChange },\n    options\n  );\n\n  const inputProps = useMemo(\n    () => ({\n      ...innerInputProps, // reuse validation and open/close logic\n      format: wrapperProps.format,\n      inputValue: inputValue || innerInputValue,\n      onChange: (value: string | null) => {\n        setInnerInputValue(value || '');\n        const date = value === null ? null : utils.parse(value, wrapperProps.format);\n\n        onChange(date, value);\n      },\n    }),\n    [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]\n  );\n\n  return {\n    inputProps,\n    wrapperProps,\n    pickerProps,\n  };\n}\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    day: {\n      width: 36,\n      height: 36,\n      fontSize: theme.typography.caption.fontSize,\n      margin: '0 2px',\n      color: theme.palette.text.primary,\n      fontWeight: theme.typography.fontWeightMedium,\n      padding: 0,\n    },\n    hidden: {\n      opacity: 0,\n      pointerEvents: 'none',\n    },\n    current: {\n      color: theme.palette.primary.main,\n      fontWeight: 600,\n    },\n    daySelected: {\n      color: theme.palette.primary.contrastText,\n      backgroundColor: theme.palette.primary.main,\n      fontWeight: theme.typography.fontWeightMedium,\n      '&:hover': {\n        backgroundColor: theme.palette.primary.main,\n      },\n    },\n    dayDisabled: {\n      pointerEvents: 'none',\n      color: theme.palette.text.hint,\n    },\n  }),\n  { name: 'MuiPickersDay' }\n);\n\nexport interface DayProps {\n  /** Day text */\n  children: React.ReactNode;\n  /** Is today */\n  current?: boolean;\n  /** Disabled? */\n  disabled?: boolean;\n  /** Hidden? */\n  hidden?: boolean;\n  /** Selected? */\n  selected?: boolean;\n}\n\nexport const Day: React.FC<DayProps> = ({\n  children,\n  disabled,\n  hidden,\n  current,\n  selected,\n  ...other\n}) => {\n  const classes = useStyles();\n\n  const className = clsx(classes.day, {\n    [classes.hidden]: hidden,\n    [classes.current]: current,\n    [classes.daySelected]: selected,\n    [classes.dayDisabled]: disabled,\n  });\n\n  return (\n    <IconButton className={className} tabIndex={hidden || disabled ? -1 : 0} {...other}>\n      <Typography variant=\"body2\" color=\"inherit\">\n        {children}\n      </Typography>\n    </IconButton>\n  );\n};\n\nDay.displayName = 'Day';\n\nDay.propTypes = {\n  current: PropTypes.bool,\n  disabled: PropTypes.bool,\n  hidden: PropTypes.bool,\n  selected: PropTypes.bool,\n};\n\nDay.defaultProps = {\n  disabled: false,\n  hidden: false,\n  current: false,\n  selected: false,\n};\n\nexport default Day;\n","import * as React from 'react';\n\nexport interface DayWrapperProps {\n  value: any;\n  children: React.ReactNode;\n  dayInCurrentMonth?: boolean;\n  disabled?: boolean;\n  onSelect: (value: any) => void;\n}\n\nconst DayWrapper: React.FC<DayWrapperProps> = ({\n  children,\n  value,\n  disabled,\n  onSelect,\n  dayInCurrentMonth,\n  ...other\n}) => {\n  const handleClick = React.useCallback(() => onSelect(value), [onSelect, value]);\n\n  return (\n    <div\n      role=\"presentation\"\n      onClick={dayInCurrentMonth && !disabled ? handleClick : undefined}\n      onKeyPress={dayInCurrentMonth && !disabled ? handleClick : undefined}\n      {...other}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default DayWrapper;\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nexport type SlideDirection = 'right' | 'left';\ninterface SlideTransitionProps {\n  transKey: React.Key;\n  className?: string;\n  slideDirection: SlideDirection;\n  children: React.ReactChild;\n}\n\nconst animationDuration = 350;\nexport const useStyles = makeStyles(\n  theme => {\n    const slideTransition = theme.transitions.create('transform', {\n      duration: animationDuration,\n      easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',\n    });\n\n    return {\n      transitionContainer: {\n        display: 'block',\n        position: 'relative',\n        '& > *': {\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          left: 0,\n        },\n      },\n      'slideEnter-left': {\n        willChange: 'transform',\n        transform: 'translate(100%)',\n      },\n      'slideEnter-right': {\n        willChange: 'transform',\n        transform: 'translate(-100%)',\n      },\n      slideEnterActive: {\n        transform: 'translate(0%)',\n        transition: slideTransition,\n      },\n      slideExit: {\n        transform: 'translate(0%)',\n      },\n      'slideExitActiveLeft-left': {\n        willChange: 'transform',\n        transform: 'translate(-200%)',\n        transition: slideTransition,\n      },\n      'slideExitActiveLeft-right': {\n        willChange: 'transform',\n        transform: 'translate(200%)',\n        transition: slideTransition,\n      },\n    };\n  },\n  { name: 'MuiPickersSlideTransition' }\n);\n\nconst SlideTransition: React.SFC<SlideTransitionProps> = ({\n  children,\n  transKey,\n  slideDirection,\n  className = null,\n}) => {\n  const classes = useStyles();\n  const transitionClasses = {\n    exit: classes.slideExit,\n    enterActive: classes.slideEnterActive,\n    // @ts-ignore\n    enter: classes['slideEnter-' + slideDirection],\n    // @ts-ignore\n    exitActive: classes['slideExitActiveLeft-' + slideDirection],\n  };\n\n  return (\n    <TransitionGroup\n      className={clsx(classes.transitionContainer, className)}\n      childFactory={element =>\n        React.cloneElement(element, {\n          classNames: transitionClasses,\n        })\n      }\n    >\n      <CSSTransition\n        mountOnEnter\n        unmountOnExit\n        key={transKey + slideDirection}\n        timeout={animationDuration}\n        classNames={transitionClasses}\n        children={children}\n      />\n    </TransitionGroup>\n  );\n};\n\nexport default SlideTransition;\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const ArrowLeftIcon: React.SFC<SvgIconProps> = props => {\n  return (\n    <SvgIcon {...props}>\n      <path d=\"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z\" />\n      <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    </SvgIcon>\n  );\n};\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const ArrowRightIcon: React.SFC<SvgIconProps> = props => {\n  return (\n    <SvgIcon {...props}>\n      <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\" />\n      <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    </SvgIcon>\n  );\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport SlideTransition, { SlideDirection } from './SlideTransition';\nimport IconButton, { IconButtonProps } from '@material-ui/core/IconButton';\nimport { DateType } from '@date-io/type';\nimport { useUtils } from '../../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport { ArrowLeftIcon } from '../../_shared/icons/ArrowLeftIcon';\nimport { ArrowRightIcon } from '../../_shared/icons/ArrowRightIcon';\n\nexport interface CalendarHeaderProps {\n  currentMonth: DateType;\n  leftArrowIcon?: React.ReactNode;\n  rightArrowIcon?: React.ReactNode;\n  leftArrowButtonProps?: Partial<IconButtonProps>;\n  rightArrowButtonProps?: Partial<IconButtonProps>;\n  disablePrevMonth?: boolean;\n  disableNextMonth?: boolean;\n  slideDirection: SlideDirection;\n  onMonthChange: (date: MaterialUiPickersDate, direction: SlideDirection) => void | Promise<void>;\n}\n\nexport const useStyles = makeStyles(\n  theme => ({\n    switchHeader: {\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      marginTop: theme.spacing(0.5),\n      marginBottom: theme.spacing(1),\n    },\n    transitionContainer: {\n      width: '100%',\n      overflow: 'hidden',\n      height: 23,\n    },\n    iconButton: {\n      zIndex: 1,\n      backgroundColor: theme.palette.background.paper,\n    },\n    daysHeader: {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      maxHeight: 16,\n    },\n    dayLabel: {\n      width: 36,\n      margin: '0 2px',\n      textAlign: 'center',\n      color: theme.palette.text.hint,\n    },\n  }),\n  { name: 'MuiPickersCalendarHeader' }\n);\n\nexport const CalendarHeader: React.SFC<CalendarHeaderProps> = ({\n  currentMonth,\n  onMonthChange,\n  leftArrowIcon,\n  rightArrowIcon,\n  leftArrowButtonProps,\n  rightArrowButtonProps,\n  disablePrevMonth,\n  disableNextMonth,\n  slideDirection,\n}) => {\n  const utils = useUtils();\n  const classes = useStyles();\n  const theme = useTheme();\n  const rtl = theme.direction === 'rtl';\n\n  const selectNextMonth = () => onMonthChange(utils.getNextMonth(currentMonth), 'left');\n  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(currentMonth), 'right');\n\n  return (\n    <div>\n      <div className={classes.switchHeader}>\n        <IconButton\n          {...leftArrowButtonProps}\n          disabled={disablePrevMonth}\n          onClick={selectPreviousMonth}\n          className={classes.iconButton}\n        >\n          {rtl ? rightArrowIcon : leftArrowIcon}\n        </IconButton>\n\n        <SlideTransition\n          slideDirection={slideDirection}\n          transKey={currentMonth.toString()}\n          className={classes.transitionContainer}\n        >\n          <Typography align=\"center\" variant=\"body1\">\n            {utils.getCalendarHeaderText(currentMonth)}\n          </Typography>\n        </SlideTransition>\n\n        <IconButton\n          {...rightArrowButtonProps}\n          disabled={disableNextMonth}\n          onClick={selectNextMonth}\n          className={classes.iconButton}\n        >\n          {rtl ? leftArrowIcon : rightArrowIcon}\n        </IconButton>\n      </div>\n\n      <div className={classes.daysHeader}>\n        {utils.getWeekdays().map((day, index) => (\n          <Typography\n            key={index} // eslint-disable-line react/no-array-index-key\n            variant=\"caption\"\n            className={classes.dayLabel}\n          >\n            {day}\n          </Typography>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nCalendarHeader.displayName = 'CalendarHeader';\n\nCalendarHeader.propTypes = {\n  leftArrowIcon: PropTypes.node,\n  rightArrowIcon: PropTypes.node,\n  disablePrevMonth: PropTypes.bool,\n  disableNextMonth: PropTypes.bool,\n};\n\nCalendarHeader.defaultProps = {\n  leftArrowIcon: <ArrowLeftIcon />,\n  rightArrowIcon: <ArrowRightIcon />,\n  disablePrevMonth: false,\n  disableNextMonth: false,\n};\n\nexport default CalendarHeader;\n","export const DIALOG_WIDTH = 310;\n\nexport const DIALOG_WIDTH_WIDER = 325;\n\nexport const VIEW_HEIGHT = 305;\n","import * as React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { DIALOG_WIDTH } from '../constants/dimensions';\n\nconst useStyles = makeStyles(\n  theme => ({\n    staticWrapperRoot: {\n      overflow: 'hidden',\n      minWidth: DIALOG_WIDTH,\n      display: 'flex',\n      flexDirection: 'column',\n      backgroundColor: theme.palette.background.paper,\n    },\n  }),\n  { name: 'MuiPickersStaticWrapper' }\n);\n\nexport const StaticWrapper: React.FC = ({ children }) => {\n  const classes = useStyles();\n\n  return <div className={classes.staticWrapperRoot} children={children} />;\n};\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Button from '@material-ui/core/Button';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Dialog, { DialogProps } from '@material-ui/core/Dialog';\nimport { DIALOG_WIDTH, DIALOG_WIDTH_WIDER } from '../constants/dimensions';\nimport { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';\n\nexport interface ModalDialogProps extends DialogProps {\n  onAccept: () => void;\n  onDismiss: () => void;\n  onClear: () => void;\n  onSetToday: () => void;\n  okLabel?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  clearLabel?: React.ReactNode;\n  todayLabel?: React.ReactNode;\n  clearable?: boolean;\n  showTodayButton?: boolean;\n  showTabs?: boolean;\n  wider?: boolean;\n}\n\nexport const ModalDialog: React.SFC<ModalDialogProps & WithStyles<typeof styles>> = ({\n  children,\n  classes,\n  onAccept,\n  onDismiss,\n  onClear,\n  onSetToday,\n  okLabel,\n  cancelLabel,\n  clearLabel,\n  todayLabel,\n  clearable,\n  showTodayButton,\n  showTabs,\n  wider,\n  ...other\n}) => (\n  <Dialog\n    role=\"dialog\"\n    onClose={onDismiss}\n    classes={{\n      paper: clsx(classes.dialogRoot, {\n        [classes.dialogRootWider]: wider,\n      }),\n    }}\n    {...other}\n  >\n    <DialogContent children={children} className={classes.dialog} />\n\n    <DialogActions\n      classes={{\n        root: clsx({\n          [classes.withAdditionalAction]: clearable || showTodayButton,\n        }),\n      }}\n    >\n      {clearable && (\n        <Button color=\"primary\" onClick={onClear}>\n          {clearLabel}\n        </Button>\n      )}\n\n      {showTodayButton && (\n        <Button color=\"primary\" onClick={onSetToday}>\n          {todayLabel}\n        </Button>\n      )}\n\n      {cancelLabel && (\n        <Button color=\"primary\" onClick={onDismiss}>\n          {cancelLabel}\n        </Button>\n      )}\n\n      {okLabel && (\n        <Button color=\"primary\" onClick={onAccept}>\n          {okLabel}\n        </Button>\n      )}\n    </DialogActions>\n  </Dialog>\n);\n\nModalDialog.displayName = 'ModalDialog';\n\nexport const styles = createStyles({\n  dialogRoot: {\n    minWidth: DIALOG_WIDTH,\n  },\n  dialogRootWider: {\n    minWidth: DIALOG_WIDTH_WIDER,\n  },\n  dialog: {\n    '&:first-child': {\n      padding: 0,\n    },\n  },\n  withAdditionalAction: {\n    // set justifyContent to default value to fix IE11 layout bug\n    // see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267\n    justifyContent: 'flex-start',\n\n    '& > *:first-child': {\n      marginRight: 'auto',\n    },\n  },\n});\n\nexport default withStyles(styles, { name: 'MuiPickersModal' })(ModalDialog);\n","import * as React from 'react';\n\nexport const useIsomorphicEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n\ntype KeyHandlers = Record<KeyboardEvent['key'], () => void>;\n\nexport function runKeyHandler(e: KeyboardEvent, keyHandlers: KeyHandlers) {\n  const handler = keyHandlers[e.key];\n  if (handler) {\n    handler();\n    // if event was handled prevent other side effects (e.g. page scroll)\n    e.preventDefault();\n  }\n}\n\nexport function useKeyDown(active: boolean, keyHandlers: KeyHandlers) {\n  const keyHandlersRef = React.useRef(keyHandlers);\n  keyHandlersRef.current = keyHandlers;\n\n  useIsomorphicEffect(() => {\n    if (active) {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        runKeyHandler(event, keyHandlersRef.current);\n      };\n      window.addEventListener('keydown', handleKeyDown);\n      return () => {\n        window.removeEventListener('keydown', handleKeyDown);\n      };\n    }\n  }, [active]);\n}\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport ModalDialog from '../_shared/ModalDialog';\nimport { WrapperProps } from './Wrapper';\nimport { Omit } from '../_helpers/utils';\nimport { useKeyDown } from '../_shared/hooks/useKeyDown';\nimport { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog';\n\nexport interface ModalWrapperProps<T = {}> extends WrapperProps<T> {\n  /**\n   * \"OK\" label message\n   * @default \"OK\"\n   */\n  okLabel?: React.ReactNode;\n  /**\n   * \"CANCEL\" label message\n   * @default \"CANCEL\"\n   */\n  cancelLabel?: React.ReactNode;\n  /**\n   * \"CLEAR\" label message\n   * @default \"CLEAR\"\n   */\n  clearLabel?: React.ReactNode;\n  /**\n   * \"TODAY\" label message\n   * @default \"TODAY\"\n   */\n  todayLabel?: React.ReactNode;\n  /**\n   * If true today button will be displayed <b>Note*</b> that clear button has higher priority\n   * @default false\n   */\n  showTodayButton?: boolean;\n  /**\n   * Show clear action in picker dialog\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * Props to be passed directly to material-ui Dialog\n   * @type {Partial<MuiDialogProps>}\n   */\n  DialogProps?: Partial<Omit<MuiDialogProps, 'classes'>>;\n}\n\nexport const ModalWrapper: React.FC<ModalWrapperProps<any>> = ({\n  open,\n  children,\n  okLabel,\n  cancelLabel,\n  clearLabel,\n  todayLabel,\n  showTodayButton,\n  clearable,\n  DialogProps,\n  showTabs,\n  wider,\n  InputComponent,\n  DateInputProps,\n  onClear,\n  onAccept,\n  onDismiss,\n  onSetToday,\n  ...other\n}) => {\n  useKeyDown(open, {\n    Enter: onAccept,\n  });\n\n  return (\n    <React.Fragment>\n      <InputComponent {...other} {...DateInputProps} />\n\n      <ModalDialog\n        wider={wider}\n        showTabs={showTabs}\n        open={open}\n        onClear={onClear}\n        onAccept={onAccept}\n        onDismiss={onDismiss}\n        onSetToday={onSetToday}\n        clearLabel={clearLabel}\n        todayLabel={todayLabel}\n        okLabel={okLabel}\n        cancelLabel={cancelLabel}\n        clearable={clearable}\n        showTodayButton={showTodayButton}\n        children={children}\n        {...DialogProps}\n      />\n    </React.Fragment>\n  );\n};\n\nModalWrapper.propTypes = {\n  okLabel: PropTypes.node,\n  cancelLabel: PropTypes.node,\n  clearLabel: PropTypes.node,\n  clearable: PropTypes.bool,\n  todayLabel: PropTypes.node,\n  showTodayButton: PropTypes.bool,\n  DialogProps: PropTypes.object,\n} as any;\n\nModalWrapper.defaultProps = {\n  okLabel: 'OK',\n  cancelLabel: 'Cancel',\n  clearLabel: 'Clear',\n  todayLabel: 'Today',\n  clearable: false,\n  showTodayButton: false,\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Popover, { PopoverProps as PopoverPropsType } from '@material-ui/core/Popover';\nimport { WrapperProps } from './Wrapper';\nimport { useKeyDown } from '../_shared/hooks/useKeyDown';\nimport { TextFieldProps } from '@material-ui/core/TextField';\n\nexport interface InlineWrapperProps<T = TextFieldProps> extends WrapperProps<T> {\n  /** Popover props passed to material-ui Popover (with variant=\"inline\") */\n  PopoverProps?: Partial<PopoverPropsType>;\n}\n\nexport const InlineWrapper: React.FC<InlineWrapperProps> = ({\n  open,\n  wider,\n  children,\n  PopoverProps,\n  onClear,\n  onDismiss,\n  onSetToday,\n  onAccept,\n  s