@entur/datepicker 2.0.2 → 2.0.5

package/dist/datepicker.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.cjs.production.min.js","sources":["../src/DatePicker/DatePickerHeader.tsx","../src/DatePicker/DatePickerInput.tsx","../src/DatePicker/DatePicker.tsx","../src/NativeDatePicker.tsx","../src/TimePicker.tsx","../src/NativeTimePicker.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\n\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { IconButton } from '@entur/button';\n\nexport const DatePickerHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n}: Partial<ReactDatePickerCustomHeaderProps>) => {\n  const monthNames = getMonthList();\n  return (\n    <div className=\"eds-datepicker__calender__header\">\n      <IconButton\n        className=\"eds-datepicker__calender__header__month-button--left\"\n        onClick={decreaseMonth}\n        disabled={prevMonthButtonDisabled}\n      >\n        <LeftArrowIcon />\n      </IconButton>\n      <Heading3 className=\"eds-datepicker__calender__header__month-text\">\n        {monthNames[date?.getMonth() ?? 0]}\n      </Heading3>\n      <Heading3 className=\"eds-datepicker__calender__header__month-text\">\n        {date?.getFullYear()}\n      </Heading3>\n\n      <IconButton\n        className=\"eds-datepicker__calender__header__month-button--right\"\n        onClick={increaseMonth}\n        disabled={nextMonthButtonDisabled}\n      >\n        <RightArrowIcon />\n      </IconButton>\n    </div>\n  );\n};\n\nfunction getMonthList(locale = 'nb') {\n  const year = new Date().getFullYear();\n  const monthList = Array(12).keys();\n  const formatter = new Intl.DateTimeFormat(locale, {\n    month: 'long',\n  });\n  const getMonthName = (monthIndex: number) =>\n    formatter.format(new Date(year, monthIndex));\n\n  return Array.from(monthList, getMonthName);\n}\n","import React from 'react';\n\nimport { TextField, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport { IconButton } from '@entur/button';\nimport { CalendarIcon } from '@entur/icons';\n\ntype DatePickerInputProps = {\n  style?: React.CSSProperties;\n  label: string;\n  inputPlaceholder: string;\n  prepend?: React.ReactNode;\n  feedback?: string;\n  variant?: VariantType;\n  disabled?: boolean;\n  disableLabelAnimation?: boolean;\n  calendarButtonTooltip: string;\n  hideCalendarButton?: boolean;\n  inputRef: React.RefObject<HTMLInputElement>;\n  forwardRef: React.ForwardedRef<HTMLInputElement>;\n  toggleCalendarGUI: () => void;\n  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLInputElement>;\n  onKeyDownInput: (event: KeyboardEvent) => any;\n  onBlurInput: (event: FocusEvent) => any;\n  onFocus: undefined; // To prevent open on focus\n  selectedDate: Date | null; // Necessary to update component on state change\n  placeholder?: null; // override react-datepickers placeholder prop\n};\n\nexport const DatePickerInput = React.forwardRef<\n  HTMLInputElement,\n  DatePickerInputProps\n>(\n  (\n    {\n      style,\n      label,\n      inputPlaceholder,\n      prepend,\n      feedback,\n      variant,\n      disabled,\n      calendarButtonTooltip,\n      hideCalendarButton,\n      disableLabelAnimation,\n      inputRef,\n      forwardRef,\n      toggleCalendarGUI,\n      onKeyDownInput,\n      onBlurInput,\n      selectedDate,\n      placeholder, // eslint-disable-line\n      ...rest // forwarded props from react-datepicker\n    },\n    ref,\n  ) => {\n    React.useEffect(() => {\n      inputRef.current?.addEventListener('keydown', handleOnKeyDown);\n      inputRef.current?.addEventListener('blur', handleOnBlur);\n      inputRef.current?.addEventListener('focus', handleOnFocus);\n      return () => {\n        inputRef.current?.removeEventListener('keydown', handleOnKeyDown);\n        inputRef.current?.removeEventListener('blur', handleOnBlur);\n        inputRef.current?.removeEventListener('focus', handleOnFocus);\n      };\n    }, [inputRef, selectedDate]);\n\n    function handleOnKeyDown(this: HTMLElement, event: KeyboardEvent) {\n      onKeyDownInput(event);\n    }\n    function handleOnBlur(this: HTMLElement, event: FocusEvent) {\n      onBlurInput(event);\n    }\n    function handleOnFocus() {\n      setTimeout(() => inputRef.current?.select(), 5);\n    }\n\n    return (\n      <TextField\n        style={style}\n        label={label}\n        placeholder={inputPlaceholder}\n        prepend={prepend}\n        feedback={feedback}\n        variant={variant}\n        disableLabelAnimation={disableLabelAnimation}\n        ref={mergeRefs(ref, inputRef, forwardRef)}\n        append={\n          !hideCalendarButton && (\n            <Tooltip\n              placement=\"top\"\n              content={calendarButtonTooltip}\n              disableHoverListener={disabled}\n              disableFocusListener={disabled}\n            >\n              <IconButton type=\"button\" onClick={toggleCalendarGUI}>\n                <CalendarIcon />\n              </IconButton>\n            </Tooltip>\n          )\n        }\n        {...rest}\n      />\n    );\n  },\n);\n\nconst mergeRefs = <T extends HTMLElement>(\n  ...refs: React.MutableRefObject<T>[] | React.ForwardedRef<T>[]\n) => {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) ref.current = node;\n    }\n  };\n};\n","import React, { useRef, useState } from 'react';\nimport ReactDatePicker, {\n  default as ReactDatepicker,\n  ReactDatePickerProps,\n  registerLocale,\n} from 'react-datepicker';\nimport { parse, isSameDay, Locale } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport classNames from 'classnames';\n\nimport { VariantType } from '@entur/form';\nimport { useRandomId } from '@entur/utils';\n\nimport { DatePickerHeader } from './DatePickerHeader';\nimport { DatePickerInput } from './DatePickerInput';\n\nimport './DatePicker.scss';\nimport 'react-datepicker/dist/react-datepicker.css';\n\nregisterLocale('nb', nb);\n\nexport type DatePickerProps = {\n  /** Hva som er den valgte datoen */\n  selectedDate: Date | null;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event> | undefined,\n  ) => void;\n  /**\n   * Kalles når en tast trykkes i inputfeltet\n   */\n  onKeyDown?: (event: KeyboardEvent) => void;\n  /**\n   * Datoformater som skal støttes. Første i listen er formatet alt input omgjøres til.\n   * Format-valg tilgjengelig her: https://date-fns.org/v2.28.0/docs/format\n   * OBS: Noen kombinasjoner av datoformater kan gi rar og uønsket oppførsel,\n   * test nøye ved endring\n   * @default \"['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy']\"\n   */\n  dateFormats?: string[];\n  /**\n   * Locale fra date-fns som brukes av Datepicker-en\n   * @default nb\n   */\n  locale?: Locale;\n  /** Placeholder om ingen dato er valgt\n   * @default \"dd.mm.yyyy\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over DatePicker */\n  label: string;\n  /**\n   * Varselmelding, som vil komme under DatePicker\n   */\n  feedback?: string;\n  /** Valideringsvariant\n   */\n  variant?: VariantType;\n  /** Varselmelding for når datoen er på feil format\n   * @default \"Ugyldig dato\"\n   */\n  validationFeedback?: string;\n  /** Valideringsvariant for melding om feil datoformat\n   * @default \"error\"\n   */\n  validationVariant?: VariantType;\n  style?: React.CSSProperties;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <DateIcon />\n   */\n  prepend?: React.ReactNode;\n  /**\n   * Tekst som vises ved hover på «Åpne kalender»-knappen\n   */\n  calendarButtonTooltip?: string;\n  /** Skjuler knapp for åpning av kalender\n   * @default false\n   */\n  hideCalendarButton?: boolean;\n  /** Skjuler tilbakemeldingsteksten ved feil dato-input\n   * @default false\n   */\n  hideValidation?: boolean;\n  /** Skjuler kalender-GUI-et\n   * @default false\n   */\n  hideCalendar?: boolean;\n  /** Viser kun kalender-popover-en\n   * @default false\n   */\n  inline?: boolean;\n  // For testing\n  'data-cy'?: any;\n} & Omit<\n  ReactDatePickerProps,\n  'selected' | 'customInput' | 'onChangeRaw' | 'dateFormat' | 'locale'\n>;\n\nexport const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(\n  (\n    {\n      style,\n      className,\n      selectedDate,\n      label,\n      placeholder = 'dd.mm.yyyy',\n      onChange,\n      onKeyDown = () => null,\n      dateFormats = ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'],\n      minDate,\n      maxDate,\n      inline = false,\n      disabled,\n      prepend,\n      feedback = '',\n      variant,\n      validationFeedback = 'Ugyldig dato',\n      validationVariant = 'error',\n      disableLabelAnimation = false,\n      calendarButtonTooltip = 'Åpne\\xa0kalender',\n      hideCalendarButton = false,\n      hideCalendar = false,\n      hideValidation = false,\n      weekLabel = 'uke',\n      locale = nb,\n      open,\n      ...rest\n    },\n    ref,\n  ) => {\n    const datepickerId = useRandomId('eds-datepicker');\n\n    const [showValidation, setShowValidation] = useState(false);\n\n    const datepickerRef = useRef<ReactDatePicker>(null);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    React.useEffect(() => validateInput(), [selectedDate]);\n\n    const handleOnKeyDown = (event: KeyboardEvent) => {\n      const calendarIsClosed = !datepickerRef.current?.isCalendarOpen();\n\n      setShowValidation(false);\n      if (event.key === 'Enter') {\n        validateInput();\n        focusAndSelectInputField();\n        forceUpdateInputFormat();\n      } else if (event.key === 'Tab' && calendarIsClosed) {\n        validateInput();\n        forceUpdateInputFormat();\n      }\n      onKeyDown(event);\n    };\n\n    const validateInput = () => {\n      setShowValidation(false);\n      const inputValue = inputRef.current?.value;\n      if (!inputValue) return;\n\n      const inputValueParsedWithAllDateFormats = dateFormats.map(format =>\n        parse(inputValue, format, new Date(), {\n          locale: locale,\n        }),\n      );\n\n      const parsedDateFromInputIsTheSameAsSelectedDate =\n        selectedDate &&\n        inputValueParsedWithAllDateFormats.some(dateFormat =>\n          isSameDay(dateFormat, selectedDate),\n        );\n\n      if (parsedDateFromInputIsTheSameAsSelectedDate) {\n        // valid date inputted\n        setShowValidation(false);\n      } else {\n        // invalid date inputted\n        setShowValidation(true);\n      }\n    };\n\n    const getFeedbackAndVariant = (): {\n      feedback: string;\n      variant: VariantType | undefined;\n    } => {\n      if (feedback) return { feedback, variant };\n      if (!hideValidation && showValidation)\n        return { feedback: validationFeedback, variant: validationVariant };\n      return { feedback: '', variant: undefined };\n    };\n\n    const focusAndSelectInputField = () =>\n      setTimeout(() => {\n        inputRef.current?.select();\n      }, 5);\n\n    const forceUpdateInputFormat = () =>\n      datepickerRef.current?.setState({ inputValue: null });\n\n    const toggleCalendarGUI = () =>\n      datepickerRef.current?.setOpen(!datepickerRef.current?.isCalendarOpen());\n\n    return (\n      <>\n        <ReactDatepicker\n          selected={selectedDate}\n          minDate={minDate}\n          maxDate={maxDate}\n          dateFormat={dateFormats}\n          showWeekNumbers\n          weekLabel={weekLabel}\n          onChange={onChange}\n          onClickOutside={validateInput}\n          id={datepickerId}\n          ariaLabelledBy={datepickerId}\n          showPopperArrow={false}\n          locale={locale}\n          inline={inline}\n          disabled={disabled}\n          preventOpenOnFocus={true}\n          open={hideCalendar ? false : open}\n          ref={datepickerRef}\n          calendarClassName=\"eds-datepicker__calender\"\n          dayClassName={() => 'eds-datepicker__calender__day'}\n          weekDayClassName={() => 'eds-datepicker__calender__day-name'}\n          className={classNames(className, 'eds-datepicker__input')}\n          highlightDates={[\n            { 'eds-datepicker__calender__day--today': [new Date()] },\n            {\n              'eds-datepicker__calender__day--selected': selectedDate\n                ? [selectedDate]\n                : [],\n            },\n          ]}\n          renderCustomHeader={({\n            date,\n            changeYear,\n            changeMonth,\n            decreaseMonth,\n            increaseMonth,\n            prevMonthButtonDisabled,\n            nextMonthButtonDisabled,\n          }) => (\n            <DatePickerHeader\n              date={date}\n              changeYear={changeYear}\n              changeMonth={changeMonth}\n              increaseMonth={increaseMonth}\n              decreaseMonth={decreaseMonth}\n              prevMonthButtonDisabled={prevMonthButtonDisabled}\n              nextMonthButtonDisabled={nextMonthButtonDisabled}\n            />\n          )}\n          customInput={\n            <DatePickerInput\n              style={style}\n              label={label}\n              inputPlaceholder={placeholder}\n              calendarButtonTooltip={calendarButtonTooltip}\n              prepend={prepend}\n              feedback={getFeedbackAndVariant().feedback}\n              variant={getFeedbackAndVariant().variant}\n              inputRef={inputRef}\n              forwardRef={ref}\n              onKeyDownInput={handleOnKeyDown}\n              onBlurInput={() =>\n                !datepickerRef.current?.isCalendarOpen() && validateInput()\n              }\n              onFocus={undefined}\n              toggleCalendarGUI={toggleCalendarGUI}\n              disableLabelAnimation={disableLabelAnimation}\n              hideCalendarButton={hideCalendarButton}\n              selectedDate={selectedDate}\n            />\n          }\n          {...rest}\n        />\n      </>\n    );\n  },\n);\n","import React from 'react';\nimport {\n  BaseFormControl,\n  isFilled,\n  useInputGroupContext,\n  useVariant,\n  VariantType,\n} from '@entur/form';\nimport { DateIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\n\nexport type NativeDatePickerProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over NativeDatePicker */\n  label: string;\n  /** Varselmelding, som vil komme under NativeDatePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <DateIcon />\n   */\n  prepend?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const NativeDatePicker = React.forwardRef<\n  HTMLInputElement,\n  NativeDatePickerProps\n>(\n  (\n    {\n      className,\n      style,\n      label,\n      onChange,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      prepend = <DateIcon inline />,\n      ...rest\n    },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const nativedatepickerId = useRandomId('eds-nativetimepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        className={className}\n        prepend={prepend}\n        label={label}\n        feedback={feedback}\n        variant={variant}\n        labelId={nativedatepickerId}\n        disableLabelAnimation={disableLabelAnimation}\n        isFilled\n      >\n        <NativeDatePickerBase\n          onChange={onChange}\n          aria-labelledby={nativedatepickerId}\n          ref={ref}\n          variant={variant}\n          {...rest}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype NativeDatePickerBaseProps = {\n  onChange?: any;\n  variant?: VariantType;\n} & React.DetailedHTMLProps<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n>;\n\nconst NativeDatePickerBase = React.forwardRef<\n  HTMLInputElement,\n  NativeDatePickerBaseProps\n>(({ onChange, variant, value, ...rest }, ref) => {\n  const contextVariant = useVariant();\n  const currentVariant = variant || contextVariant;\n  const { isFilled: isDatepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    setFiller && !isDatepickerFilled && setFiller(true);\n  });\n\n  React.useEffect(() => {\n    if (value) {\n      setFiller && !isDatepickerFilled && setFiller(true);\n    } else {\n      setFiller && isDatepickerFilled && setFiller(false);\n    }\n  }, [value, setFiller, isDatepickerFilled]);\n\n  const handleChange = (event: any) => {\n    if (isFilled(event.target)) {\n      setFiller && !isDatepickerFilled && setFiller(true);\n    } else {\n      setFiller && isDatepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n  return (\n    <input\n      ref={ref}\n      aria-invalid={currentVariant === 'error'}\n      type=\"date\"\n      className=\"eds-form-control eds-native-date-picker\"\n      onChange={handleChange}\n      value={value}\n      {...rest}\n    />\n  );\n});\n","import React from 'react';\nimport {\n  default as ReactDatepicker,\n  ReactDatePickerProps,\n  registerLocale,\n} from 'react-datepicker';\nimport classNames from 'classnames';\nimport {\n  BaseFormControl,\n  useInputGroupContext,\n  VariantType,\n} from '@entur/form';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\nimport { nb } from 'date-fns/locale';\nimport { add, sub } from 'date-fns';\nimport * as Popper from '@popperjs/core';\nimport './TimePicker.scss';\nregisterLocale('nb', nb);\n\nexport type TimePickerProps = {\n  /** Hva som er den valgte datoen */\n  selectedTime?: Date;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event>,\n  ) => void;\n  /** Placeholder om ingen dato er valgt\n   * @default \"Velg tid\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over TimePicker */\n  label: string;\n  /** Varselmelding, som vil komme under TimePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  style?: React.CSSProperties;\n  labelTooltip?: React.ReactNode;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Kalles ved klikk på pil venstre i TimePicker\n   * @default Trekker fra 30 minutter av den valgte tiden\n   */\n  onLeftArrowClick?: (selectedTime?: Date | null, e?: React.MouseEvent) => void;\n  /** Kalles ved klikk på pil høyre i TimePicker\n   * @default Legger til 30 minutter av den valgte tiden\n   */\n  onRightArrowClick?: (\n    selectedTime?: Date | null,\n    e?: React.MouseEvent,\n  ) => void;\n} & ReactDatePickerProps;\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      selectedTime = null,\n      onChange,\n      placeholder = 'Velg tid',\n      disabled,\n      className,\n      style,\n      label,\n      labelTooltip,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      locale = 'nb',\n      onLeftArrowClick = (selectedTime, event) =>\n        selectedTime && onChange(sub(selectedTime, { minutes: 30 }), event),\n      onRightArrowClick = (selectedTime, event) =>\n        selectedTime && onChange(add(selectedTime, { minutes: 30 }), event),\n      ...rest\n    },\n    ref,\n  ) => {\n    const timepickerId = useRandomId('eds-timepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        ref={ref}\n        label={label}\n        labelId={timepickerId}\n        labelTooltip={labelTooltip}\n        variant={variant}\n        feedback={feedback}\n        disableLabelAnimation={disableLabelAnimation}\n        className=\"eds-timepicker-form-control\"\n        disabled={disabled}\n        prepend={\n          <TimePickerArrowButton\n            direction=\"left\"\n            tabIndex={-1}\n            onClick={(e: React.MouseEvent) => onLeftArrowClick(selectedTime, e)}\n            disabled={disabled}\n          />\n        }\n      >\n        <TimePickerBase\n          selectedTime={selectedTime}\n          onChange={onChange}\n          placeholder={placeholder}\n          className={className}\n          locale={locale}\n          ariaLabelledBy={timepickerId}\n          disabled={disabled}\n          {...rest}\n        />\n        <TimePickerArrowButton\n          direction=\"right\"\n          tabIndex={-1}\n          onClick={(e: React.MouseEvent) => onRightArrowClick(selectedTime, e)}\n          disabled={disabled}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype TimePickerBaseProps = {\n  /** Hva som er den valgte datoen */\n  selectedTime?: Date | null;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event>,\n  ) => void;\n  /** Placeholder om ingen dato er valgt\n   * @default \"Velg tid\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n} & ReactDatePickerProps;\n\nconst POPPER_MODIFIERS: Popper.StrictModifiers[] = [\n  {\n    name: 'offset',\n    enabled: true,\n    options: {\n      offset: [0, 0],\n    },\n  },\n];\nconst TimePickerBase: React.FC<TimePickerBaseProps> = ({\n  className,\n  onChange,\n  selectedTime,\n  placeholder,\n  timeFormat = 'HH:mm',\n  dateFormat = ['HH:mm', 'HHmm'],\n  ...rest\n}) => {\n  const { isFilled: isTimepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    if (selectedTime) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (selectedTime) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n  }, [selectedTime, setFiller, isTimepickerFilled]);\n\n  const handleChange = (date: any, event: any) => {\n    if (date) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(date, event);\n    }\n  };\n  return (\n    <ReactDatepicker\n      className={classNames(\n        'eds-form-control',\n        'eds-timepicker__input',\n        className,\n      )}\n      calendarClassName=\"eds-timepicker\"\n      selected={selectedTime}\n      onChange={handleChange}\n      dateFormat={dateFormat}\n      timeFormat={timeFormat}\n      showTimeSelect\n      showTimeInput={true}\n      showTimeSelectOnly\n      showPopperArrow={false}\n      placeholderText={placeholder}\n      popperClassName=\"eds-datepicker__popper\"\n      popperModifiers={POPPER_MODIFIERS}\n      open={false}\n      {...rest}\n    />\n  );\n};\n\ntype TimePickerArrowButtonProps = {\n  direction: 'left' | 'right';\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nconst TimePickerArrowButton: React.FC<TimePickerArrowButtonProps> = ({\n  direction,\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-timepicker__arrowbutton',\n        `eds-timepicker__arrowbutton--${direction}`,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {direction === 'left' ? <LeftArrowIcon /> : <RightArrowIcon />}\n    </button>\n  );\n};\n","import React from 'react';\nimport {\n  BaseFormControl,\n  isFilled,\n  useInputGroupContext,\n  useVariant,\n  VariantType,\n} from '@entur/form';\nimport { ClockIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\n\nexport type NativeTimePickerProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over NativeTimePicker */\n  label: string;\n  /** Varselmelding, som vil komme under NativeTimePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <ClockIcon />\n   */\n  prepend?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const NativeTimePicker = React.forwardRef<\n  HTMLInputElement,\n  NativeTimePickerProps\n>(\n  (\n    {\n      className,\n      style,\n      onChange,\n      label,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      prepend = <ClockIcon />,\n      ...rest\n    },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const nativetimepickerId = useRandomId('eds-nativetimepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        className={className}\n        prepend={prepend}\n        label={label}\n        feedback={feedback}\n        variant={variant}\n        labelId={nativetimepickerId}\n        disableLabelAnimation={disableLabelAnimation}\n      >\n        <NativeTimePickerBase\n          onChange={onChange}\n          aria-labelledby={nativetimepickerId}\n          ref={ref}\n          {...rest}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype NativeTimePickerBaseProps = {\n  variant?: VariantType;\n} & React.DetailedHTMLProps<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n>;\n\nconst NativeTimePickerBase = React.forwardRef<\n  HTMLInputElement,\n  NativeTimePickerBaseProps\n>(({ onChange, value, ...rest }, ref) => {\n  const contextVariant = useVariant();\n  const currentVariant = rest.variant || contextVariant;\n  const { isFilled: isTimepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    setFiller && !isTimepickerFilled && setFiller(true);\n  });\n\n  React.useEffect(() => {\n    if (value) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n  }, [value, setFiller, isTimepickerFilled]);\n\n  const handleChange = (event: any) => {\n    if (isFilled(event.target)) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n  return (\n    <input\n      ref={ref}\n      aria-invalid={currentVariant === 'error'}\n      type=\"time\"\n      className=\"eds-form-control eds-native-date-picker\"\n      onChange={handleChange}\n      value={value}\n      {...rest}\n    />\n  );\n});\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('datepicker', 'form', 'icons');\n\nexport * from './DatePicker';\nexport * from './NativeDatePicker';\nexport * from './TimePicker';\nexport * from './NativeTimePicker';\n"],"names":["DatePickerHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","monthNames","locale","year","Date","getFullYear","monthList","Array","keys","formatter","Intl","DateTimeFormat","month","from","monthIndex","format","getMonthList","React","className","IconButton","onClick","disabled","LeftArrowIcon","Heading3","getMonth","RightArrowIcon","DatePickerInput","forwardRef","ref","style","label","inputPlaceholder","prepend","feedback","variant","calendarButtonTooltip","hideCalendarButton","disableLabelAnimation","inputRef","toggleCalendarGUI","onKeyDownInput","onBlurInput","selectedDate","rest","handleOnKeyDown","event","handleOnBlur","handleOnFocus","setTimeout","current","_inputRef$current7","select","useEffect","addEventListener","removeEventListener","TextField","placeholder","mergeRefs","append","Tooltip","placement","content","disableHoverListener","disableFocusListener","type","CalendarIcon","refs","node","registerLocale","nb","DatePicker","onChange","onKeyDown","dateFormats","minDate","maxDate","inline","validationFeedback","validationVariant","hideCalendar","hideValidation","weekLabel","open","datepickerId","useRandomId","useState","showValidation","setShowValidation","datepickerRef","useRef","validateInput","inputValue","_inputRef$current","value","inputValueParsedWithAllDateFormats","map","parse","parsedDateFromInputIsTheSameAsSelectedDate","some","dateFormat","isSameDay","getFeedbackAndVariant","undefined","forceUpdateInputFormat","_datepickerRef$curren2","setState","ReactDatepicker","selected","showWeekNumbers","onClickOutside","id","ariaLabelledBy","showPopperArrow","preventOpenOnFocus","calendarClassName","dayClassName","weekDayClassName","classNames","highlightDates","renderCustomHeader","changeYear","changeMonth","customInput","calendarIsClosed","_datepickerRef$curren","isCalendarOpen","key","_datepickerRef$curren5","onFocus","_datepickerRef$curren3","setOpen","_datepickerRef$curren4","NativeDatePicker","DateIcon","nativedatepickerId","BaseFormControl","labelId","isFilled","NativeDatePickerBase","contextVariant","useVariant","currentVariant","useInputGroupContext","isDatepickerFilled","setFiller","setFilled","useOnMount","target","TimePicker","selectedTime","labelTooltip","onLeftArrowClick","sub","minutes","onRightArrowClick","add","timepickerId","TimePickerArrowButton","direction","tabIndex","e","TimePickerBase","POPPER_MODIFIERS","name","enabled","options","offset","timeFormat","isTimepickerFilled","showTimeSelect","showTimeInput","showTimeSelectOnly","placeholderText","popperClassName","popperModifiers","NativeTimePicker","ClockIcon","nativetimepickerId","NativeTimePickerBase","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"datepicker.cjs.production.min.js","sources":["../src/DatePicker/DatePickerHeader.tsx","../src/DatePicker/DatePickerInput.tsx","../src/DatePicker/DatePicker.tsx","../src/NativeDatePicker.tsx","../src/TimePicker.tsx","../src/NativeTimePicker.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\n\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { IconButton } from '@entur/button';\n\nexport const DatePickerHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n}: Partial<ReactDatePickerCustomHeaderProps>) => {\n  const monthNames = getMonthList();\n  return (\n    <div className=\"eds-datepicker__calender__header\">\n      <IconButton\n        type=\"button\"\n        className=\"eds-datepicker__calender__header__month-button--left\"\n        onClick={decreaseMonth}\n        disabled={prevMonthButtonDisabled}\n      >\n        <LeftArrowIcon />\n      </IconButton>\n      <Heading3 className=\"eds-datepicker__calender__header__month-text\">\n        {monthNames[date?.getMonth() ?? 0]}\n      </Heading3>\n      <Heading3 className=\"eds-datepicker__calender__header__month-text\">\n        {date?.getFullYear()}\n      </Heading3>\n\n      <IconButton\n        type=\"button\"\n        className=\"eds-datepicker__calender__header__month-button--right\"\n        onClick={increaseMonth}\n        disabled={nextMonthButtonDisabled}\n      >\n        <RightArrowIcon />\n      </IconButton>\n    </div>\n  );\n};\n\nfunction getMonthList(locale = 'nb') {\n  const year = new Date().getFullYear();\n  const monthList = Array(12).keys();\n  const formatter = new Intl.DateTimeFormat(locale, {\n    month: 'long',\n  });\n  const getMonthName = (monthIndex: number) =>\n    formatter.format(new Date(year, monthIndex));\n\n  return Array.from(monthList, getMonthName);\n}\n","import React from 'react';\n\nimport { TextField, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport { IconButton } from '@entur/button';\nimport { CalendarIcon } from '@entur/icons';\n\ntype DatePickerInputProps = {\n  style?: React.CSSProperties;\n  label: string;\n  inputPlaceholder: string;\n  prepend?: React.ReactNode;\n  feedback?: string;\n  variant?: VariantType;\n  disabled?: boolean;\n  disableLabelAnimation?: boolean;\n  calendarButtonTooltip: string;\n  hideCalendarButton?: boolean;\n  inputRef: React.RefObject<HTMLInputElement>;\n  calendarButtonId: string;\n  forwardRef: React.ForwardedRef<HTMLInputElement>;\n  toggleCalendarGUI: () => void;\n  setFocusToCalendarGUI: () => void;\n  setShouldFocusOnCalendarButtonAfterSelect: React.Dispatch<\n    React.SetStateAction<boolean>\n  >;\n  onKeyDownInput: (event: KeyboardEvent) => any;\n  onBlurInput: (event: FocusEvent) => any;\n  calendarGUIIsOpen: () => boolean | undefined;\n  onClick?: React.MouseEventHandler<HTMLInputElement>; // react-datepicker's onClick prop\n  onFocus: undefined; // To prevent open on focus\n  selectedDate: Date | null; // Necessary to update component on state change\n  placeholder?: null; // override react-datepickers placeholder prop\n};\n\nexport const DatePickerInput = React.forwardRef<\n  HTMLInputElement,\n  DatePickerInputProps\n>(\n  (\n    {\n      style,\n      label,\n      inputPlaceholder,\n      prepend,\n      feedback,\n      variant,\n      disabled,\n      calendarButtonTooltip,\n      hideCalendarButton,\n      disableLabelAnimation,\n      inputRef,\n      calendarButtonId,\n      forwardRef,\n      toggleCalendarGUI,\n      onKeyDownInput,\n      onBlurInput,\n      selectedDate,\n      setFocusToCalendarGUI,\n      setShouldFocusOnCalendarButtonAfterSelect,\n      calendarGUIIsOpen,\n      placeholder, // eslint-disable-line\n      onClick,\n      ...rest // forwarded props from react-datepicker\n    },\n    ref,\n  ) => {\n    React.useEffect(() => {\n      inputRef.current?.addEventListener('keydown', handleOnKeyDown);\n      inputRef.current?.addEventListener('blur', handleOnBlur);\n      inputRef.current?.addEventListener('focus', handleOnFocus);\n      return () => {\n        inputRef.current?.removeEventListener('keydown', handleOnKeyDown);\n        inputRef.current?.removeEventListener('blur', handleOnBlur);\n        inputRef.current?.removeEventListener('focus', handleOnFocus);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputRef, selectedDate]);\n\n    function handleOnKeyDown(this: HTMLElement, event: KeyboardEvent) {\n      onKeyDownInput(event);\n    }\n    function handleOnBlur(this: HTMLElement, event: FocusEvent) {\n      onBlurInput(event);\n    }\n    const handleOnFocus = () =>\n      requestAnimationFrame(() => inputRef.current?.select());\n\n    const handleOnClickInputField = (\n      event: React.MouseEvent<HTMLInputElement, MouseEvent>,\n    ) => {\n      setShouldFocusOnCalendarButtonAfterSelect(false);\n      onClick && onClick(event);\n    };\n\n    const handleOnClickCalendarButton = () => {\n      toggleCalendarGUI();\n      setFocusToCalendarGUI();\n      setShouldFocusOnCalendarButtonAfterSelect(true);\n    };\n\n    return (\n      <TextField\n        style={style}\n        label={label}\n        placeholder={inputPlaceholder}\n        prepend={prepend}\n        feedback={feedback}\n        variant={variant}\n        disableLabelAnimation={disableLabelAnimation}\n        ref={mergeRefs(ref, inputRef, forwardRef)}\n        onClick={handleOnClickInputField}\n        append={\n          !hideCalendarButton && (\n            <Tooltip\n              placement=\"top\"\n              content={calendarButtonTooltip}\n              disableHoverListener={disabled}\n              disableFocusListener={disabled}\n            >\n              <IconButton\n                id={calendarButtonId}\n                type=\"button\"\n                onClick={handleOnClickCalendarButton}\n                tabIndex={calendarGUIIsOpen() ? -1 : 0}\n              >\n                <CalendarIcon />\n              </IconButton>\n            </Tooltip>\n          )\n        }\n        {...rest}\n      />\n    );\n  },\n);\n\nconst mergeRefs = <T extends HTMLElement>(\n  ...refs: React.MutableRefObject<T>[] | React.ForwardedRef<T>[]\n) => {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) ref.current = node;\n    }\n  };\n};\n","import React, { useRef, useState } from 'react';\nimport ReactDatePicker, {\n  default as ReactDatepicker,\n  ReactDatePickerProps,\n  registerLocale,\n} from 'react-datepicker';\nimport { parse, isSameDay, Locale } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport classNames from 'classnames';\n\nimport { VariantType } from '@entur/form';\nimport { useRandomId } from '@entur/utils';\n\nimport { DatePickerHeader } from './DatePickerHeader';\nimport { DatePickerInput } from './DatePickerInput';\n\nimport './DatePicker.scss';\nimport 'react-datepicker/dist/react-datepicker.css';\n\nregisterLocale('nb', nb);\n\nexport type DatePickerProps = {\n  /** Hva som er den valgte datoen */\n  selectedDate: Date | null;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event> | undefined,\n  ) => void;\n  /**\n   * Kalles når en tast trykkes i inputfeltet\n   */\n  onKeyDown?: (event: KeyboardEvent) => void;\n  /**\n   * Datoformater som skal støttes. Første i listen er formatet alt input omgjøres til.\n   * Format-valg tilgjengelig her: https://date-fns.org/v2.28.0/docs/format\n   * OBS: Noen kombinasjoner av datoformater kan gi rar og uønsket oppførsel,\n   * test nøye ved endring\n   * @default \"['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy']\"\n   */\n  dateFormats?: string[];\n  /**\n   * Locale fra date-fns som brukes av Datepicker-en\n   * @default nb\n   */\n  locale?: Locale;\n  /** Placeholder om ingen dato er valgt\n   * @default \"dd.mm.yyyy\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over DatePicker */\n  label: string;\n  /**\n   * Varselmelding, som vil komme under DatePicker\n   */\n  feedback?: string;\n  /** Valideringsvariant\n   */\n  variant?: VariantType;\n  /** Varselmelding for når datoen er på feil format\n   * @default \"Ugyldig dato\"\n   */\n  validationFeedback?: string;\n  /** Valideringsvariant for melding om feil datoformat\n   * @default \"error\"\n   */\n  validationVariant?: VariantType;\n  style?: React.CSSProperties;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <DateIcon />\n   */\n  prepend?: React.ReactNode;\n  /**\n   * Tekst som vises ved hover på «Åpne kalender»-knappen\n   */\n  calendarButtonTooltip?: string;\n  /** Skjuler knapp for åpning av kalender\n   * @default false\n   */\n  hideCalendarButton?: boolean;\n  /** Skjuler tilbakemeldingsteksten ved feil dato-input\n   * @default false\n   */\n  hideValidation?: boolean;\n  /** Skjuler kalender-GUI-et\n   * @default false\n   */\n  hideCalendar?: boolean;\n  /** Viser kun kalender-popover-en\n   * @default false\n   */\n  inline?: boolean;\n  // For testing\n  'data-cy'?: any;\n} & Omit<\n  ReactDatePickerProps,\n  'selected' | 'customInput' | 'onChangeRaw' | 'dateFormat' | 'locale'\n>;\n\nexport const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(\n  (\n    {\n      style,\n      className,\n      selectedDate,\n      label,\n      placeholder = 'dd.mm.yyyy',\n      onChange,\n      onKeyDown = () => null,\n      dateFormats = ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'],\n      minDate,\n      maxDate,\n      inline = false,\n      disabled,\n      prepend,\n      feedback = '',\n      variant,\n      validationFeedback = 'Ugyldig dato',\n      validationVariant = 'error',\n      disableLabelAnimation = false,\n      calendarButtonTooltip = 'Åpne\\xa0kalender',\n      hideCalendarButton = false,\n      hideCalendar = false,\n      hideValidation = false,\n      weekLabel = 'uke',\n      locale = nb,\n      open,\n      ...rest\n    },\n    ref,\n  ) => {\n    const datepickerId = useRandomId('eds-datepicker');\n\n    const datepickerRef = useRef<ReactDatePicker>(null);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const calendarButton = document.getElementById(datepickerId + '-button');\n\n    const [showValidation, setShowValidation] = useState(false);\n    const [\n      shouldFocusOnCalendarButtonAfterSelect,\n      setShouldFocusOnCalendarButtonAfterSelect,\n    ] = useState(false);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    React.useEffect(() => validateInput(), [selectedDate]);\n\n    const handleOnChange = (\n      date: Date | null,\n      event: React.SyntheticEvent<any, Event> | undefined,\n    ): void => {\n      if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {\n        calendarButton?.focus();\n        setShouldFocusOnCalendarButtonAfterSelect(false);\n      } else inputRef.current?.focus();\n\n      onChange(date, event);\n    };\n\n    const handleOnKeyDown = (event: KeyboardEvent) => {\n      setShowValidation(false);\n\n      if (event.key === 'Enter') {\n        if (!datePickerGUIIsOpen()) {\n          // onBlurInput will validate if calendar is open\n          validateInput();\n          forceUpdateInputFormat();\n        }\n        focusAndSelectInputField();\n      } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {\n        forceUpdateInputFormat();\n      } else if (event.key === 'Escape') {\n        forceUpdateInputFormat();\n        focusAndSelectInputField();\n        if (datePickerGUIIsOpen()) toggleCalendarGUI();\n      }\n      onKeyDown(event);\n    };\n\n    const handleOnClickOutside = () =>\n      setShouldFocusOnCalendarButtonAfterSelect(false);\n\n    const handleOnBlurInput = () => {\n      if (datePickerGUIIsOpen()) return;\n      validateInput();\n      forceUpdateInputFormat();\n    };\n\n    const validateInput = () => {\n      setShowValidation(false);\n      const inputValue = inputRef.current?.value;\n      if (!inputValue) return;\n\n      const inputValueParsedWithAllDateFormats = dateFormats.map(format =>\n        parse(inputValue, format, new Date(), {\n          locale: locale,\n        }),\n      );\n\n      const parsedDateFromInputIsTheSameAsSelectedDate =\n        selectedDate &&\n        inputValueParsedWithAllDateFormats.some(dateFormat =>\n          isSameDay(dateFormat, selectedDate),\n        );\n\n      if (parsedDateFromInputIsTheSameAsSelectedDate) {\n        // valid date inputted\n        setShowValidation(false);\n      } else {\n        // invalid date inputted\n        setShowValidation(true);\n      }\n    };\n\n    const getFeedbackAndVariant = (): {\n      feedback: string;\n      variant: VariantType | undefined;\n    } => {\n      if (feedback) return { feedback, variant };\n      if (!hideValidation && showValidation)\n        return { feedback: validationFeedback, variant: validationVariant };\n      return { feedback: '', variant: undefined };\n    };\n\n    const focusAndSelectInputField = () =>\n      requestAnimationFrame(() => inputRef.current?.select());\n\n    const forceUpdateInputFormat = () =>\n      datepickerRef.current?.setState({ inputValue: null });\n\n    const toggleCalendarGUI = () =>\n      datepickerRef.current?.setOpen(!datePickerGUIIsOpen());\n\n    // this focus function will fail if both an inline and a non-inline calendar is present in the same document\n    const setFocusToCalendarGUI = () => {\n      if (inline || hideCalendar || datePickerGUIIsOpen()) return;\n      // 1 frame delay to allow calendar to spawn\n      requestAnimationFrame(() => {\n        const dateToSetFocusTo = selectedDate\n          ? (document.getElementsByClassName(\n              'eds-datepicker__calender__day--selected',\n            )[0] as HTMLElement | null)\n          : (document.getElementsByClassName(\n              'eds-datepicker__calender__day--today',\n            )[0] as HTMLElement | null);\n        if (dateToSetFocusTo !== null) dateToSetFocusTo.focus();\n      });\n      setShouldFocusOnCalendarButtonAfterSelect(true);\n      setShowValidation(false);\n    };\n\n    const datePickerGUIIsOpen = () => datepickerRef.current?.isCalendarOpen();\n\n    return (\n      <>\n        <ReactDatepicker\n          selected={selectedDate}\n          minDate={minDate}\n          maxDate={maxDate}\n          dateFormat={dateFormats}\n          showWeekNumbers\n          weekLabel={weekLabel}\n          onChange={handleOnChange}\n          onClickOutside={handleOnClickOutside}\n          id={datepickerId}\n          ariaLabelledBy={datepickerId}\n          showPopperArrow={false}\n          locale={locale}\n          inline={inline}\n          disabled={disabled}\n          preventOpenOnFocus={true}\n          open={hideCalendar ? false : open}\n          ref={datepickerRef}\n          calendarClassName=\"eds-datepicker__calender\"\n          dayClassName={() => 'eds-datepicker__calender__day'}\n          weekDayClassName={() => 'eds-datepicker__calender__day-name'}\n          className={classNames(className, 'eds-datepicker__input')}\n          highlightDates={[\n            { 'eds-datepicker__calender__day--today': [new Date()] },\n            {\n              'eds-datepicker__calender__day--selected': selectedDate\n                ? [selectedDate]\n                : [],\n            },\n          ]}\n          renderCustomHeader={({\n            date,\n            changeYear,\n            changeMonth,\n            decreaseMonth,\n            increaseMonth,\n            prevMonthButtonDisabled,\n            nextMonthButtonDisabled,\n          }) => (\n            <DatePickerHeader\n              date={date}\n              changeYear={changeYear}\n              changeMonth={changeMonth}\n              increaseMonth={increaseMonth}\n              decreaseMonth={decreaseMonth}\n              prevMonthButtonDisabled={prevMonthButtonDisabled}\n              nextMonthButtonDisabled={nextMonthButtonDisabled}\n            />\n          )}\n          customInput={\n            <DatePickerInput\n              style={style}\n              label={label}\n              inputPlaceholder={placeholder}\n              calendarButtonTooltip={calendarButtonTooltip}\n              prepend={prepend}\n              feedback={getFeedbackAndVariant().feedback}\n              variant={getFeedbackAndVariant().variant}\n              inputRef={inputRef}\n              calendarButtonId={datepickerId + '-button'}\n              forwardRef={ref}\n              onKeyDownInput={handleOnKeyDown}\n              onBlurInput={handleOnBlurInput}\n              onFocus={undefined}\n              toggleCalendarGUI={toggleCalendarGUI}\n              setFocusToCalendarGUI={setFocusToCalendarGUI}\n              setShouldFocusOnCalendarButtonAfterSelect={\n                setShouldFocusOnCalendarButtonAfterSelect\n              }\n              calendarGUIIsOpen={datePickerGUIIsOpen}\n              disableLabelAnimation={disableLabelAnimation}\n              hideCalendarButton={hideCalendarButton}\n              selectedDate={selectedDate}\n            />\n          }\n          {...rest}\n        />\n      </>\n    );\n  },\n);\n","import React from 'react';\nimport {\n  BaseFormControl,\n  isFilled,\n  useInputGroupContext,\n  useVariant,\n  VariantType,\n} from '@entur/form';\nimport { DateIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\n\nexport type NativeDatePickerProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over NativeDatePicker */\n  label: string;\n  /** Varselmelding, som vil komme under NativeDatePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <DateIcon />\n   */\n  prepend?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const NativeDatePicker = React.forwardRef<\n  HTMLInputElement,\n  NativeDatePickerProps\n>(\n  (\n    {\n      className,\n      style,\n      label,\n      onChange,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      prepend = <DateIcon inline />,\n      ...rest\n    },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const nativedatepickerId = useRandomId('eds-nativetimepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        className={className}\n        prepend={prepend}\n        label={label}\n        feedback={feedback}\n        variant={variant}\n        labelId={nativedatepickerId}\n        disableLabelAnimation={disableLabelAnimation}\n        isFilled\n      >\n        <NativeDatePickerBase\n          onChange={onChange}\n          aria-labelledby={nativedatepickerId}\n          ref={ref}\n          variant={variant}\n          {...rest}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype NativeDatePickerBaseProps = {\n  onChange?: any;\n  variant?: VariantType;\n} & React.DetailedHTMLProps<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n>;\n\nconst NativeDatePickerBase = React.forwardRef<\n  HTMLInputElement,\n  NativeDatePickerBaseProps\n>(({ onChange, variant, value, ...rest }, ref) => {\n  const contextVariant = useVariant();\n  const currentVariant = variant || contextVariant;\n  const { isFilled: isDatepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    setFiller && !isDatepickerFilled && setFiller(true);\n  });\n\n  React.useEffect(() => {\n    if (value) {\n      setFiller && !isDatepickerFilled && setFiller(true);\n    } else {\n      setFiller && isDatepickerFilled && setFiller(false);\n    }\n  }, [value, setFiller, isDatepickerFilled]);\n\n  const handleChange = (event: any) => {\n    if (isFilled(event.target)) {\n      setFiller && !isDatepickerFilled && setFiller(true);\n    } else {\n      setFiller && isDatepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n  return (\n    <input\n      ref={ref}\n      aria-invalid={currentVariant === 'error'}\n      type=\"date\"\n      className=\"eds-form-control eds-native-date-picker\"\n      onChange={handleChange}\n      value={value}\n      {...rest}\n    />\n  );\n});\n","import React from 'react';\nimport {\n  default as ReactDatepicker,\n  ReactDatePickerProps,\n  registerLocale,\n} from 'react-datepicker';\nimport classNames from 'classnames';\nimport {\n  BaseFormControl,\n  useInputGroupContext,\n  VariantType,\n} from '@entur/form';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\nimport { nb } from 'date-fns/locale';\nimport { add, sub } from 'date-fns';\nimport * as Popper from '@popperjs/core';\nimport './TimePicker.scss';\nregisterLocale('nb', nb);\n\nexport type TimePickerProps = {\n  /** Hva som er den valgte datoen */\n  selectedTime?: Date;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event>,\n  ) => void;\n  /** Placeholder om ingen dato er valgt\n   * @default \"Velg tid\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over TimePicker */\n  label: string;\n  /** Varselmelding, som vil komme under TimePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  style?: React.CSSProperties;\n  labelTooltip?: React.ReactNode;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Kalles ved klikk på pil venstre i TimePicker\n   * @default Trekker fra 30 minutter av den valgte tiden\n   */\n  onLeftArrowClick?: (selectedTime?: Date | null, e?: React.MouseEvent) => void;\n  /** Kalles ved klikk på pil høyre i TimePicker\n   * @default Legger til 30 minutter av den valgte tiden\n   */\n  onRightArrowClick?: (\n    selectedTime?: Date | null,\n    e?: React.MouseEvent,\n  ) => void;\n} & ReactDatePickerProps;\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      selectedTime = null,\n      onChange,\n      placeholder = 'Velg tid',\n      disabled,\n      className,\n      style,\n      label,\n      labelTooltip,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      locale = 'nb',\n      onLeftArrowClick = (selectedTime, event) =>\n        selectedTime && onChange(sub(selectedTime, { minutes: 30 }), event),\n      onRightArrowClick = (selectedTime, event) =>\n        selectedTime && onChange(add(selectedTime, { minutes: 30 }), event),\n      ...rest\n    },\n    ref,\n  ) => {\n    const timepickerId = useRandomId('eds-timepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        ref={ref}\n        label={label}\n        labelId={timepickerId}\n        labelTooltip={labelTooltip}\n        variant={variant}\n        feedback={feedback}\n        disableLabelAnimation={disableLabelAnimation}\n        className=\"eds-timepicker-form-control\"\n        disabled={disabled}\n        prepend={\n          <TimePickerArrowButton\n            direction=\"left\"\n            tabIndex={-1}\n            onClick={(e: React.MouseEvent) => onLeftArrowClick(selectedTime, e)}\n            disabled={disabled}\n          />\n        }\n      >\n        <TimePickerBase\n          selectedTime={selectedTime}\n          onChange={onChange}\n          placeholder={placeholder}\n          className={className}\n          locale={locale}\n          ariaLabelledBy={timepickerId}\n          disabled={disabled}\n          {...rest}\n        />\n        <TimePickerArrowButton\n          direction=\"right\"\n          tabIndex={-1}\n          onClick={(e: React.MouseEvent) => onRightArrowClick(selectedTime, e)}\n          disabled={disabled}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype TimePickerBaseProps = {\n  /** Hva som er den valgte datoen */\n  selectedTime?: Date | null;\n  /** Kalles når datoen/tiden endres */\n  onChange: (\n    date: Date | null,\n    event: React.SyntheticEvent<any, Event>,\n  ) => void;\n  /** Placeholder om ingen dato er valgt\n   * @default \"Velg tid\"\n   */\n  placeholder?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n} & ReactDatePickerProps;\n\nconst POPPER_MODIFIERS: Popper.StrictModifiers[] = [\n  {\n    name: 'offset',\n    enabled: true,\n    options: {\n      offset: [0, 0],\n    },\n  },\n];\nconst TimePickerBase: React.FC<TimePickerBaseProps> = ({\n  className,\n  onChange,\n  selectedTime,\n  placeholder,\n  timeFormat = 'HH:mm',\n  dateFormat = ['HH:mm', 'HHmm'],\n  ...rest\n}) => {\n  const { isFilled: isTimepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    if (selectedTime) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    }\n  });\n\n  React.useEffect(() => {\n    if (selectedTime) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n  }, [selectedTime, setFiller, isTimepickerFilled]);\n\n  const handleChange = (date: any, event: any) => {\n    if (date) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(date, event);\n    }\n  };\n  return (\n    <ReactDatepicker\n      className={classNames(\n        'eds-form-control',\n        'eds-timepicker__input',\n        className,\n      )}\n      calendarClassName=\"eds-timepicker\"\n      selected={selectedTime}\n      onChange={handleChange}\n      dateFormat={dateFormat}\n      timeFormat={timeFormat}\n      showTimeSelect\n      showTimeInput={true}\n      showTimeSelectOnly\n      showPopperArrow={false}\n      placeholderText={placeholder}\n      popperClassName=\"eds-datepicker__popper\"\n      popperModifiers={POPPER_MODIFIERS}\n      open={false}\n      {...rest}\n    />\n  );\n};\n\ntype TimePickerArrowButtonProps = {\n  direction: 'left' | 'right';\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nconst TimePickerArrowButton: React.FC<TimePickerArrowButtonProps> = ({\n  direction,\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-timepicker__arrowbutton',\n        `eds-timepicker__arrowbutton--${direction}`,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {direction === 'left' ? <LeftArrowIcon /> : <RightArrowIcon />}\n    </button>\n  );\n};\n","import React from 'react';\nimport {\n  BaseFormControl,\n  isFilled,\n  useInputGroupContext,\n  useVariant,\n  VariantType,\n} from '@entur/form';\nimport { ClockIcon } from '@entur/icons';\nimport { useOnMount, useRandomId } from '@entur/utils';\n\nexport type NativeTimePickerProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label over NativeTimePicker */\n  label: string;\n  /** Varselmelding, som vil komme under NativeTimePicker */\n  feedback?: string;\n  /** Valideringsvariant */\n  variant?: VariantType;\n  /** Plasserer labelen statisk på toppen av inputfeltet\n   * @default false\n   */\n  disableLabelAnimation?: boolean;\n  /** Tekst eller ikon som kommer før inputfelter\n   * @default <ClockIcon />\n   */\n  prepend?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const NativeTimePicker = React.forwardRef<\n  HTMLInputElement,\n  NativeTimePickerProps\n>(\n  (\n    {\n      className,\n      style,\n      onChange,\n      label,\n      feedback,\n      variant,\n      disableLabelAnimation,\n      prepend = <ClockIcon />,\n      ...rest\n    },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const nativetimepickerId = useRandomId('eds-nativetimepicker');\n    return (\n      <BaseFormControl\n        style={style}\n        className={className}\n        prepend={prepend}\n        label={label}\n        feedback={feedback}\n        variant={variant}\n        labelId={nativetimepickerId}\n        disableLabelAnimation={disableLabelAnimation}\n      >\n        <NativeTimePickerBase\n          onChange={onChange}\n          aria-labelledby={nativetimepickerId}\n          ref={ref}\n          {...rest}\n        />\n      </BaseFormControl>\n    );\n  },\n);\n\ntype NativeTimePickerBaseProps = {\n  variant?: VariantType;\n} & React.DetailedHTMLProps<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n>;\n\nconst NativeTimePickerBase = React.forwardRef<\n  HTMLInputElement,\n  NativeTimePickerBaseProps\n>(({ onChange, value, ...rest }, ref) => {\n  const contextVariant = useVariant();\n  const currentVariant = rest.variant || contextVariant;\n  const { isFilled: isTimepickerFilled, setFilled: setFiller } =\n    useInputGroupContext();\n\n  useOnMount(() => {\n    setFiller && !isTimepickerFilled && setFiller(true);\n  });\n\n  React.useEffect(() => {\n    if (value) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n  }, [value, setFiller, isTimepickerFilled]);\n\n  const handleChange = (event: any) => {\n    if (isFilled(event.target)) {\n      setFiller && !isTimepickerFilled && setFiller(true);\n    } else {\n      setFiller && isTimepickerFilled && setFiller(false);\n    }\n    if (onChange) {\n      onChange(event);\n    }\n  };\n  return (\n    <input\n      ref={ref}\n      aria-invalid={currentVariant === 'error'}\n      type=\"time\"\n      className=\"eds-form-control eds-native-date-picker\"\n      onChange={handleChange}\n      value={value}\n      {...rest}\n    />\n  );\n});\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('datepicker', 'form', 'icons');\n\nexport * from './DatePicker';\nexport * from './NativeDatePicker';\nexport * from './TimePicker';\nexport * from './NativeTimePicker';\n"],"names":["DatePickerHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","monthNames","locale","year","Date","getFullYear","monthList","Array","keys","formatter","Intl","DateTimeFormat","month","from","monthIndex","format","getMonthList","React","className","IconButton","type","onClick","disabled","LeftArrowIcon","Heading3","getMonth","RightArrowIcon","DatePickerInput","forwardRef","ref","style","label","inputPlaceholder","prepend","feedback","variant","calendarButtonTooltip","hideCalendarButton","disableLabelAnimation","inputRef","calendarButtonId","toggleCalendarGUI","onKeyDownInput","onBlurInput","selectedDate","setFocusToCalendarGUI","setShouldFocusOnCalendarButtonAfterSelect","calendarGUIIsOpen","rest","handleOnKeyDown","event","handleOnBlur","useEffect","current","addEventListener","handleOnFocus","removeEventListener","requestAnimationFrame","_inputRef$current7","select","TextField","placeholder","mergeRefs","append","Tooltip","placement","content","disableHoverListener","disableFocusListener","id","tabIndex","CalendarIcon","refs","node","registerLocale","nb","DatePicker","onChange","onKeyDown","dateFormats","minDate","maxDate","inline","validationFeedback","validationVariant","hideCalendar","hideValidation","weekLabel","open","datepickerId","useRandomId","datepickerRef","useRef","calendarButton","document","getElementById","useState","showValidation","setShowValidation","shouldFocusOnCalendarButtonAfterSelect","validateInput","inputValue","_inputRef$current2","value","inputValueParsedWithAllDateFormats","map","parse","parsedDateFromInputIsTheSameAsSelectedDate","some","dateFormat","isSameDay","getFeedbackAndVariant","undefined","focusAndSelectInputField","_inputRef$current3","forceUpdateInputFormat","_datepickerRef$curren","setState","_datepickerRef$curren2","setOpen","datePickerGUIIsOpen","_datepickerRef$curren3","isCalendarOpen","ReactDatepicker","selected","showWeekNumbers","focus","onClickOutside","ariaLabelledBy","showPopperArrow","preventOpenOnFocus","calendarClassName","dayClassName","weekDayClassName","classNames","highlightDates","renderCustomHeader","changeYear","changeMonth","customInput","key","onFocus","dateToSetFocusTo","getElementsByClassName","NativeDatePicker","DateIcon","nativedatepickerId","BaseFormControl","labelId","isFilled","NativeDatePickerBase","contextVariant","useVariant","currentVariant","useInputGroupContext","isDatepickerFilled","setFiller","setFilled","useOnMount","target","TimePicker","selectedTime","labelTooltip","onLeftArrowClick","sub","minutes","onRightArrowClick","add","timepickerId","TimePickerArrowButton","direction","e","TimePickerBase","POPPER_MODIFIERS","name","enabled","options","offset","timeFormat","isTimepickerFilled","showTimeSelect","showTimeInput","showTimeSelectOnly","placeholderText","popperClassName","popperModifiers","NativeTimePicker","ClockIcon","nativetimepickerId","NativeTimePickerBase","warnAboutMissingStyles"],"mappings":"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"}

package/dist/datepicker.esm.js

@@ -1,5 +1,5 @@
 import { useRandomId, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import ReactDatepicker, { registerLocale } from 'react-datepicker';
 import { parse, isSameDay, sub, add } from 'date-fns';
 import { nb } from 'date-fns/locale';
@@ -94,6 +94,7 @@ var DatePickerHeader = function DatePickerHeader(_ref) {
   return React.createElement("div", {
     className: "eds-datepicker__calender__header"
   }, React.createElement(IconButton, {
+    type: "button",
     className: "eds-datepicker__calender__header__month-button--left",
     onClick: decreaseMonth,
     disabled: prevMonthButtonDisabled
@@ -102,6 +103,7 @@ var DatePickerHeader = function DatePickerHeader(_ref) {
   }, monthNames[(_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0]), React.createElement(Heading3, {
     className: "eds-datepicker__calender__header__month-text"
   }, date == null ? void 0 : date.getFullYear()), React.createElement(IconButton, {
+    type: "button",
     className: "eds-datepicker__calender__header__month-button--right",
     onClick: increaseMonth,
     disabled: nextMonthButtonDisabled
@@ -126,7 +128,7 @@ function getMonthList(locale) {
   return Array.from(monthList, getMonthName);
 }
 
-var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltip", "hideCalendarButton", "disableLabelAnimation", "inputRef", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "placeholder"];
+var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltip", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick"];
 var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var style = _ref.style,
       label = _ref.label,
@@ -139,11 +141,16 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       hideCalendarButton = _ref.hideCalendarButton,
       disableLabelAnimation = _ref.disableLabelAnimation,
       inputRef = _ref.inputRef,
+      calendarButtonId = _ref.calendarButtonId,
       forwardRef = _ref.forwardRef,
       toggleCalendarGUI = _ref.toggleCalendarGUI,
       onKeyDownInput = _ref.onKeyDownInput,
       onBlurInput = _ref.onBlurInput,
       selectedDate = _ref.selectedDate,
+      setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
+      setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
+      calendarGUIIsOpen = _ref.calendarGUIIsOpen,
+      onClick = _ref.onClick,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   React.useEffect(function () {
@@ -158,7 +165,7 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.removeEventListener('keydown', handleOnKeyDown);
       (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.removeEventListener('blur', handleOnBlur);
       (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.removeEventListener('focus', handleOnFocus);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputRef, selectedDate]);
 
   function handleOnKeyDown(event) {
@@ -169,13 +176,24 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBlurInput(event);
   }
 
-  function handleOnFocus() {
-    setTimeout(function () {
+  var handleOnFocus = function handleOnFocus() {
+    return requestAnimationFrame(function () {
       var _inputRef$current7;
 
       return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
-    }, 5);
-  }
+    });
+  };
+
+  var handleOnClickInputField = function handleOnClickInputField(event) {
+    setShouldFocusOnCalendarButtonAfterSelect(false);
+    onClick && onClick(event);
+  };
+
+  var handleOnClickCalendarButton = function handleOnClickCalendarButton() {
+    toggleCalendarGUI();
+    setFocusToCalendarGUI();
+    setShouldFocusOnCalendarButtonAfterSelect(true);
+  };
 
   return React.createElement(TextField, _extends({
     style: style,
@@ -186,14 +204,17 @@ var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: variant,
     disableLabelAnimation: disableLabelAnimation,
     ref: mergeRefs(ref, inputRef, forwardRef),
+    onClick: handleOnClickInputField,
     append: !hideCalendarButton && React.createElement(Tooltip, {
       placement: "top",
       content: calendarButtonTooltip,
       disableHoverListener: disabled,
       disableFocusListener: disabled
     }, React.createElement(IconButton, {
+      id: calendarButtonId,
       type: "button",
-      onClick: toggleCalendarGUI
+      onClick: handleOnClickCalendarButton,
+      tabIndex: calendarGUIIsOpen() ? -1 : 0
     }, React.createElement(CalendarIcon, null)))
   }, rest));
 });
@@ -261,40 +282,71 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var datepickerId = useRandomId('eds-datepicker');
+  var datepickerRef = useRef(null);
+  var inputRef = React.useRef(null);
+  var calendarButton = document.getElementById(datepickerId + '-button');
 
   var _useState = useState(false),
       showValidation = _useState[0],
       setShowValidation = _useState[1];
 
-  var datepickerRef = useRef(null);
-  var inputRef = React.useRef(null);
+  var _useState2 = useState(false),
+      shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
+      setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
   React.useEffect(function () {
     return validateInput();
   }, [selectedDate]);
 
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    var _datepickerRef$curren;
+  var handleOnChange = function handleOnChange(date, event) {
+    var _inputRef$current;
 
-    var calendarIsClosed = !((_datepickerRef$curren = datepickerRef.current) != null && _datepickerRef$curren.isCalendarOpen());
+    if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
+      calendarButton == null ? void 0 : calendarButton.focus();
+      setShouldFocusOnCalendarButtonAfterSelect(false);
+    } else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+
+    onChange(date, event);
+  };
+
+  var handleOnKeyDown = function handleOnKeyDown(event) {
     setShowValidation(false);
 
     if (event.key === 'Enter') {
-      validateInput();
+      if (!datePickerGUIIsOpen()) {
+        // onBlurInput will validate if calendar is open
+        validateInput();
+        forceUpdateInputFormat();
+      }
+
       focusAndSelectInputField();
+    } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
       forceUpdateInputFormat();
-    } else if (event.key === 'Tab' && calendarIsClosed) {
-      validateInput();
+    } else if (event.key === 'Escape') {
       forceUpdateInputFormat();
+      focusAndSelectInputField();
+      if (datePickerGUIIsOpen()) toggleCalendarGUI();
     }
 
     onKeyDown(event);
   };
 
+  var handleOnClickOutside = function handleOnClickOutside() {
+    return setShouldFocusOnCalendarButtonAfterSelect(false);
+  };
+
+  var handleOnBlurInput = function handleOnBlurInput() {
+    if (datePickerGUIIsOpen()) return;
+    validateInput();
+    forceUpdateInputFormat();
+  };
+
   var validateInput = function validateInput() {
-    var _inputRef$current;
+    var _inputRef$current2;
 
     setShowValidation(false);
-    var inputValue = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value;
+    var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value;
     if (!inputValue) return;
     var inputValueParsedWithAllDateFormats = dateFormats.map(function (format) {
       return parse(inputValue, format, new Date(), {
@@ -330,25 +382,43 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var focusAndSelectInputField = function focusAndSelectInputField() {
-    return setTimeout(function () {
-      var _inputRef$current2;
+    return requestAnimationFrame(function () {
+      var _inputRef$current3;
 
-      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.select();
-    }, 5);
+      return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
+    });
   };
 
   var forceUpdateInputFormat = function forceUpdateInputFormat() {
-    var _datepickerRef$curren2;
+    var _datepickerRef$curren;
 
-    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setState({
+    return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
       inputValue: null
     });
   };
 
   var toggleCalendarGUI = function toggleCalendarGUI() {
-    var _datepickerRef$curren3, _datepickerRef$curren4;
+    var _datepickerRef$curren2;
 
-    return (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.setOpen(!((_datepickerRef$curren4 = datepickerRef.current) != null && _datepickerRef$curren4.isCalendarOpen()));
+    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
+  }; // this focus function will fail if both an inline and a non-inline calendar is present in the same document
+
+
+  var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
+    if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
+
+    requestAnimationFrame(function () {
+      var dateToSetFocusTo = selectedDate ? document.getElementsByClassName('eds-datepicker__calender__day--selected')[0] : document.getElementsByClassName('eds-datepicker__calender__day--today')[0];
+      if (dateToSetFocusTo !== null) dateToSetFocusTo.focus();
+    });
+    setShouldFocusOnCalendarButtonAfterSelect(true);
+    setShowValidation(false);
+  };
+
+  var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
+    var _datepickerRef$curren3;
+
+    return (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.isCalendarOpen();
   };
 
   return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
@@ -358,8 +428,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     dateFormat: dateFormats,
     showWeekNumbers: true,
     weekLabel: weekLabel,
-    onChange: onChange,
-    onClickOutside: validateInput,
+    onChange: handleOnChange,
+    onClickOutside: handleOnClickOutside,
     id: datepickerId,
     ariaLabelledBy: datepickerId,
     showPopperArrow: false,
@@ -409,15 +479,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       feedback: getFeedbackAndVariant().feedback,
       variant: getFeedbackAndVariant().variant,
       inputRef: inputRef,
+      calendarButtonId: datepickerId + '-button',
       forwardRef: ref,
       onKeyDownInput: handleOnKeyDown,
-      onBlurInput: function onBlurInput() {
-        var _datepickerRef$curren5;
-
-        return !((_datepickerRef$curren5 = datepickerRef.current) != null && _datepickerRef$curren5.isCalendarOpen()) && validateInput();
-      },
+      onBlurInput: handleOnBlurInput,
       onFocus: undefined,
       toggleCalendarGUI: toggleCalendarGUI,
+      setFocusToCalendarGUI: setFocusToCalendarGUI,
+      setShouldFocusOnCalendarButtonAfterSelect: setShouldFocusOnCalendarButtonAfterSelect,
+      calendarGUIIsOpen: datePickerGUIIsOpen,
       disableLabelAnimation: disableLabelAnimation,
       hideCalendarButton: hideCalendarButton,
       selectedDate: selectedDate