{"version":3,"file":"TimeZoneOption.mjs","sources":["../../../../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { PropsWithChildren, RefCallback } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes';\nimport { Icon } from '../../Icon/Icon';\n\nimport { TimeZoneDescription } from './TimeZoneDescription';\nimport { TimeZoneOffset } from './TimeZoneOffset';\nimport { TimeZoneTitle } from './TimeZoneTitle';\n\ninterface Props {\n  isFocused: boolean;\n  isSelected: boolean;\n  innerProps: JSX.IntrinsicElements['div'];\n  innerRef: RefCallback<HTMLDivElement>;\n  data: SelectableZone;\n}\n\nconst offsetClassName = 'tz-utc-offset';\n\nexport interface SelectableZone extends SelectableValue<string> {\n  searchIndex: string;\n}\n\nexport const WideTimeZoneOption = (props: PropsWithChildren<Props>) => {\n  const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n  const styles = useStyles2(getStyles);\n  const timestamp = Date.now();\n  const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n  if (!isString(data.value)) {\n    return null;\n  }\n\n  const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n  return (\n    <div className={containerStyles} {...innerProps} ref={innerRef} data-testid={selectors.components.Select.option}>\n      <div className={cx(styles.leftColumn, styles.row)}>\n        <div className={cx(styles.leftColumn, styles.wideRow)}>\n          <TimeZoneTitle title={children} />\n          <div className={styles.spacer} />\n          <TimeZoneDescription info={timeZoneInfo} />\n        </div>\n        <div className={styles.rightColumn}>\n          <TimeZoneOffset\n            /* Use the timeZoneInfo to pass the correct timeZone name,\n               as 'Default' has value '' which defaults to browser timezone */\n            timeZone={timeZoneInfo?.ianaName || data.value}\n            timestamp={timestamp}\n            className={offsetClassName}\n          />\n          {isSelected && (\n            <span>\n              <Icon name=\"check\" />\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const CompactTimeZoneOption = (props: React.PropsWithChildren<Props>) => {\n  const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n  const styles = useStyles2(getStyles);\n  const timestamp = Date.now();\n  const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n  if (!isString(data.value)) {\n    return null;\n  }\n\n  const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n  return (\n    <div className={containerStyles} {...innerProps} ref={innerRef} data-testid={selectors.components.Select.option}>\n      <div className={styles.body}>\n        <div className={styles.row}>\n          <div className={styles.leftColumn}>\n            <TimeZoneTitle title={children} />\n          </div>\n          <div className={styles.rightColumn}>\n            {isSelected && (\n              <span>\n                <Icon name=\"check\" />\n              </span>\n            )}\n          </div>\n        </div>\n        <div className={styles.row}>\n          <div className={styles.leftColumn}>\n            <TimeZoneDescription info={timeZoneInfo} />\n          </div>\n          <div className={styles.rightColumn}>\n            <TimeZoneOffset\n              timestamp={timestamp}\n              /* Use the timeZoneInfo to pass the correct timeZone name,\n                 as 'Default' has value '' which defaults to browser timezone */\n              timeZone={timeZoneInfo?.ianaName || data.value}\n              className={offsetClassName}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'flex',\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    cursor: 'pointer',\n    padding: '6px 8px 4px',\n\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  containerFocused: css({\n    background: theme.colors.action.hover,\n  }),\n  body: css({\n    display: 'flex',\n    fontWeight: theme.typography.fontWeightMedium,\n    flexDirection: 'column',\n    flexGrow: 1,\n  }),\n  row: css({\n    display: 'flex',\n    flexDirection: 'row',\n  }),\n  leftColumn: css({\n    flexGrow: 1,\n    textOverflow: 'ellipsis',\n  }),\n  rightColumn: css({\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n  }),\n  wideRow: css({\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'baseline',\n  }),\n  spacer: css({\n    marginLeft: '6px',\n  }),\n});\n"],"names":[],"mappings":"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"}