@atlaskit/datetime-picker/dist/es2019/internal/menu-top-layer.js

A date time picker allows the user to select an associated date and time.

/* menu-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./menu-top-layer.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Fragment } from 'react';
import { isValid, parseISO } from 'date-fns';
import Calendar from '@atlaskit/calendar/calendar';
/**
 * @param isos A series of ISO dates.
 * @returns The last valid date within the array of ISO strings.
 */
function getValidDate(isos) {
  return isos.reduce((acc, iso) => {
    const date = parseISO(iso);
    return isValid(date) ? {
      day: date.getDate(),
      month: date.getMonth() + 1,
      year: date.getFullYear()
    } : acc;
  }, {});
}
const styles = {
  root: "_2rko1mok _1bsb1ris _bfhk1bhr _16qs130s _1pfhu2gc _6rthu2gc"
};

/**
 * Top-layer version of the date picker menu.
 *
 * The surrounding react-select menu portal owns the native popover and
 * positioning. This component only supplies the calendar dialog content.
 *
 * Gated behind the `platform-dst-top-layer` feature flag.
 */
export const MenuTopLayer = ({
  selectProps,
  innerProps
}) => {
  const {
    calendarValue,
    calendarView,
    menuInnerWrapper: MenuInnerWrapper
  } = selectProps;
  const {
    day,
    month,
    year
  } = getValidDate([calendarValue, calendarView]);
  const onMenuMouseDown = event => {
    if (event.button !== 0) {
      return;
    }
    event.stopPropagation();
    event.preventDefault();
  };
  const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
    onMouseDown: onMenuMouseDown,
    role: "presentation",
    className: ax([styles.root])
  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
    day: day,
    month: month,
    year: year,
    disabled: selectProps.calendarDisabled,
    disabledDateFilter: selectProps.calendarDisabledDateFilter,
    minDate: selectProps.calendarMinDate,
    maxDate: selectProps.calendarMaxDate,
    nextMonthLabel: selectProps.nextMonthLabel,
    onChange: selectProps.onCalendarChange,
    onSelect: selectProps.onCalendarSelect,
    previousMonthLabel: selectProps.previousMonthLabel,
    ref: selectProps.calendarRef,
    selected: [selectProps.calendarValue],
    shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
    locale: selectProps.calendarLocale,
    testId: selectProps.testId && `${selectProps.testId}--calendar`,
    weekStartDay: selectProps.calendarWeekStartDay
  })));
};