{"version":3,"file":"TimePickerCalendar.cjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { createRef, FormEvent, memo } from 'react';\n\nimport { DateTime, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { getModalStyles } from '../../Modal/getModalStyles';\nimport { WeekStart } from '../WeekStartPicker';\n\nimport { Body } from './CalendarBody';\nimport { Footer } from './CalendarFooter';\nimport { Header } from './CalendarHeader';\n\nexport const getStyles = (theme: GrafanaTheme2, isReversed = false) => {\n return {\n container: css({\n top: 0,\n position: 'absolute',\n [`${isReversed ? 'left' : 'right'}`]: '546px', // lmao\n }),\n\n modalContainer: css({\n label: 'modalContainer',\n margin: '0 auto',\n }),\n\n calendar: css({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n padding: theme.spacing(1),\n label: 'calendar',\n boxShadow: theme.shadows.z3,\n backgroundColor: theme.colors.background.elevated,\n border: `1px solid ${theme.colors.border.weak}`,\n borderRadius: theme.shape.radius.default,\n }),\n\n modal: css({\n label: 'modal',\n boxShadow: theme.shadows.z3,\n left: '50%',\n position: 'fixed',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: theme.zIndex.modal,\n }),\n };\n};\n\nexport interface TimePickerCalendarProps {\n isOpen: boolean;\n from: DateTime;\n to: DateTime;\n onClose: () => void;\n onApply: (e: FormEvent) => void;\n onChange: (from: DateTime, to: DateTime) => void;\n weekStart?: WeekStart;\n\n /**\n * When true, the calendar is rendered as a floating \"tooltip\" next to the input.\n * When false, the calendar is rendered \"fullscreen\" in a modal. Yes. Don't ask.\n */\n isFullscreen: boolean;\n timeZone?: TimeZone;\n isReversed?: boolean;\n}\n\nfunction TimePickerCalendar(props: TimePickerCalendarProps) {\n const theme = useTheme2();\n const { modalBackdrop } = useStyles2(getModalStyles);\n const styles = getStyles(theme, props.isReversed);\n const { isOpen, isFullscreen: isFullscreenProp, onClose } = props;\n const ref = createRef();\n const { dialogProps } = useDialog(\n {\n 'aria-label': selectors.components.TimePicker.calendar.label,\n },\n ref\n );\n const { overlayProps } = useOverlay(\n {\n isDismissable: true,\n isOpen,\n onClose,\n },\n ref\n );\n\n // This prop is confusingly worded, so rename it to something more intuitive.\n const showInModal = !isFullscreenProp;\n\n if (!isOpen) {\n return null;\n }\n\n const calendar = (\n \n

\n \n {showInModal &&