nge(null, newValue, new Date(newValueDate));
  };

  const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
    if (ev.key === 'Enter' && value) {
      if (isValidDate(valueDate)) {
        applyValidators(valueDate);
      } else {
        setErrorText(invalidFormatText);
      }
    }
  };

  useImperativeHandle<DatePickerRef, DatePickerRef>(
    ref,
    () => ({
      setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
      toggleCalendar: (setOpen?: boolean) => {
        setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
      },
      isCalendarOpen: popoverOpen
    }),
    [setPopoverOpen, popoverOpen, selectOpen]
  );

  const createFocusSelectorString = (modifierClass: string) =>
    `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
  const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
  const focusSelectorForSelectedEndRangeDate = createFocusSelectorString(
    `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}`
  );
  const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);

  /**
   * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover.
   * In case of a range picker it returns the end date, if it is selected, start date otherwise.
   * In case of a normal datepicker it returns the selected date, if present, today otherwise.
   */
  const getElementSelectorToFocus = () => {
    if (isValidDate(valueDate) && isValidDate(rangeStart)) {
      return focusSelectorForSelectedEndRangeDate;
    }
    if (isValidDate(valueDate) || isValidDate(rangeStart)) {
      return focusSelectorForSelectedDate;
    }
    return focusSelectorForUnselectedDate;
  };

  return (
    <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
      <Popover
        elementToFocus={getElementSelectorToFocus()}
        position="bottom"
        bodyContent={
          <CalendarMonth
            date={valueDate}
            onChange={onDateClick}
            locale={locale}
            // Use truthy values of strings
            validators={validators.map((validator) => (date: Date) => !validator(date))}
            onSelectToggle={(open) => setSelectOpen(open)}
            monthFormat={monthFormat}
            weekdayFormat={weekdayFormat}
            longWeekdayFormat={longWeekdayFormat}
            dayFormat={dayFormat}
            weekStart={weekStart}
            rangeStart={rangeStart}
          />
        }
        showClose={false}
        isVisible={popoverOpen}
        shouldClose={(event, hideFunction) => {
          event = event as KeyboardEvent;
          if (event.key === KeyTypes.Escape && selectOpen) {
            event.stopPropagation();
            setSelectOpen(false);
            return false;
          }
          // Let our button handle toggling
          if (buttonRef.current && buttonRef.current.contains(event.target as Node)) {
            return false;
          }

          if (popoverOpen) {
            event.stopPropagation();
            setPopoverOpen(false);
            hideFunction();
            // If datepicker is required and the popover is opened without the text input
            // first receiving focus, we want to validate that the text input is not blank upon
            // closing the popover
            requiredDateOptions?.isRequired && !value && setErrorText(emptyDateText);
          }
          if (event.key === KeyTypes.Escape && popoverOpen) {
            event.stopPropagation();
          }
          return true;
        }}
        withFocusTrap
        hasNoPadding
        hasAutoWidth
        appendTo={appendTo}
        triggerRef={triggerRef}
        {...popoverProps}
      >
        <div className={styles.datePickerInput} ref={triggerRef}>
          <InputGroup>
            <InputGroupItem>
              <TextInput
                isDisabled={isDisabled}
                isRequired={requiredDateOptions?.isRequired}
                aria-label={ariaLabel}
                placeholder={placeholder}
                validated={errorText.trim() ? 'error' : 'default'}
                value={value}
                onChange={onTextInput}
                onBlur={onInputBlur}
                onFocus={() => setTextInputFocused(true)}
                onKeyPress={onKeyPress}
                {...inputProps}
              />
            </InputGroupItem>
            <InputGroupItem>
              <Button
                ref={buttonRef}
                variant="control"
                aria-label={buttonAriaLabel}
                onClick={() => setPopoverOpen(!popoverOpen)}
                isDisabled={isDisabled}
                icon={<OutlinedCalendarAltIcon />}
                aria-haspopup="dialog"
              />
            </InputGroupItem>
          </InputGroup>
        </div>
      </Popover>
      {(errorText || helperText) && (
        <div className={styles.datePickerHelperText}>
          {errorText ? (
            <HelperText>
              <HelperTextItem variant="error">{errorText}</HelperTextItem>
            </HelperText>
          ) : (
            helperText
          )}
        </div>
      )}
    </div>
  );
};

export const DatePicker = React.forwardRef<DatePickerRef, DatePickerProps>(DatePickerBase);
DatePicker.displayName = 'DatePicker';